zoukankan      html  css  js  c++  java
  • 太极图的制作

    代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    .yy {
    200px;
    height: 99px;
    border: 1px solid #000;
    border-bottom- 100px;
    border-radius:100px;
    position:relative;
    cursor: pointer;/*抓手*/
    transition: all 1s linear; /*过渡*/
    }
    .yy:hover{
    transform:rotate(360deg);
    }
    .yy:before {
    content: "";
    position: absolute;
    top:50px;
    left:0;
    20px;
    height: 20px;
    border:40px solid #000;
    border-radius: 50px;
    background: #fff;
    }
    .yy:after {
    content: "";
    20px;
    height: 20px;
    position: absolute;
    top: 50px;
    right: 0;
    border: 40px solid #fff;
    border-radius: 50px;
    background: #000;
    }
    </style>
    </head>
    <body>
    <div class="yy"></div>
    </body>
    </html>

    显示效果:

    (ps:会动的太极图)

  • 相关阅读:
    富文本
    frame,bounds,position,anchorPoint理解
    内存相关
    OpenGL
    Xcode 编译选项详解
    iOS 工程引用
    iOS 事件传递和消息处理
    UICollectionView用法
    数据库
    多线程
  • 原文地址:https://www.cnblogs.com/yanyanstyle/p/11426823.html
Copyright © 2011-2022 走看看