2、倒序摆放图片,因为倒计时间是由大到小的(废话)
3、给图片设置一个边框,平移时效果更佳
假设使用float: top 图片上下之间会出现一些间隔。但使用float: left 同时使用容器限制,使每一张图片换行,不会出现任何间隔
.countdown-container img{ box-sizing: border-box; width: 25px; height: 40px; border: gray 1px solid; float: left; }
4、小时和分钟的数字切换不能一股脑让他匀速切,得在中间加上停滞,最后用0.1%的时间让其完成切换
@keyframes min{ 0%, 3.13%, 3.23% { margin-top: 0; } 3.23%, 6.36%, 6.46% { margin-top: -40px; }
5、时、分、秒 容器的高度=图片数量*图片高度,动画的总时长= (图片数量+1) * 60(h/m/s) ,记得转换成秒哈
使用ease-out属性值,使切图时更加丝滑~
#countdown-container-min{ height: 2400px; animation: min 1860s ease-out infinite; }
四、全部代码
1、HTML
::
2、CSS
/* 倒计时器 */ .countdown{ position: relative; height: 100px; width: 200px; margin: 50px; } /* 小时、分钟、秒之间的分号 : */ #countdown-s1{ font-size: 30px; color: white; position: absolute; left: 67px; top: -3px; } #countdown-s2{ font-size: 30px; color: white; position: absolute; left: 120px; top: -3px; } /* 倒计时器容器 */ .countdown-container{ width: 25px; height: 40px; overflow: hidden; float: left; margin-left: 30px; } .countdown-container img{ box-sizing: border-box; float: left; width: 25px; height: 40px; border: gray 1px solid; } /* 分钟轮播 */ #countdown-container-min{ height: 2400px; /* 31min,需播放1860s, ease-out用于图片之间慢速停顿过渡*/ animation: min 1860s ease-out infinite; } @keyframes min{ 0%, 3.13%, /* 加入停滞,使切换时的速度为0.1% */ 3.23% { margin-top: 0; } 3.23%, 6.36%, 6.46% { margin-top: -40px; } 6.46%, 9.59%, 9.69% { margin-top: -80px; } 9.69%, 12.82%, 12.92% { margin-top: -120px; } 12.92%, 16.05%, 16.15% { margin-top: -160px; } 16.15%, 19.28%, 19.38% { margin-top: -200px; } 19.38%, 22.51%, 22.61% { margin-top: -240px; } 22.61%, 25.74%, 25.84% { margin-top: -280px; } 25.84%, 28.97%, 29.07% { margin-top: -320px; } 29.07%, 32.20%, 32.30% { margin-top: -360px; } 32.30%, 35.43%, 35.53% { margin-top: -400px; } 35.53%, 38.66%, 38.76% { margin-top: -440px; } 38.76%, 41.89%, 41.99% { margin-top: -480px; } 41.99%, 45.12%, 45.22% { margin-top: -520px; } 45.22%, 48.35%, 48.45% { margin-top: -560px; } 48.45%, 51.58%, 51.68% { margin-top: -600px; } 51.68%, 54.81%, 54.91% { margin-top: -640px; } 54.91%, 58.04%, 58.14% { margin-top: -680px; } 58.14%, 61.27%, 61.37% { margin-top: -720px; } 61.37%, 64.50%, 64.60% { margin-top: -760px; } 64.60%, 67.73%, 67.83% { margin-top: -800px; } 67.83%, 70.96%, 71.06% { margin-top: -840px; } 71.06%, 74.19%, 74.29% { margin-top: -880px; } 74.29%, 77.42%, 77.52% { margin-top: -920px; } 77.52%, 80.65%, 80.75% { margin-top: -960px; } 80.75%, 83.88%, 83.98% { margin-top: -1000px; } 83.98%, 87.11%, 87.21% { margin-top: -1040px; } 87.21%, 90.34%, 90.44% { margin-top: -1080px; } 90.44%, 93.57%, 93.67% { margin-top: -1120px; } 93.67%, 96.80%, 96.90% { margin-top: -1160px; } 96.90%, 99.90%, 100% { margin-top: -1200px; } } /* 秒轮播 */ #countdown-container-second{ height: 2400px; animation: second 60s ease-out infinite; } @keyframes second { 0%, 1.66% { margin-top: 0; } 1.66%, 3.32% { margin-top: -40px; } 3.32%, 4.98% { margin-top: -80px; } 4.98%, 6.64% { margin-top: -120px; } 6.64%, 8.30% { margin-top: -160px; } 8.30%, 9.96% { margin-top: -200px; } 9.96%, 11.62% { margin-top: -240px; } 11.62%, 13.28% { margin-top: -280px; } 13.28%, 14.94% { margin-top: -320px; } 14.94%, 16.60% { margin-top: -360px; } 16.60%, 18.26% { margin-top: -400px; } 18.26%, 19.92% { margin-top: -440px; } 19.92%, 21.58% { margin-top: -480px; } 21.58%, 23.24% { margin-top: -520px; } 23.24%, 24.90% { margin-top: -560px; } 24.90%, 26.56% { margin-top: -600px; } 26.56%, 28.22% { margin-top: -640px; } 28.22%, 29.88% { margin-top: -680px; } 29.88%, 31.54% { margin-top: -720px; } 31.54%, 33.2% { margin-top: -760px; } 33.20%, 34.86% { margin-top: -800px; } 34.86%, 36.52% { margin-top: -840px; } 36.52%, 38.18% { margin-top: -880px; } 38.18%, 39.84% { margin-top: -920px; } 39.84%, 41.50% { margin-top: -960px; } 41.50%, 43.16% { margin-top: -1000px; } 43.16%, 44.82% { margin-top: -1040px; } 44.82%, 46.48% { margin-top: -1080px; } 46.48%, 48.14% { margin-top: -1120px; } 48.14%, 49.80% { margin-top: -1160px; } 49.80%, 51.46% { margin-top: -1200px; } 51.46%, 53.12% { margin-top: -1240px; } 53.12%, 54.78% { margin-top: -1280px; } 54.78%, 56.44% { margin-top: -1320px; } 56.44%, 58.10% { margin-top: -1360px; } 58.10%, 59.76% { margin-top: -1400px; } 59.76%, 61.42% { margin-top: -1440px; } 61.42%, 63.08% { margin-top: -1480px; } 63.08%, 64.74% { margin-top: -1520px; } 64.74%, 66.40% { margin-top: -1560px; } 66.40%, 68.06% { margin-top: -1600px; } 68.06%, 69.72% { margin-top: -1640px; } 69.72%, 71.38% { margin-top: -1680px; } 71.38%, 73.04% { margin-top: -1720px; } 73.04%, 74.70% { margin-top: -1760px; } 74.70%, 76.36% { margin-top: -1800px; } 76.36%, 78.02% { margin-top: -1840px; } 78.02%, 79.68% { margin-top: -1880px; } 79.68%, 81.34% { margin-top: -1920px; } 81.34%, 83.00% { margin-top: -1960px; } 83.00%, 84.66% { margin-top: -2000px; } 84.66%, 86.32% { margin-top: -2040px; } 86.32%, 87.98% { margin-top: -2080px; } 87.98%, 89.64% { margin-top: -2120px; } 89.64%, 91.30% { margin-top: -2160px; } 91.30%, 92.96% { margin-top: -2200px; } 92.96%, 94.62% { margin-top: -2240px; } 94.62%, 96.28% { margin-top: -2280px; } 96.28%, 97.94% { margin-top: -2320px; } 97.94%, 100% { margin-top: -2360px; } }