css如何实现倒计时翻页动画
Mar 12, 2021 pm 04:58 PMcss实现倒计时翻页动画的方法:首先设置外盒子和内盒子;然后内盒子的移动动画的【animation-timing-function】使用step;最后倒计时结束,外盒子动画消失掉。
本教程操作环境:windows7系统、css3版,DELL G3电脑。
css实现倒计时翻页动画的方法:
实现原理
a、外盒子div.cell,一个字的宽和高,超过不显示,确保只能显示一个字。
b、内盒子div.num,一个字的宽,行高一个字高,我们通过这个盒子的移动实现动画。
c、内盒子的移动动画的animation-timing-function
使用step
d、倒计时结束,外盒子动画消失掉
实现过程
好的,来看看实现过程,html文件是这样的,中文的倒计时也可以,不过中文的网络字体太少,所以没弄,感兴趣的同学可以弄起来。
[html] view plain copy <div class="cell"> <div class="num">5 4 3 2 1 0</div> <!--<div class="num">五 四 三 二 一 零</div>--> </div>
CSS部分使用prefix free和normailize,另外为了实现英文字体,我们用了google字体,你需要导入这个文件
http://fonts.googleapis.com/css?family=Allura|Frijole|Varela+Round
[css] view plain copy body{ background:#333; } .cell{ width: 1em; height: 1em; border:1px dashed rgba(255,255,255,0.1); font-size:120px; font-family:Frijole; overflow: hidden; position:absolute; top:50%; left:50%; margin:-0.5em 0 0 -0.5em; opacity:0; animation:go 6s; transform-origin:left bottom; } .num{ position:absolute; width: 1em; color:#E53F39; line-height: 1em; text-align: center; text-shadow:1px 1px 2px rgba(255,255,255,.3); animation:run 6s steps(6); } @keyframes run{ 0%{top:0;} 100%{top:-6em;} } @keyframes go{ 0% {opacity:1;} 84% {opacity:1;transform:rotate(0deg) scale(1);} 100% {opacity:0;transform:rotate(360deg) scale(.01);} }
相关教程推荐:CSS视频教程
Atas ialah kandungan terperinci css如何实现倒计时翻页动画. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Apakah maksud pemegang tempat dalam vue

Bagaimana untuk menulis ruang dalam vue

Bagaimana untuk mendapatkan dom dalam vue

Bagaimana untuk memperkenalkan imej ke dalam vue

Bagaimana untuk membungkus prompt dalam js
