欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

怎么制作一个不断旋转的八卦图?

程序员文章站 2022-04-12 19:51:04
前言 介绍一下如何制作一个不断旋转的八卦图。快速预览代码及效果,点击:八卦图 代码如下: ......

前言

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

代码如下:

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