zoukankan      html  css  js  c++  java
  • div+伪元素实现太极图

    需求:使用div和伪元素实现阴阳太极图

    图例:

    代码:

    <html>
    <head>
        <title>太极图</title>
        <style type="text/css">
        div{
             200px;
            height: 100px;
            background-color: #ffffff;
            border-style: solid;
            border-color: #000;
            border-bottom- 100px;
            border-radius: 50%;
            position: relative;
                /*旋转动画*/
            -webkit-animation: animal 4s infinite linear ;
            -webkit-transform-origin: center center;
            -ms-transform-origin: center center;
            transform-origin: center center;
        }
        div::before{
            content: '';
            position: absolute;
             20px;
            height: 20px;
            border: 40px solid #000000;
            top: 50%;
            left: 0;
            border-radius: 50px;
            background: #ffffff;
        }
        div::after{
            content: '';
            position: absolute;
             20px;
            height: 20px;
            border: 40px solid #ffffff;
            top: 50%;
            right: 0;
            border-radius: 50px;
            background: #000000;
        }
      /*旋转动画*/ @
    -webkit-keyframes animal { 0%{ transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100%{ transform: rotate(-360deg); -ms-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } } </style> </head> <body>
    <!-- 容器 --> <div></div> </body> </html>
  • 相关阅读:
    PAT 1018. 锤子剪刀布
    PAT 1017. A除以B
    PAT 1016. 部分A+B
    PAT 1015. 德才论
    PAT 1014. 福尔摩斯的约会
    PAT 1013. 数素数
    PAT 1012. 数字分类
    PAT 1011. A+B和C
    292. Nim Game
    412. Fizz Buzz
  • 原文地址:https://www.cnblogs.com/min77/p/14329006.html
Copyright © 2011-2022 走看看