用CSS伪类制作一个不断旋转的八卦图?

2018-06-24 02:21:48来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

前言

介绍一下如何制作一个不断旋转的八卦图。快速预览代码及效果,点击:八卦图

代码如下:

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;
}

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:复习HTML+CSS(3)

下一篇:css3 flex 布局