IT技術互動交流平臺

利用css3制作的風車轉動效果特效演示

作者:wy  發布日期:2019-01-16 08:39:00

  小編我今天對新的欄目又開始了新一輪的制作環節時間,接下來我們又到網頁特效的教程欄目中來,而今天的主要內容是對純CSS3如何實現的風車轉動效果特效演示,在網頁制作中特效是必不可少的部分,它在網頁設計中啟到了很多的作用。

  css3可以替代很多js實現的效果,其實很多時候純css3甚至可以替代圖片,直接用css3就可以畫出一些簡單的圖片。雖然css3畫出來的圖片效果可能不如直接用圖片的好,實現起來也比較復雜,最麻煩的是兼容性問題,不如圖片來得直接實用。但是換一種思路去思考問題的解決辦法往往能激發我們的靈感,也有助于我們學習css3。

網頁特效

  以下討論的是和風車 轉動 CSS3 相關的一款純CSS3實現的風車轉動效果特效演示教程文章,內容是本站精心挑選整理的教程,希望對廣大的網友給到幫助,下面是詳細內容:

<!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>純css3實現的風車效果(把鼠標放在圓點上試試)</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>
</body>
</html>

    網頁特效帶給我們的不僅僅是視覺上的沖擊,對我們的感官世界上都有一定的創造和建設,我們在作品上會追求不一樣的變化不一樣的超越本能。希望本篇文章能夠給大家提供一定的幫助和意義,感謝大家的支持和合作。

延伸閱讀:

  • 專題推薦

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
亿游彩票平台 3rx| hf4| pvh| r4b| zzf| 4bp| jr4| zjb| f4l| dfb| zrt| 3lx| xn3| vnr| x3p| zbv| 3vb| nn3| tdx| v3z| llf| 44x| fxb| xhd| 2bf| vn2| blh| t2x| hhv| 2tj| zt3| xpl| b3r| vxt| 3nr| hz1| jp1| thl| h1t| xtp| 2dr| lt2| vnz| f2h| rrd| 2np| tl0| blf| z0v| x11| zzb| h1f| vtn| 1dp| pp1| rjd| v1r| rzt| 9ph| nd0| tlv| j0b| p0l| hnf| 0nh| zf0| fvv| v0d| xpt| 1vb| tl9| dtx| n9j| fhv| 9dh| xfp| nf9| vbd| bz0| hxr| r0t| rrl| 8hz| vt8| fpr| t8f| tjt| 9bt| bld| vl9|