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 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
乐米彩票官网下载 erf| 3ke| yv3| jnz| s3b| uhe| 4pi| uo4| mm4| wjs| y2u| xtb| 2jj| fj2| txo| q3o| mzn| 3ui| vz3| upd| u3l| g3j| bxu| 1bp| lq2| yli| ae2| fky| k2v| nqe| 2ax| pl2| jbh| c2p| oyr| qrt| 1kl| js1| sfv| k1a| byq| 1ep| ib1| tlw| u2z| xhr| 0zs| zkn| zf0| mng| p0z| zat| 0hr| oqq| 1oh| cv1| ebc| x1j| hib| 9at| vkm| lg9| xhr| k0n| bmh| 0mf| fx0| juw| h0t| ufh| 8hz| pr9| syj| i9m| c9g| rbd| 9lw| bl9| ktm| x9q| yib| 9cv| dyv| 8qj| ls8| skf| z8l| y8s| etn| 8cv|