Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<body> <div class="container"> <div class="component signals" id="vloz"> </div> </div> </body>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.container{ position: relative; top: 80px; left: 50%; transform: translate(-50%, -50%); margin-bottom: 30px; } @media (max-width: 600px) { .container{ top: 50px; } } .heade{ font-family: 'Lato', sans-serif; padding-bottom: 20px; font-weight: normal; color: #222;margin: 0 auto; letter-spacing: 1px } .component{ width: 100%; text-align: center; } .signals{ width: 3%; height: 100px; } .signals .dot{ width: 10px; height: 10px; background: #0096d6; display: inline-block; border-radius: 50%; position: absolute; margin: 0 auto; top: 40%; opacity: 0; transform: translate(-50%, -50%); animation-name: blink; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: normal; } .signals .zero{ margin-left: 0px; } .signals .one{ margin-left: 30px; animation-delay: 0.1s; } .signals .two{ margin-left: 60px; animation-delay: 0.2s; } .signals .three{ margin-left:90px; animation-delay: 0.3s; } .signals .four{ margin-left: 120px; animation-delay: 0.4s; } .signals .five{ margin-left: 150px; animation-delay: 0.5s; } .signals .six{ margin-left: 180px; animation-delay: 0.6s; } .signals .seven{ margin-left: 210px; animation-delay: 0.7s; } .signals .eight{ margin-left: 240px; animation-delay: 0.8s; } .signals .nine{ margin-left: 270px; animation-delay: 0.9s; } .signals .ten{ margin-left: 300px; animation-delay: 0.10s; } .signals .eleven{ margin-left: 330px; animation-delay: 0.11s; } @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 2; } }
CSS
Autoformát
CSS reset
Až na konci
var numbers = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven']; var win = window, doc = document, docElem = doc.documentElement, body = doc.getElementsByTagName('body')[0], x = win.innerWidth || docElem.clientWidth || body.clientWidth, y = win.innerHeight|| docElem.clientHeight|| body.clientHeight; var numDots = Math.floor(x/60); for (var i = 0; i <= numDots; i++) { const dot = document.createElement("div"); dot.classList.add("dot", numbers[i % 12]); dot.style.left = 60 * i + "px"; dot.style.animationDelay = 0.1 * i + "s"; document.getElementById("vloz").appendChild(dot); }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>