如何实现电子时钟
###了解动画
在实现电子时钟前一定要了解动画的基础知识,这样写一个电子时钟那就是水到渠成
animation-name:;创建动画名
@keyframes:创建动画,创建关键帧
动画内部使用百分比设置关键帧,每个关键帧中都要设置一个相同的样式
@keyframes move{
0%{}动画开始的状态
100%{}动画结束状态
注意:初始状态和结束状态的属性一定要保持一致,否则,不能实现动画效果
}
animation-duration:;设置动画的持续时间,单位:秒/s
animation-timing-function:;设置动画放入速度类型
ease:默认值,逐渐减速
ease-in:加速
ease-out:减速
ease-in-out:先加速后减速
linear:匀速
animation-iteration-count:infinite;设置动画的次数,默认值为none
值:number,添加次数
infinite:无限次
none:默认只执行一次
animation-direction:设置动画的运动方向
normal:默认值,正常方向。
reverse:反方向
注意:以下两个值动画循环次数要多次才有效。
alternate:动画先正常方向运动,再反方向运动
alternate-reverse:动画先反方向运动,再正常方向运动
animation-fill-mode:forwards;保持动画结束的状态。
animation-delay:2s;设置动画的延迟执行时间。
animation-play-state:;动画的执行控件
running:播放动画
paused:暂停动画
animation:fc 2s linear infinite;
animation:动画名,动画持续时间,动画的速度类型,动画的次数
animation和transition的区别
animation属性类似于transition,都属于随着时间改变元素的属性值。
其主要的区别在于:transition需要触发一个时间才会随着时间而改变css属性。
animation在不需要触发事件的情况下,也会随着时间而改变css样式。
1.动画不需要事件触发,过渡需要。
2.过渡只有一组:开始的状态和结束的状态。
关键帧动画:可以设置每一帧的动画状态,一般用于复杂的动画效果。
实现电子时钟的过程
写电子时钟的基本结构
<main>
<div class="hour"><span></span></div>
<div class="minute"><span></span></div>
<div class="second"><span></span></div>
<div class="point"></div>
</main>
写电子时钟的基本结构
body{
margin: 0;
overflow: hidden;
}
main{
width: 800px;
height: 800px;
margin: 0 auto;
background-image: url('images/clock.jpg');
background-size: 100% 100%;
background-position: 50% 50%;
position: relative;
}
.hour{
width: 10px;
height: 400px;
position: absolute;
top: calc(50% - 200px);
left: calc(50% - 5px);
animation-name: rotates;
animation-duration: 43200s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.hour>span{
display: inline-block;
width: 10px;
height: 220px;
background-color:red;
border-radius: 5px;
z-index: -999;
}
.minute{
width: 6px;
height: 500px;
position: absolute;
top: calc(50% - 250px);
left: calc(50% - 3px);
animation-name: rotates;
animation-duration: 3600s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.minute>span{
display: inline-block;
width: 6px;
height: 280px;
background-color:green;
border-radius: 3px;
z-index: -999;
}
.second{
width: 3px;
height: 600px;
position: absolute;
top: calc(50% - 300px);
left: calc(50% - 1.5px);
animation-name: rotates;
animation-duration: 60s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.second>span{
display: inline-block;
width: 3px;
height: 340px;
background-color:blue;
border-radius: 1.5px;
z-index: -999;
}
.point{
width: 30px;
height: 30px;
background-color: #000;
border-radius: 50%;
position: absolute;
/* calc动态计算可以计算不同单位的值 */
top: calc(50% - 15px);
left:calc(50% - 15px);
}
@keyframes rotates {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
这边我用的是背景图片,当然有兴趣也可以自己写一个
这是完成后的效果