html 风车特效,一款纯CSS3实现的风车转动效果特效演示

风车特效,一款纯CSS3实现的风车转动效果特效演示"/>

html 风车特效,一款纯CSS3实现的风车转动效果特效演示

阿里西西 纯CSS实现的风车转动效果特效演示

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;

}

纯css3实现的风车效果(把鼠标放在圆点上试试)

Tutorial by js特效网 ©2018