怎么制作一个不断旋转的八卦图？
程序员文章站
2022-06-24 15:10:14
前言 介绍一下如何制作一个不断旋转的八卦图。快速预览代码及效果，点击：八卦图 代码如下： ......
前言
介绍一下如何制作一个不断旋转的八卦图。快速预览代码及效果，点击：八卦图
代码如下：
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="yinyang"></div>
</body>
</html>
CSS部分
body{
background: #444444;
}
@keyframes spin{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
#yinyang{
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
margin: 100px auto;
background: linear-gradient(to bottom,#ffff 0%,#ffff 50%,#000000 50%,#000000 100%);
animation-duration: 3s;
/*animation-duration属性指定一个动画周期的时长。默认值为0s，表示无动画。*/
animation-name: spin;
animation-iteration-count: infinite; /*infinite 无限循环播放动画.*/
/*animation-iteration-count CSS 属性 定义动画在结束前运行的次数 可以是1次 无限循环.*/
animation-timing-function:linear;
/*CSS animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。*/
}
#yinyang:before{
position: absolute;
width: 10px;
height: 10px;
content: "";
top: 25%;
left:0;
border-radius: 50%;
border: 20px black solid;
background: white;
}
#yinyang:after{
position: absolute;
width: 10px;
height: 10px;
content: "";
top: 25%;
right:0;
border-radius: 50%;
border: 20px white solid;
background: black;
}