久久久wwwcom,婷婷五月丁香网络色色

用CSS寫一個背景動態(tài)旋轉(zhuǎn)的效果

時間：2019-10-18 訪問量：0

有時候，我們在做網(wǎng)站的時候，需要一個動態(tài)的旋轉(zhuǎn)圖片，但是又不想做成GIF格式，因為太大了。那么在網(wǎng)站建設中，還有什么方法來實現(xiàn)呢？

今天就來說一個，用CSS3的屬性來做一個圖片的旋轉(zhuǎn)。

手先，我們先寫一個DIV，并給他一個CSS樣式

<div class="xuanzhuan"></div>

然后，我們來寫style樣式

 <style>
    .xuanzhuan {
    width: 416px;
    height: 418px;
    background-size: 416px 418px;  //設置DIV的寬，高，背景的寬高 
    background: url(bg.png) no-repeat;  //這里是要旋轉(zhuǎn)的背景圖片  
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    animation: roate 15s infinite linear; //這是重點，給它一個旋轉(zhuǎn)的屬性
}

  @keyframes roate{
	0%{ transform:rotateZ(0);-ms-transform:rotateZ(0);-moz-transform:rotateZ(0);-webkit-transform:rotateZ(0);-o-transform:rotateZ(0); }
	100%{ transform:rotateZ(360deg);-ms-transform:rotateZ(360deg);-moz-transform:rotateZ(360deg);-webkit-transform:rotateZ(360deg);-o-transform:rotateZ(360deg);}
	}
	//定義旋轉(zhuǎn)效果
	
    </style>
    
	<div class="main_wai">
        </div>

醉后找一張需要的背景圖。放在一起，效果就實現(xiàn)了。

佐岸視覺，深圳專業(yè)的網(wǎng)站建設公司原創(chuàng)。

亚洲青青视频一区|8MAV在线观看|天天看AV天天看|中日成人手机在线|欧美激情五区六区|亚洲婷婷天堂级片|亚洲天堂网7777|欧美日韩其他另类|手机在线成人AV|成人性大片一区二区三区四区五区

用CSS寫一個背景動態(tài)旋轉(zhuǎn)的效果