css實現動態風車

時間 2019-11-10
標籤 css 實現動態風車欄目 CSS 简体版
原文原文鏈接
<!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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。