Показать сообщение отдельно
  #7 (permalink)  
Старый 30.12.2017, 13:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

новогодняя гирлянда
дубль-мини
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    background-color:#333;
  }

  .lamp{
    width:15px;
    height:15px;
    float:left;
    margin:10px;
    border-radius:25px 8px;
    transition:all .3s ease-in;
    box-shadow:0px 0px 8px 0px rgba(255, 255, 255, 1);
  }


  .wrapper{
    width:640px;
    margin:0 auto;
    color:gold;
    text-align:center;
  }
  </style>

  <script>
    window.addEventListener("DOMContentLoaded", function() {
  var a = document.querySelectorAll(".lamp"), b = "#ff0000 #006cff #02fa0c #ff04d5 #ffff00 #ffd700".split(" ");
  (function e() {
    var c = b[Math.random() * b.length | 0], f = .3 < Math.random(), d = a[Math.random() * a.length | 0].style;
    d.backgroundColor = c;
    d.boxShadow = f ? "0px 0px 15px 0px " + c : "";
    window.setTimeout(e, 20);
  })();
});
  </script>
</head>

<body>


<div class="wrapper"> <h1>С Новым Годом! :)</h1>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
</div>

</body>

</html>
Ответить с цитированием