😎 » Анимация css » Анимация цифр для часов или таймера на чистом css
Символы юникода Notepad++ Сокращение Типографика Начало css index.html Микроразметка style.css Блоки DLE Теги DLE
276 0  

Анимация цифр для часов или таймера на чистом css

Анимация цифр для часов или таймера на чистом css в виде смены цифр до 100 и имитация стрелок циферблата

Отсчет до 100

Стрелка имитирующая циферблат

Виконуваний код:

<h2>Отсчет до 100</h2> <div class="steps"></div> <style> .steps {position: relative; font-size:66px; width: 1em; height: 1em; margin: .2em auto; } .steps:before, .steps:after { content: "0123456789"; display: inline-block; width: .5em; overflow: hidden; animation: timingst 10s infinite step-end; } .steps:before { animation-duration: 100s; } @keyframes timingst { 10%{text-indent: -.5em;} 20%{text-indent: -1em;} 30%{text-indent: -1.5em;} 40%{text-indent: -2em;} 50%{text-indent: -2.5em;} 60%{text-indent: -3em;} 70%{text-indent: -3.5em;} 80%{text-indent: -4em;} 90%{text-indent: -4.5em;} }</style> <h2>Стрелка имитирующая циферблат</h2> <div class="strelk"></div> <style> .strelk {position: relative;width: 5em;height: 5em;margin: 1em auto;border: .2em solid mediumturquoise; border-radius: 50%;font-size: 1.2em;} .strelk:before {content: "";display: inline-block; position: absolute; width: .1em; height: 2.1em; left: 2.5em; top: .4em; background: mediumturquoise; animation: timinglk 60s infinite steps(60);transform-origin: 0 2.1em;} @keyframes timinglk {100%{ transform: rotate(360deg);}} </style>
‹ Попередня сторінка Наступна сторінка ›

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023