zoukankan      html  css  js  c++  java
  • 用CSS伪类制作一个不断旋转的八卦图?

    前言

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

    代码如下:

    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{
         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;
         10px;
        height: 10px;
        content: "";
        top: 25%;
        left:0;
        border-radius: 50%;
        border: 20px black solid;
        background: white;
    }
    #yinyang:after{
        position: absolute;
         10px;
        height: 10px;
        content: "";
        top: 25%;
        right:0;
        border-radius: 50%;
        border: 20px white solid;
        background: black;
    }
  • 相关阅读:
    记一次gogs迁徙
    Spark集群模式安装
    Spark单机模式安装
    SparkSQL入门
    SparkSql API
    Spark和HBase整合
    SparkStreaming与Kafka整合
    SparkStreaming基础案例
    Spark 自定义分区及区内二次排序demo
    Sqoop安装及指令
  • 原文地址:https://www.cnblogs.com/nolaaaaa/p/8835492.html
Copyright © 2011-2022 走看看