完全用css3实现的rss图标_网页布局

完全用css3实现的rss图标: 发布时间：2020-10-28编辑：脚本学堂

CSS3 实现RSS图标，不错的范例，完全用CSS来实现。注：IE下效果不行。

<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>
 
 
 
 
  
 
 
 
 
 </body>
 </html>

提示：可修改代码后再运行!

上一篇：超短jquery代码实现的鼠标滑过背景颜色改变
下一篇：基于jQuery的面板收缩与展开的特效

与完全用css3实现的rss图标有关的文章

本文标题：完全用css3实现的rss图标
本页链接：http://www.jb200.com/tx/46.html

浏览排行

栏目分类

热点文章

完全用css3实现的rss图标