使用CSS动画实现 时钟转动效果 |
您所在的位置：网站首页 › flash逐帧动画打字机效果 › 使用CSS动画实现 时钟转动效果 |
|
使用CSS动画实现 时钟转动效果
此案例主要运用到了css动画的功能。 先将外圆画好，时钟的时间轴先画正中间那一根，绝对定位到中间，然后复制时间轴类名，并依次添加旋转30度的css代码，需要注意的是，后面使用transform:rotate()会覆盖掉前面的transform:translate()属性，因此都要加上translate。然后画一个白色的遮罩层，放在外圆的正中间，以圆形挡住后面的大部分时间轴。接着开始画时、分、秒指针，依然是绝对定位到中间，但是指针的旋转点是自身中底部，因此transform属性设置为translate(-50%,-100%)，指针整体上去，并设置旋转中心transform-origin:bottom，即可实现指针按顺时针方向旋转。 时钟的起点我定义为0秒，秒针转一圈是360°，因此动画代码为： @keyframes rotate360 { /* 起始点是0秒，此处可省略动画起点from */ to { /* 避免translate被覆盖，此处可再添加translate */ transform: translate(-50%, -100%) rotate(360deg); } }然后给秒针加上动画属性，速度曲线我这里设置的是steps(60)，在60s动画里一共有60帧，那么相当于秒针一秒走一次，一分钟走完一圈。 animation: rotate360 60s steps(60) infinite;给分针加上动画属性，这里的速度曲线建议使用linear，随着秒针的转动，分针慢慢过渡转动。 animation: rotate360 3600s linear infinite;给时针加上动画属性，跟分针同理。 animation: rotate360 43200s linear infinite;最后，加上一个小黑圆点放在正中间，时分秒针的旋转中心都在这小黑点上，让时钟看起来更完美一些。 CSS时钟动画，完整代码如下： * { margin: 0; padding: 0; } .clock { box-sizing: border-box; border-radius: 50%; border: 7px solid #000; width: 500px; height: 500px; position: relative; margin: 100px auto; overflow: hidden; } .line { position: absolute; left: 50%; width: 7px; height: 500px; background-color: gray; transform: translate(-50%); } .line:nth-of-type(2) { /* 六条线，各旋转30度 */ transform: translate(-50%) rotate(30deg); } .line:nth-of-type(3) { transform: translate(-50%) rotate(60deg); } .line:nth-of-type(4) { transform: translate(-50%) rotate(90deg); } .line:nth-of-type(5) { transform: translate(-50%) rotate(120deg); } .line:nth-of-type(6) { transform: translate(-50%) rotate(150deg); } .mark { width: 370px; height: 370px; background-color: #fff; border-radius: 50%; /* 将遮罩层绝对垂直居中到父元素里 */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .hour, .minute, .second { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); /* 设置时、分、秒针的旋转中心为底部 */ transform-origin: bottom; } .hour { width: 10px; height: 90px; background-color: rgb(73, 6, 6); /* 给时针设置匀速转动的动画效果 */ animation: rotate360 43200s linear infinite; } .minute { width: 7px; height: 110px; background-color: rgb(71, 248, 55); /* 给分针设置匀速转动的动画效果 */ animation: rotate360 3600s linear infinite; } .second { width: 4px; height: 130px; background-color: rgb(145, 132, 255); /* 给秒针设置60帧动画效果，1秒1帧，60s转完一圈 */ animation: rotate360 60s steps(60) infinite; } .dot { width: 22px; height: 22px; background-color: #000; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } @keyframes rotate360 { /* 起始点是0秒（原样），此处可省略动画起点from */ to { /* 避免translate被覆盖，此处可再添加translate */ transform: translate(-50%, -100%) rotate(360deg); } } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |