Показать сообщение отдельно
  #2 (permalink)  
Старый 24.11.2015, 03:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,135

СергейХ,
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
        .d {
            float:left;
            width:70px;
            height:70px;
            box-sizing:border-box;
            display:inline;
        }
        .wrapper{
            width:700px;
            height:700px;
        }
        </style>
    </head>
    <body>
    <div class = "wrapper">
    <div class = "d0_0 d"></div>
    <div class = "d0_1 d"></div>
    <div class = "d0_2 d"></div>
    <div class = "d0_3 d"></div>
    <div class = "d0_4 d"></div>
    <div class = "d0_5 d"></div>
    <div class = "d0_6 d"></div>
    <div class = "d0_7 d"></div>
    <div class = "d0_8 d"></div>
    <div class = "d0_9 d"></div>
    <div class = "d1_0 d"></div>
    <div class = "d1_1 d"></div>
    <div class = "d1_2 d"></div>
    <div class = "d1_3 d"></div>
    <div class = "d1_4 d"></div>
    <div class = "d1_5 d"></div>
    <div class = "d1_6 d"></div>
    <div class = "d1_7 d"></div>
    <div class = "d1_8 d"></div>
    <div class = "d1_9 d"></div>
    <div class = "d2_0 d"></div>
    <div class = "d2_1 d"></div>
    <div class = "d2_2 d"></div>
    <div class = "d2_3 d"></div>
    <div class = "d2_4 d"></div>
    <div class = "d2_5 d"></div>
    <div class = "d2_6 d"></div>
    <div class = "d2_7 d"></div>
    <div class = "d2_8 d"></div>
    <div class = "d2_9 d"></div>
    <div class = "d3_0 d"></div>
    <div class = "d3_1 d"></div>
    <div class = "d3_2 d"></div>
    <div class = "d3_3 d"></div>
    <div class = "d3_4 d"></div>
    <div class = "d3_5 d"></div>
    <div class = "d3_6 d"></div>
    <div class = "d3_7 d"></div>
    <div class = "d3_8 d"></div>
    <div class = "d3_9 d"></div>
    <div class = "d4_0 d"></div>
    <div class = "d4_1 d"></div>
    <div class = "d4_2 d"></div>
    <div class = "d4_3 d"></div>
    <div class = "d4_4 d"></div>
    <div class = "d4_5 d"></div>
    <div class = "d4_6 d"></div>
    <div class = "d4_7 d"></div>
    <div class = "d4_8 d"></div>
    <div class = "d4_9 d"></div>
    <div class = "d5_0 d"></div>
    <div class = "d5_1 d"></div>
    <div class = "d5_2 d"></div>
    <div class = "d5_3 d"></div>
    <div class = "d5_4 d"></div>
    <div class = "d5_5 d"></div>
    <div class = "d5_6 d"></div>
    <div class = "d5_7 d"></div>
    <div class = "d5_8 d"></div>
    <div class = "d5_9 d"></div>
    <div class = "d6_0 d"></div>
    <div class = "d6_1 d"></div>
    <div class = "d6_2 d"></div>
    <div class = "d6_3 d"></div>
    <div class = "d6_4 d"></div>
    <div class = "d6_5 d"></div>
    <div class = "d6_6 d"></div>
    <div class = "d6_7 d"></div>
    <div class = "d6_8 d"></div>
    <div class = "d6_9 d"></div>
    <div class = "d7_0 d"></div>
    <div class = "d7_1 d"></div>
    <div class = "d7_2 d"></div>
    <div class = "d7_3 d"></div>
    <div class = "d7_4 d"></div>
    <div class = "d7_5 d"></div>
    <div class = "d7_6 d"></div>
    <div class = "d7_7 d"></div>
    <div class = "d7_8 d"></div>
    <div class = "d7_9 d"></div>
    <div class = "d8_0 d"></div>
    <div class = "d8_1 d"></div>
    <div class = "d8_2 d"></div>
    <div class = "d8_3 d"></div>
    <div class = "d8_4 d"></div>
    <div class = "d8_5 d"></div>
    <div class = "d8_6 d"></div>
    <div class = "d8_7 d"></div>
    <div class = "d8_8 d"></div>
    <div class = "d8_9 d"></div>
    <div class = "d9_0 d"></div>
    <div class = "d9_1 d"></div>
    <div class = "d9_2 d"></div>
    <div class = "d9_3 d"></div>
    <div class = "d9_4 d"></div>
    <div class = "d9_5 d"></div>
    <div class = "d9_6 d"></div>
    <div class = "d9_7 d"></div>
    <div class = "d9_8 d"></div>
    <div class = "d9_9 d"></div>
    </div>
<script>
[].forEach.call(document.querySelectorAll(".d"), function(b, a) {
    setTimeout(function() {
        b.style.backgroundColor = "rgba(255,0,0," + a / 100 + ")"
    }, 100 * a)
});
</script>
</body>


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