定义一个id为taiji的 div
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/taiji.css">
<title>Document</title>
</head>
<body>
<div id="taiji"></div>
<p>道生一，一生二，二生三，三生万物</p>
</body>
</html>
body{
background-color:#666
}
@keyframes spin{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
#taiji{
width:200px;
height:200px;
border-radius:50%;
background: linear-gradient(to bottom, #fff 0%,#fff 50%,#000 50%,#000 100%);
position: relative;
margin: 100px auto 20px;
animation: spin 3s linear 0s infinite;
}
/*
animation定义和用法
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
默认值： none 0 ease 0 1 normal
注意！！！：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
语法
animation: name duration timing-function delay iteration-count direction;
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。（值：n次，infinite无限循环）
animation-direction 规定是否应该轮流反向播放动画。
animation-timing-function 的值：
linear 动画从头到尾的速度是相同的。 测试
ease 默认。动画以低速开始，然后加快，在结束前变慢。 测试
ease-in 动画以低速开始。 测试
ease-out 动画以低速结束。 测试
ease-in-out 动画以低速开始和结束。 测试
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
总结：
根据上述属性，只需要根据具体情况设置animation-delay和animation-iteration-count即可。
例如：
div
{
animation:mymove 5s 5s infinite;
-webkit-animation:mymove 5s 5s infinite; /* Safari 和 Chrome */
#taiji::before{ /*利用元素的伪类特性*/
content: ''; /* 很重要！！！ 伪类默认不出现，必须给一个content才可以出现 */
width: 20px;
height: 20px;
border-radius: 50%;
background: #FFF;
position: absolute; /*套路:!!! 绝对定位后自动变为block */
top: 50px;
left: 0;
border: 40px solid #000; /*这里也可以用渐变，也可以用描边*/
}
#taiji::after{ /*利用元素的伪类特性*/
content: ''; /* 很重要！！！ 伪类默认不出现，必须给一个content才可以出现 */
width: 20px;
height: 20px;
border-radius: 50%;
background: #000;
position: absolute; /*套路:!!! 绝对定位后自动变为block */
top: 50px;
right: 0;
border: 40px solid #FFF;
}
p{
color: white;
text-align: center;
}
网友评论