超炫css3-rotate環(huán)形旋轉(zhuǎn)特效有科技感

2024-09-05 12:19:11

字體：大中小

供稿：網(wǎng)友

有很強科技感的css3-rotate藍色光環(huán)旋轉(zhuǎn)特效，只用了一張PNG透明圖片實現(xiàn)的效果，CSS3的圖像處理能力非常強大，這是個不錯的參考資料。當(dāng)然JavaScript也起到了重要作用，在火狐瀏覽器下測試效果更好，不支持ie。

<!doctype html><html><head><meta charset="utf-8"><title>css3-rotate環(huán)形旋轉(zhuǎn)特效網(wǎng)頁摘星分享</title><style>* {padding:0; margin:0;}body {background:#000;}img {border:none;}li {list-style:none;}a { text-decoration:none;}#div1 {width:100px; height:100px; position:absolute; left:60%; top:50%; margin: -200px;}#div1 img {position: absolute; left: 0; top: 0;}</style><script>window.onload=function (){	var oDiv=document.getElementById('div1');	var aImg=oDiv.children;	for(var i=0; i</head><body><div   class="iwvjtn8m0"   id="div1">	<img src="/d/file/p/2024/09-05/a06ca30162d8910785976166c8366994.png">	<img src="/d/file/p/2024/09-05/a06ca30162d8910785976166c8366994.png">	<img src="/d/file/p/2024/09-05/a06ca30162d8910785976166c8366994.png">	<img src="/d/file/p/2024/09-05/a06ca30162d8910785976166c8366994.png">	<img src="/d/file/p/2024/09-05/a06ca30162d8910785976166c8366994.png">	<img src="/d/file/p/2024/09-05/a06ca30162d8910785976166c8366994.png">	<img src="/d/file/p/2024/09-05/a06ca30162d8910785976166c8366994.png">	<img src="/d/file/p/2024/09-05/a06ca30162d8910785976166c8366994.png">	<img src="/d/file/p/2024/09-05/a06ca30162d8910785976166c8366994.png">	<img src="/d/file/p/2024/09-05/a06ca30162d8910785976166c8366994.png">	<img src="/d/file/p/2024/09-05/a06ca30162d8910785976166c8366994.png"></div><div style="text-align:center;clear:both"></div></body></html>

上一篇：HTML5仿android手機下滑菜單效果

下一篇：圖片瀑布流布局 HTml5 jquery代碼