Demo13：div实现太极旋转

最新推荐文章于 2020-12-25 16:46:28 发布

ljl_web

最新推荐文章于 2020-12-25 16:46:28 发布

阅读量417

点赞数 2

分类专栏： HTML入门 Demo 文章标签：动画 div 太极旋转

本文链接：https://blog.csdn.net/ljl_web/article/details/50757492

版权

HTML入门同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Demo

13 篇文章 0 订阅

订阅专栏

div实现太极旋转

使用div（非canvas）实现太极旋转

使用div border相关属性绘制太极图案，结合动画功能完成旋转，如图：

代码实现

<!DOCTYPE html>
<html>
 <head>
  <title>太极</title>
  <meta charset="utf-8" />
  <style>
    body{
        background-color:#66ffff;   
    }
    #dd{
        width:500px;
        height:500px;
        padding:200px;
        position:relative;
        transform-origin:400px 400px;
        -webkit-transform-origin:400px 400px;
        animation:zhuan 10s linear infinite;
        -webkit-animation:zhuan 2s linear infinite;
    }
    @keyframes zhuan{
        from{
            transform:rotate(0deg);
        }
        to{
            transform:rotate(360deg);
        }
    }
        @-webket-keyframes zhuan{
        from{
            transform:rotate(0deg);
        }
        to{
            transform:rotate(360deg);
        }
    }
    #d1{

        width:0px;
        height:0px;
        border:200px solid #000;
        border-top-left-radius:200px;
        border-bottom-left-radius:200px;
        border-right:none;
        position:relative;
        z-index:10;

    }

    #d2{
        width:0px;
        height:0px;
        border:200px solid #fff;
        border-top-right-radius:200px;
        border-bottom-right-radius:200px;
        border-left:none;
        position:absolute;
        top:-200px;
        z-index:20;


    }
    #d3{
        width:0px;
        height:0px;
        border:100px solid #fff;
        border-radius:100px;
        position:absolute;
        top:-200px;
        z-index:30;
        left:-100px;

    }
    #d4{
        width:0px;
        height:0px;
        border:100px solid #000;
        border-radius:100px;
        position:absolute;
        top:0px;
        z-index:20;
        left:-100px;
        }
    #d5{
        width:0px;
        height:0px;
        border:25px solid #000;
        border-radius:25px;
        position:absolute;
        top:-25px;
        z-index:30;
        left:-25px;

    }
    #d6{
        width:0px;
        height:0px;
        border:25px solid #fff;
        border-radius:25px;
        position:absolute;
        top:-25px;
        z-index:30;
        left:-25px;

    }
  </style>
 <body>
  <div id="dd">
    <div id="d1">
        <div id="d2">
            <div id="d3">
                <div id="d5"></div>
            </div>
            <div id="d4">
                <div id="d6"></div>
            </div>
        </div>
    </div>
  </div>
 </body>
</html>

ljl_web

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Demo13：div实现太极旋转

div实现太极旋转使用div（非canvas）实现太极旋转使用div border相关属性绘制太极图案，结合动画功能完成旋转，如图：代码实现<!DOCTYPE html><html> <head> <title>太极</title> <meta charset="utf-8" /> <style> body{ background-color:#66fff
复制链接

扫一扫