<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'>&nbsp;</span><!-- #circle -->

</span><!-- #feed-quarter-circle-small -->

</span><!-- #feed-quarter-circle-big -->

</span><!-- #feed-box-in -->

</span><!-- #feed-box -->

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

</body>

</html>

CSS3 实现RSS图标的更多相关文章

  1. 纯css3手机页面图标样式代码

    全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...

  2. 用css3实现各种图标效果

    原文:用css3实现各种图标效果 公共样式 应该说现在绝大多数公司的项目前端都是一团乱,不仅仅是js写的没有任何框架而言,css同样也是如此,导致项目如果要升级或者说有新的变更维护起来就特别困难. 最 ...

  3. 修改源码去除zblog博客分类目录的RSS图标

    zblog博客的所建立的分类默认前面是有一个RSS图标的,如下图所示: 其实这个图标的存在并不能起到太大的美化作用,增加用户订阅数量的作用.那么应该如何去掉这个RSS图标呢? 这个RSS图标的生成在z ...

  4. CSS学习笔记----CSS3自定义字体图标

    响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...

  5. 通过SVG与CSS3实现向上图标

    需求 H5活动页需要用的图标很少,暂时没有使用iconfont的必要性,而通过图片的话额外增加UI的工作量以及增加请求数,前端也有很多实现简单图标的方法,所以就尝试自己去解决,写一个"返回顶 ...

  6. 用css3实现各种图标效果（2）

    写在前面 写的一模一样的css样式,结果却导致原来出来不一样的效果图. 用chrome的开发者工具查看,比较起来还是一模一样的css样式,可为什么会出现不一样的placeholder效果呢?一个白色粗 ...

  7. 用css3实现各种图标效果（1）

    公共样式 应该说现在绝大多数公司的项目前端都是一团乱,不仅仅是js写的没有任何框架而言,css同样也是如此,导致项目如果要升级或者说有新的变更维护起来就特别困难. 最近领导决定花大时间整理一下css样 ...

  8. css3简易实现图标动画由小到大逐个显现

    在制作网站时避免图片太平淡经常会用到动画效果:由小到大跳跃出现.这种效果很有视觉冲击力,显著提高关注度~ 原理:利用css3的动画属性@keyframes@-moz-keyframes@-webkit ...

  9. 利用纯粹的CSS3替代小图标---向右箭头

    1.向右的箭头>  . 看到很多网站里面向右的箭头都是图片代替的,但是为了网站的性能,我们一般的原则是能够避免使用图片的尽量不用图片   比如看下携程个人中心首页面,向右的箭头 其实现思路是这样 ...

随机推荐

  1. [agc016d]xor replace

    题意: 题解: 棒棒的神仙题...这题只是D题???(myh:看题五分钟,讨论两小时) 首先这个异或和是假的,比如我现在有$a=(a_1,a_2,a_3,a_4)$,操作一下$a_2$,就变成了$a= ...

  2. css 遮照镂空效果

    实现这个效果有以下几种方式.(欢迎指出不足之处!!!)  一:最简单最粗暴的方法!截图! 实现原理:先截一张图片,然后写一个遮罩层,再把图片放上去就可以了! 过程过于简单,就别写代码跟截图效果了! 优 ...

  3. [USACO10FEB]吃巧克力Chocolate Eating

    题目:洛谷P2985. 题目大意:有n块巧克力要吃d天,并且只能按顺序吃.一块巧克力有一个开心值,吃了就能增加开心值.一个人初始开心值为0,且每天早上开心值变为原来的一半.问如何吃巧克力才能使开心值最 ...

  4. Aspose WorkbookDesigner打开文件异常"Error xml namespace"

    错误描述: 平台是VS2010的.Net Framework 需要用Aspose的WorkbookDesigner打开excel文件的时候产生异常 异常码是Aspose.Cells.Exception ...

  5. 紫书 例题8-12 UVa 12627 （找规律 + 递归）

    紫书上有很明显的笔误, 公式写错了.g(k, i)的那个公式应该加上c(k-1)而不是c(k).如果加上c(k-1)那就是这一次 所有的红气球的数目, 肯定大于最下面i行的红气球数 我用的是f的公式, ...

  6. C/C++ ShellExecuteEx调用exe可执行文件

    本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/49591995 以商业的软件Enblen ...

  7. HTTP cookies 详解

    http://blog.csdn.net/lijing198997/article/details/9378047

  8. [ML] Daily Portfolio Statistics

    Let's you have $10000, and you inverst 4 stocks. ['SPY', 'IBM', 'XOM', 'GOOG']. The allocation is [0 ...

  9. less02-变量

    html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  10. 集群环境下，Session管理的几种手段

    集群环境下,Session管理的几种手段 1.Session复制 缺点:集群服务器间需要大量的通信进行Session复制,占用服务器和网络的大量资源. 由于所有用户的Session信息在每台服务器上都 ...