Loading... [一个很酷的CSS3效果][1] ---------- ---------- <style> img{border:0;} .ul_radius{width:310px; padding:0; margin:50px auto 50px;} .ul_radius li{ width:64px; height:64px; padding:8px; background:#FFF; box-shadow:1px 1px 10px -2px #666; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; float:left; list-style:none; margin:0 20px 20px 0;} .ul_radius li:hover{ border-radius:18px; } .ul_radius li:hover img{ border-radius:13px; } .ul_rotate{width:310px; padding:0; margin:50px auto;} .ul_rotate li{ width:64px; height:64px; padding:8px; background:#FFF; -webkit-box-shadow:1px 1px 10px -2px #666; -moz-box-shadow:1px 1px 10px -2px #666; -o-box-shadow:1px 1px 10px -2px #666; box-shadow:1px 1px 10px -2px #666; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; float:left; list-style:none; margin:0 20px 20px 0;} .ul_rotate li:hover{ -webkit-radius:18px; -moz-radius:18px; -o-radius:18px; transform:18px; border-radius:18px; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); } .ul_rotate li:hover img{ border-radius:13px; } .test-cat-border{width:850px; padding:0; margin:0 auto;} .test-cat-border li{width:150px; float:left; margin:0 20px 20px 0; list-style:none;} .test-cat-border li a{width:150px; height:150px; display:block; position:relative;} .test-cat-border li a img{width:150px; height:150px; border:0;} .test-cat-border li a span{position:absolute; left:0; top:0; right:0; bottom:0; border:0 solid #999; display:inline-block; visibility:hidden; opacity:0; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .test-cat-border li a:hover span{visibility:visible; border:10px solid #FF6600; opacity:1;} [1]: http://wmicheng.top/usr/themes/joe/assets/html/%E4%B8%80%E4%B8%AA%E5%BE%88%E9%85%B7%E7%9A%84css3%E6%A0%B7%E5%BC%8F/css3.html 最后修改：2020 年 10 月 23 日 © 允许规范转载 打赏 赞赏作者 赞 如果觉得我的文章对你有用，请随意赞赏