zoukankan      html  css  js  c++  java
  • 如何用css实现太极图

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>太极图</title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    body{
    background-color: #ddd;
    }
    .boxs{
    display: flex;
    align-items: center;
    200px;
    height: 200px;
    margin: 100px auto;
    /* 从上往下各占50%由黑变白的一个过程! */
    background: linear-gradient(#000 50%,#fff 50%);
    border-radius: 50%

    }
    /* 接下来用css3伪对象选择符创建内部的两个小圆形,由于<i>标签是弹性布局,
    并且设置了align-items:center属性,所以创建的内部元素垂直居中: */
    .boxs::before,.boxs::after{
    content:"";
    display: block;
    50%;
    height: 50%;
    border-radius: 50%;
    background: rgb(11, 189, 165);
    }
    .boxs::before{
    background:radial-gradient(#fff 25%, #000 25%);
    transform-origin: 0% 50%;
    animation-name: move;

    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    }
    .boxs::after{
    background:radial-gradient(#000 25%, #fff 25%);
    transform-origin: 100% 50%;
    animation-name: move;

    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: -1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    }
    /* 使用关键帧(@keyframes)和动画属性animation:
    创建动画,从原始大小0.7倍变化到1.3倍: */
    @keyframes move{
    from{
    transform: scale(0.7);
    }
    to{
    transform:scale(1.3);
    }
    }

    </style>
    </head>
    <body>
    <i class="boxs"></i>
    </body>
    </html>

  • 相关阅读:
    SAP Easy tree
    SAP Column tree
    SAP Tree
    SAP 文本框多行输入
    SAP -SE30 程序运行时间分析
    SAP 实例- 页签tabsrip
    ABAP CDS
    ABAP CDS
    ABAP CDS
    ABAP CDS
  • 原文地址:https://www.cnblogs.com/robot666/p/11236219.html
Copyright © 2011-2022 走看看