97一成人免费视频在线观看,在线观看视频亚洲天堂

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

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

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

今天就來說一個，用CSS3的屬性來做一個圖片的旋轉。

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

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

然后，我們來寫style樣式

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

  @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);}
	}
	//定義旋轉效果
	
    </style>
    
	<div class="main_wai">
        </div>

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

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

上一篇：我理解的css3中：position中的relative和absolute

下一篇：pbootcms后臺編輯器上傳視頻修改成自動播放

服務咨詢

1對1咨詢，專業(yè)客服為您解疑答惑

聯(lián)系銷售

15899750475

在線咨詢

聯(lián)系在線客服，為您解答所有的疑問

ARE YOU INTERESTED IN ?

感興趣嗎？

有關我們服務的更多信息，請聯(lián)系項目經理

15899750475 楊先生

97超碰在线播放|美女自慰免费观看|亚洲无码三四五区|日韩无码分类大全|日本美女在线99|毛片网女人免费看|亚洲国产香蕉av|久久免费看片视频|超碰在线无码一区|玖玖中文字幕在线

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