css风车

来源：互联网发布：java split返回值接收编辑：程序博客网时间：2024/04/19 17:16
<!DOCTYPE html><html><head>   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   <title>CSS实现的风车转动</title>   <style>      body{         background:#a5cad6;      }      h1{         display:block;         margin:50px auto;         width: 300px;         text-align:center;         font-size:12px;      }      footer {         font:14px/1.3 'Microsoft YaHei';         color: #000;         font-size: 15px;         line-height: 1.6;         padding: 60px 20px 0;         text-align: center;         display: block;      }      footer a{         color:#000;         text-decoration:none;      }      footer a:hover{         text-decoration:underline;      }      @-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}      @-moz-keyframes rotate{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}      @-o-keyframes rotate{from{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}      @keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}      @-webkit-keyframes rotate2{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}      @-moz-keyframes rotate2{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}      @-o-keyframes rotate2{from{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}      @keyframes rotate2{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}      .windmill2 {         display:block;         position: relative;         margin:50px auto;         width: 100px;         height: 120px;      }      .windmill2 .pillar{         position:absolute;         top:8px;         left:44px;         display: block;         height: 0;         width: 4px;         border-width: 0 4px 80px 4px;         border-style: none solid solid;         border-color: transparent transparent white;      }      .windmill2 .axis{         position:absolute;         top:0px;         left:46px;         width:4px;         height:4px;         border:3px #fff solid;         background:#a5cad6;         border-radius:5px;         z-index: 88;         -webkit-transition-property: -webkit-transform;         -webkit-transition-duration: 1s;         -moz-transition-property: -moz-transform;         -moz-transition-duration: 1s;         -webkit-animation: rotate 4s linear infinite;         -moz-animation: rotate 4s linear infinite;         -o-animation: rotate 4s linear infinite;         animation: rotate 4s linear infinite;      }      .windmill2 .swing{         position:absolute;         top:1px;         left:-2px;         display: block;         height: 0;         width: 2px;         border-width: 50px 2px 0px 2px;         border-style: solid solid none;         border-color: white transparent transparent ;         box-shadow: 1px 1px 1px rgba(105, 97, 97, 0.1);         -webkit-transform-origin:0px 0px;         -webkit-transform:rotate(60deg);         -moz-transform-origin:0px 0px;         -moz-transform:rotate(60deg);         -ms-transform-origin:0px 0px;         -ms-transform:rotate(60deg);         -o-transform-origin:0px 0px;         -o-transform:rotate(60deg);         transform-origin:0px 0px;         transform:rotate(60deg);      }      .windmill2 .swing2{         position:absolute;         top:0px;         left:4.5px;         display: block;         height: 0;         width: 2px;         border-width: 50px 2px 0px 2px;         border-style: solid solid none;         border-color: white transparent transparent ;         -webkit-transform-origin:0px 0px;         -webkit-transform:rotate(180deg);         -moz-transform-origin:0px 0px;         -moz-transform:rotate(180deg);         -ms-transform-origin:0px 0px;         -ms-transform:rotate(180deg);         -o-transform-origin:0px 0px;         -o-transform:rotate(180deg);         transform-origin:0px 0px;         transform:rotate(180deg);      }      .windmill2 .swing3{         position:absolute;         top:6px;         left:3px;         display: block;         height: 0;         width: 2px;         border-width: 50px 2px 0px 2px;         border-style: solid solid none;         border-color: white transparent transparent ;         -webkit-transform-origin:0px 0px;         -webkit-transform:rotate(300deg);         -moz-transform-origin:0px 0px;         -moz-transform:rotate(300deg);         -ms-transform-origin:0px 0px;         -ms-transform:rotate(300deg);         -o-transform-origin:0px 0px;         -o-transform:rotate(300deg);         transform-origin:0px 0px;         transform:rotate(300deg);      }      .windmill2 .axis:hover {         -webkit-animation: rotate2 .3s linear infinite;         -moz-animation: rotate2 .3s linear infinite;         -o-animation: rotate2 .3s linear infinite;         animation: rotate2 .3s linear infinite;      }   </style></head><body><h1>(把鼠标放在圆点上试试)</h1>         <span class="windmill2">         <span class="pillar"></span>         <span class="axis">         <span class="swing"></span>         <span class="swing2"></span>         <span class="swing3"></span>         </span>         </span><footer>vis 网上</footer></body></html>
阅读全文
1 0