纯CSS实现网页图标，RSS订阅图标的CSS3代码

发布时间：2018-08-13 11:47:27 所属栏目：访谈来源：站长网

导读：网页图标对于站长们来说，是再熟悉不过的东西了，大家都知道那是图像，那么您有没有见过使用纯CSS生成的网页图标呢？今天烈火网就给大家发一款由CSS3技术实现的 RSS订阅图标代码，注意哦在 IE9 以下浏览器兼容性不好。请使用IE9+、 Chrome 、火狐和 Opera

　　网页图标对于站长们来说，是再熟悉不过的东西了，大家都知道那是图像，那么您有没有见过使用纯CSS生成的网页图标呢？今天烈火网就给大家发一款由CSS3技术实现的RSS订阅图标代码，注意哦在IE9以下浏览器兼容性不好。请使用IE9+、Chrome、火狐和Opera等浏览器，还有响应鼠标的颜色变换效果呢！

　　演示：

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 实现RSS图标</title> <style type='text/css'> body{ padding:50px 0 0 0 } span.feed-box{ display:block; width:100px; height:100px; margin:0 auto; background:#F9A004; box-shadow: 1px 1px 0 #C27C03, 2px 2px 0 #C27C03, 3px 3px 0 #C27C03; -moz-box-shadow: 1px 1px 0 #C27C03, 2px 2px 0 #C27C03, 3px 3px 0 #C27C03; -webkit-box-shadow: 1px 1px 0 #C27C03, 2px 2px 0 #C27C03, 3px 3px 0 #C27C03; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px } span.feed-box *{ float:right; display:block } span.feed-box .feed-box-in{ border:2px solid #FFC563; width:92px; height:92px; margin:2px 2px 0 0; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; overflow:hidden } span.feed-box .feed-box-in .feed-quarter-circle-big{ margin:8px 8px 0 0; width:130px; height:130px; border:13px solid #FFDEA5; border-radius:50% } span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small{ margin:9px 9px 0 0; width:88px; height:88px; border:12px solid #FFDEA5; border-radius:50% } span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle{ margin:13px 13px 0 0; background:#FFDEA5; width:35px; height:35px; border-radius:50% } span.feed-box:hover{ background:#07C103; box-shadow: 1px 1px 0 #058E02, 2px 2px 0 #058E02, 3px 3px 0 #058E02; -moz-box-shadow: 1px 1px 0 #058E02, 2px 2px 0 #058E02, 3px 3px 0 #058E02; -webkit-box-shadow: 1px 1px 0 #058E02, 2px 2px 0 #058E02, 3px 3px 0 #058E02 } span.feed-box:hover .feed-box-in{ border-color:#58FC55 } span.feed-box:hover .feed-box-in .feed-quarter-circle-big, span.feed-box:hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small{ border-color:#B9FFB7 } span.feed-box:hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle{ background:#B9FFB7 } </style> </head> <body> <span class='feed-box'> <span class='feed-box-in'> <span class='feed-quarter-circle-big'> <span class='feed-quarter-circle-small'> <span class='feed-circle'> </span> </span> </span> </span> </span> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!