利用CSS3 动画 绘画 圆形动态时钟

  发布时间:2018-03-20 14:27:30   作者:佚名   我要评论
这篇文章主要介绍了利用CSS3 动画 绘画 圆形动态时钟的相关资料,需要的朋友可以参考下

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

 什么是动画?这是我们应该先了解的问题。按照百度百科的解释动画是采用逐帧拍摄对象并连续播放而形成运动的影像技术。不论拍摄对象是什么,只要它的拍摄方式是采用的逐格方式,观看时连续播放形成了活动影像,它就是动画。放在 CSS3 中大致可以理解为使元素从一种样式逐渐变为另一种样式,即将多个过渡效果放在一起形成的效果。CSS3 动画是通过 "关键帧",来控制动画的每一步。这里又有一个问题,什么是关键帧?我理解为定义动画执行的时间点和在该时间点上的样式是什么。

先给大家展示效果图:

 

通过 CSS3 动画绘制动态时钟的步骤

定义页面布局和样式

定义关键帧

  • 定义页面布局和样式
  • 定义关键帧
  • 调用动画实现动态效果调用动画实现动态效果

注意点

  • 在分针和秒针进行旋转时要保证是匀速旋转,即 transform-timing-function 速度曲线的值为 linear
  • 在分针和秒针进行旋转时要保证旋转原点的位置,即 transform-origin 的值要为 center、bottom(也可以利用像素和百分比进行改变)
  • 分针和秒针进行旋转的速度要区分

以下是 HTML 源码

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>clock</title>
    </head>
    <body>
        <div id="main">
            <div id="second"></div>
            <div id="minute"></div>
        </div>
    </body>
</html>

以下是 CSS3 源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
#main {
    width: 300px;
    height: 300px;
    border: 5px solid #0881A3;
    border-radius: 50%;
    margin: 50px auto 0;
    position: relative;/*定义表盘样式*/
}
#second {
    width: 5px;
    height: 120px;
    background: #393E46;
    position: absolute;
    top: 30px;
    left: 150px;
    transform-origin: center bottom;
    animation: second 60s linear infinite;/*定义秒针样式和动态效果*/
}
#minute {
    width: 10px;
    height: 80px;
    background: #40A798;
    position: absolute;
    top: 70px;
    left: 147px;
    transform-origin: center bottom;
    animation: minute 3600s linear infinite;/*定义分针样式和动态效果*/
}
@keyframes second {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}/*定义秒针过渡效果*/
@keyframes minute {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}/*定义分针过渡效果*/

总结

以上所述是小编给大家介绍的利用CSS3 动画 绘画 圆形动态时钟,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

蓄力AI

相关文章

  • 纯CSS3实现运行时钟的示例代码

    这篇文章主要介绍了纯CSS3如何实现运行的时钟,帮助大家更好的制作CSS3特效,美化网页,感兴趣的朋友可以了解下。
    2021-01-25
  • css3 利用transform打造走动的2D时钟

    这篇文章主要介绍了css3 利用transform打造走动的2D时钟,帮助大家更好的利用cSS3制作特效,美化自身网页,感兴趣的朋友可以了解下
    2020-10-20
  • css3一个简易的 LED 数字时钟实现方法

    这篇文章主要介绍了css3一个简易的 LED 数字时钟实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一
    2020-01-15
  • CSS实现漂亮的时钟动画效果的实例代码

    这篇文章主要介绍了CSS实现漂亮的时钟动画效果的实例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-29

最新评论