JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<div class="apoelka2014">
    <div class="apolight apolight1"></div>
    <div class="apolight apolight2"></div>
    <div class="apolight apolight3"></div>
    <div class="apolight apolight4"></div>
    <div class="apolight apolight5"></div>
    <div class="apolight apolight6"></div>
    <div class="apolight apolight7"></div>
    <div class="apolight apolight8"></div>
    <div class="apolight apolight9"></div>
</div>

CSS

.apoelka2014 {
    width: 360px;
    height: 400px;
    position: absolute;
    z-index: 1;
    background: url(http://imapo.ru/img/apoelka2014.png) no-repeat;
}
.apolight {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 170, 170, 0.7);
    box-shadow: 0px 0px 10px #ffe8e8;
    margin-top: 52px;
    margin-left: 180px;
    position: absolute;
    opacity:0;
    z-index: 2;
}
.apolight2 {
    background: rgba(239, 255, 0, 0.7);
    box-shadow: 0px 0px 10px #FFFFFF;
    margin-top: 88px;
    margin-left: 204px;
}
.apolight3 {
    width: 25px;
    height: 25px;
    background: rgba(239, 255, 0, 0.7);
    box-shadow: 0px 0px 10px #FFFFFF;
    margin-top: 142px;
    margin-left: 160px;
}
.apolight4 {
    width: 25px;
    height: 25px;
    margin-top: 157px;
    margin-left: 128px;
}
.apolight5 {
    width: 25px;
    height: 25px;
    margin-top: 222px;
    margin-left: 193px;
}
.apolight6 {
    width: 25px;
    height: 25px;
    background: rgba(239, 255, 0, 0.7);
    box-shadow: 0px 0px 10px #FFFFFF;
    margin-top: 246px;
    margin-left: 223px;
}
.apolight7 {
    width: 20px;
    height: 20px;
    margin-top: 286px;
    margin-left: 50px;
}
.apolight8 {
    width: 21px;
    height: 21px;
    margin-top: 290px;
    margin-left: 129px;
}
.apolight9 {
    width: 21px;
    height: 21px;
    margin-top: 302px;
    margin-left: 273px;
}

JavaScript

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Разработка Apo-uCoz.com (c) 2014

$(document).ready(function () {
    $('div.apolight').each(function () {
        var th = $(this);
        setInterval(function () {
            th.stop().fadeTo(getRandomInt(100, 500), 1).fadeTo(getRandomInt(100, 500), 0);
        }, getRandomInt(1000, 5000));
    });
});