IT技術互動交(jiao)流平台

河北快3官网

作者︰wy  發布日(ri)期(qi)︰2020-02-19 09:12:00

  小(xiao)編我今天對新的欄目又開始了新一輪的制(zhi)作環fang)謔奔洌 酉呂次(ci)頤men)又到網頁特(te)效的教程欄目中來,而今天的主要內(na)容(rong)是對純CSS3如何實(shi)現的風車轉動效果特(te)效演示,在網頁制(zhi)作中特(te)效是必不可少的部分(fen),它在網頁設(she)計中啟到了很多的作用。

  css3可以替代(dai)很多js實(shi)現的效果,其實(shi)很多時候純css3甚至可以替代(dai)圖片,直接用css3就(jiu)可以畫出一些簡單(dan)的圖片。雖然(ran)css3畫出來的圖片效果可能不如直接用圖片的好,實(shi)現zhi)鵠匆脖冉細(xi)叢櫻 盥櫸車氖羌嬡rong)性問題,不如圖片來得直接實(shi)用。但(dan)是換一種思路去思考問題的解決辦法往往能激(ji)發我們(men)的靈(ling)感(gan),也有助(zhu)于我們(men)學習(xi)css3。

網頁特(te)效

  以下討論(lun)的是和(he)風車 轉動 CSS3 相關的一款純CSS3實(shi)現的風車轉動效果特(te)效演示教程文章,內(na)容(rong)是本站(zhan)精心挑選(xuan)整理的教程,希望對廣大的網友(you)給到幫助(zhu),下面是詳細(xi)內(na)容(rong)︰

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>純CSS實(shi)現的風車轉動效果特(te)效演示</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實(shi)現的風車效果(把鼠標放在圓點上試試)</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>

    網頁特(te)效帶(dai)給我們(men)的不僅僅是視(shi)覺上的沖擊,對我們(men)的感(gan)官(guan)世界上都有一定的創造和(he)建設(she),我們(men)在作品上會追求不一樣的變化不一樣的超(chao)越本能。希望本篇(pian)文章能夠給大家提供一定的幫助(zhu)和(he)意義(yi),感(gan)謝大家ye)鬧?趾he)合作。

河北快3官网

    • 河北快3官网

    About IT165 - 廣告服務 - 隱私聲(sheng)明 - 版(ban)權申(shen)明 - 免責條款 - 網站(zhan)地圖 - 網友(you)投稿 - 聯(lian)系方(fang)式(shi)
    本站(zhan)內(na)容(rong)來自于互聯(lian)網,僅供用于網絡技術學習(xi),學習(xi)中請遵循相關法律法規(gui)
    河北快3官网 | 下一页