用animation实现钟表动画
Posted wangzheng98
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用animation实现钟表动画相关的知识,希望对你有一定的参考价值。
html部分,只需要存放三个图片就可以了
<div class="clock"> <div class="sec"></div> <div class="min"></div> <div class="hour"></div> </div>
CSS部分
<style> @keyframes secrun 0% transform: rotate(180deg); 100% transform: rotate(540deg); @keyframes minrun 0% transform: rotate(180deg); 100% transform: rotate(540deg); .clock background-image: url(clock.png); background-repeat: no-repeat; width: 512px; height: 512px; position: relative; .sec background-image: url(second.png); background-repeat: no-repeat; width: 16px; height: 278px; position: absolute; top: 180px; left: 247px; transform: rotate(180deg); transform-origin: center 76px; z-index: 3; animation: secrun 60s steps(60,end) infinite; .min background-image: url(minute.png); background-repeat: no-repeat; width: 32px; height: 218px; position: absolute; top: 240px; left: 239px; transform: rotate(180deg); transform-origin: center 16px; z-index: 2; animation: minrun 3600s steps(60,end) infinite; .hour background-image: url(hour.png); background-repeat: no-repeat; width: 32px; height: 148px; position: absolute; top: 180px; left: 238px; transform: rotate(180deg); transform-origin: center 46px; z-index: 1; </style>
以上是关于用animation实现钟表动画的主要内容,如果未能解决你的问题,请参考以下文章
用wow.js实现页面滚动时触发animate.css动画特效