<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. 洛谷 P1462 通往奥格瑞玛的道路 二分 最短路

    #include<cstdio> #include<queue> #include<cstring> #include<algorithm> using ...

  2. Session与Token认证机制 前后端分离下如何登录

     字号 1 Web登录涉及到知识点 1.1 HTTP无状态性 HTTP是无状态的,一次请求结束,连接断开,下次服务器再收到请求,它就不知道这个请求是哪个用户发过来的.当然它知道是哪个客户端地址发过来的 ...

  3. python 序列化和反序列化

    概念 序列化: 将对象的状态信息转换为可以存储或传输的形式的过程.就是把对象转换成字符串的过程 反序列化: 把字符串转换成python可以识别的数据类型对象的过程 应用 #数据存储 #网络传输 模块 ...

  4. 【Henu ACM Round#24 A】k-String

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果是一个k-string的话. 考虑最后的串假设形式为sss..ss(k个s) 则s中出现的字母,整个串中最后出现的次数肯定为k的 ...

  5. bzoj 1040 1040: [ZJOI2008]骑士

    1040: [ZJOI2008]骑士 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 5210  Solved: 1987[Submit][Status ...

  6. nested exception is java.lang.NoClassDefFoundError: org/codehaus/jettison/json/JSONObject异常的解决办法

    解决办法:你可以尝试添加一个jar包,因为我加入了一个jar包后错误问题成功解决. 将所需要的jettison-1.2.jar包复制到lib文件夹里面,重启项目,问题搞定.

  7. Android中加入思源字体/NotoSansCJK/SourceHanSans

    系统版本号:Android 4.2.2_r1 本文主要是在Android中加入思源字体的过程记录. 思源字体是Google和Adobe在2014.07.18公布的中文字体. 1.获取思源字体(Goog ...

  8. Java学习书目

    Java学习书目 拜读了:http://www.importnew.com/26932.html#comment-636554

  9. 减少XML文件数

    在android开发中,做出漂亮的ui的应用,往往有数量庞大的xml文件.比如,我们要给一个Button加上一个selector,如果背景不是图片,就得写三个xml文件,分别是:edit_focuse ...

  10. Css border样式

    1 四个边框 border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框样式使用border-top 设置上边框,一般单独设置上边框样式使用 ...