过渡动画
transition: all n1s n2s steps(n3);
参数1 : 参与过渡动画的属性 all 表示所有的属性都参与过渡动画
参数2 : 过渡动画的持续时间
参数3 : 动画延迟的时间
参数4 : 动画的运动曲线 默认是缓动 linear 匀速(线性变化) steps() 分步
!通过和伪类选择器的配合简单使用动画
动画剧本
@keyframes 动画名{
动画过程
}
1.form{动画开始状态}…to{动画结束状态}
2.百分比动画
!百分比代表动画时长的百分比
n1%{}
n2%{
n3%{}
…
动画过程
}
!可结合过渡动画使用
3.太极案例:
代码:
body {
background-color: #0bc;
}
.box {
width: 0px;
height: 400px;
margin: 0 auto;
margin-top: 100px;
border-left: 200px solid black;
border-right: 200px solid white;
border-radius: 50%;
box-shadow: 0px 0px 15px 0px #0fa;
position: relative;
animation: cycle 3s infinite linear;
}
.box::after {
content: '';
display: block;
width: 200px;
height: 200px;
background-color: white;
z-index: 1;
position: absolute;
left: -100px;
border-radius: 50%;
box-shadow: 0 200px 0;
}
.box::before {
content: '';
display: block;
width: 60px;
height: 60px;
background-color: black;
border-radius: 50%;
z-index: 2;
position: absolute;
left: -30px;
top: 70px;
box-shadow: 0 200px 0 0 white;
}
.box:hover {
animation-play-state: paused;
}
@keyframes cycle {
100% {
transform: rotate(360deg);
}
}
p {
text-align: center;
font-family: '楷体';
font-size: 72px;
}
.box:hover+p {
text-shadow: 1px 1px 2px white;
}