css实现动态风车

最新推荐文章于 2024-07-10 23:54:36 发布

weixin_33843947

最新推荐文章于 2024-07-10 23:54:36 发布

阅读量90

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2255569/blog/408035

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
  
     .main{
        position: relative;
        }
        .main:hover{
            
        }
    @-webkit-keyframes dh{
        0%{transform: rotate(0deg);}
        100%{transform: rotate(360deg);}
    }
    @-webkit-keyframes dh1{
        0%{transform: rotate(180deg);}
        50%{transform: rotate(360deg);}
        100%{transform: rotate(540deg);}
    }
    @-webkit-keyframes dh2{
        0%{transform: rotate(90deg);}
        100%{transform: rotate(450deg);}
    }
   @-webkit-keyframes dh3{
        0%{transform: rotate(270deg);}
        100%{transform: rotate(630deg);}
    }
    #boder_arrow{
        border-width:100px 100px 120px 160px;
        border-color:#f3ff66 #fff #fff #fff;
        border-style:solid;
        width:0px;
        height:0px;
        position: absolute;
        top: 250px;
        left: 10px;
       -webkit-animation: dh 2.5s linear infinite;
        transform-origin: right top;
    }
  #boder_arrow2{
        border-width:100px 100px 120px 160px;
        border-color:#32dd60 #fff #fff #fff;
        border-style:solid;
        width:0px;
        height:0px;
        transform: rotate(180deg);
        position: absolute;
        top: 250px;
        left: 11px;
       -webkit-animation: dh1 2.5s linear infinite;
        transform-origin:right top;
      
    }
    #boder_arrow3{
        border-width:100px 100px 120px 160px;
        border-color:#f5c7d6 #fff #fff #fff;
        border-style:solid;
        width:0px;
        height:0px;
        transform: rotate(90deg);
        position: absolute;
        top: 248px;
        left: 10px;
        -webkit-animation: dh2 2.5s linear infinite;
        transform-origin:right top;
    }
    #boder_arrow4{
        border-width:100px 100px 120px 160px;
        border-color:#66f9ff #fff #fff #fff;
        border-style:solid;
        width:0px;
        height:0px;
        transform: rotate(270deg);
        position: absolute;
        top: 250px;
        left: 10px;
        -webkit-animation: dh3 2.5s linear infinite;
        transform-origin:right top;
    }
    </style>
    </head>
<body>
   <div class="main">
    <div id="boder_arrow"></div>
    <div id="boder_arrow2"></div>
    <div id="boder_arrow3"></div>
    <div id="boder_arrow4"></div>
    </div>
</body>
</html>

转载于:https://my.oschina.net/u/2255569/blog/408035