IT技術互動交流平台

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

作者__-北斗信号源:wy  發布日期_注册送30现金彩票:2019-01-16 08:39:00

  小編我今天對新的欄目又開始了新一輪的製作環節時間-|媚行深宫第二部,接下來我們又到網頁特效的教程欄目中來|_|请输入搜索关键字,而今天的主要內容是對純CSS3如何實現的風車轉動效果特效演示|-a型磁性材料卡,在網頁製作中特效是必不可少的部分-_|158人工计划网,它在網頁設計中啟到了很多的作用|刘玉浦简历。

  css3可以替代很多js實現的效果-|-地下城宝珠大全,其實很多時候純css3甚至可以替代圖片||1分钟开大发快三规律,直接用css3就可以畫出一些簡單的圖片-__祖峥。雖然css3畫出來的圖片效果可能不如直接用圖片的好-_爱包网,實現起來也比較複雜-||优彩彩票注册,最麻煩的是兼容性問題--|章鱼彩票如何提现,不如圖片來得直接實用_--wow致命一击。但是換一種思路去思考問題的解決辦法往往能激發我們的靈感|-王小麟,也有助於我們學習css3-_jindon京东。

網頁特效

  以下討論的是和風車 轉動 CSS3 相關的一款純CSS3實現的風車轉動效果特效演示教程文章_|-长官爱人19楼,內容是本站精心挑選整理的教程__五个人出名了,希望對廣大的網友給到幫助,下麵是詳細內容-|艾瑞泽7洛阳事故:

<!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>

    網頁特效帶給我們的不僅僅是視覺上的衝擊-|-爱玩毛线球,對我們的感官世界上都有一定的創造和建設|_英国玛格丽特公主,我們在作品上會追求不一樣的變化不一樣的超越本能|_|上海老板手机号码。希望本篇文章能夠給大家提供一定的幫助和意義-__注册返现金,感謝大家的支持和合作_|易点彩票网手机版。

延伸閱讀-_青海卫视幸福下一站:

Tag標簽-掌信彩合法吗: 風車轉動效果   網頁特效教程   css3製作  
  • 專題推薦

  • 李華明iOS-Cocos2d遊戲開發專題
  • 本教程為 李華明 編著的iOS-Cocos2d遊戲開發係列教程-||深圳都市频道节目表:教程涵蓋關於i...... 詳細
  • Directx11 遊戲編程入門教程
  • 專題主要學習DirectX的初級編程入門學習||01彩票是怎么回事,對Directx11的入門及初學者有...... 詳細
  • Windows7係統入門 優化 技巧技術專題
  • Windows7係統專題 無論是升級操作係統|-_魔兽地图大唐双龙传、資料備份_-蛊惑总裁、加強資料的安全及管...... 詳細
About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯係方式
本站內容來自於互聯網,僅供用於網絡技術學習,學習中請遵循相關法律法規
分分彩秒速牛牛大地彩票万喜彩票天空彩票98彩票

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!