超炫css3-rotate环形旋转特效有科技感

2024-09-05 12:19:11

字体：大中小

来源：转载

供稿：网友

有很强科技感的css3-rotate蓝色光环旋转特效，只用了一张PNG透明图片实现的效果，CSS3的图像处理能力非常强大，这是个不错的参考资料。当然JavaScript也起到了重要作用，在火狐浏览器下测试效果更好，不支持ie。

<!doctype html><html><head><meta charset="utf-8"><title>css3-rotate环形旋转特效网页摘星分享</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 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代码