Показать сообщение отдельно
  #12 (permalink)  
Старый 30.12.2017, 19:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,091


<!DOCTYPE HTML>

<html>

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

  .lamp{
    display: inline-block;
    width:15px;
    height:15px;
    margin:10px;
    border-radius:25px 8px;
    transition:all 180ms ease-in;
    box-shadow:0px 0px 8px 0px rgba(255, 255, 255, 1);
     background-color: transparent;
     transform: scale(1);
  }


  .wrapper{
    width:640px;
    margin:0 auto;
    color:gold;
    text-align:center;

  }



  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
  function h(e) {
    e && "background-color" == e.propertyName && (b[a].style.transform = "",
    (a = ++a % b.length) && a % c || (d = f(), c += ++g, !a && (c = g = 1)),
    b[a].style.backgroundColor = d,
    b[a].style.transform = "scale(1.5)");
  }
  function f() {
    return "#" + ("000000" + (16777215 * Math.random() | 0).toString(16)).slice(-6);
  }
  var b = document.querySelectorAll(".lamp"), d = f(), a = 0, c = 1, g = 1;
  [].forEach.call(b, function(a, b) {
    a.addEventListener("transitionend", h, !1);
  });
  window.setTimeout(function() {
    b[a].style.backgroundColor = d;
  }, 50);
});
  </script>
</head>

<body>


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

</body>

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