<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. python学习（二）：基本数据类型：整型，字符型

    整型: type():显示数据类型 # 整型,int # python3里,不管数字有多大,都是int类型 # python2里,有大小区分,长整型:long int a = " print ...

  2. Lorenzini:Laplacian与图上的黎曼-罗赫定理

    前两天去听了一下搞代数几何的Dino Lorenzini在交大的两场讲座(“On Laplacian Of Graphs and Generalization”,“Riemann-Roch Theor ...

  3. hadoop-05-mysql修改密码

    hadoop-05-mysql修改密码 su root 1,service mysqld start 2,vi /var/log/mysqld.log #在这里面查找密码 3, mysql -uroo ...

  4. POJ 3254 Corn Fields 状态压缩DP （C++/Java）

    id=3254">http://poj.org/problem? id=3254 题目大意: 一个农民有n行m列的地方,每一个格子用1代表能够种草地,而0不能够.放牛仅仅能在有草地的. ...

  5. 【递推DP】POJ1163The Triangle

    题目链接:http://poj.org/problem?id=1163 事实上这个题目有非常多解法,可是我们能够看下这个用一位数组的高效动规解法,这个我上课时老师讲的,非常不错. 先保存最后一行4 5 ...

  6. js运算符单竖杠“|”与“||”的用法和作用介绍

    在js开发应用中我们通常会碰到“|”与“||”了,那么在运算中“|”与“||”是什么意思呢?   在js整数操作的时候,相当于去除小数点,parseInt.在正数的时候相当于Math.floor(), ...

  7. Java类和对象8

    按要求编写Java应用程序. (1)创建一个叫做People的类: 属性:姓名.年龄.性别.身高         行为:说话.计算加法.改名 编写能为所有属性赋值的构造方法: (2)创建主类: 创建一 ...

  8. VS导出方法名和方法备注的方法

    VS导出方法名和方法备注的方法 方法一: 只能导出图片格式的UML 类图 1.点击查看类图 2.在空白处点击讲关系导出为图像 方法二: 是把整个类库的方法名都罗列出来 这个方便整理一些 具体方法如下 ...

  9. H5操作WebSQL数据库

    HTML代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  10. python ftp

    #fpt_server.py#__*__ encoding=utf-8 __*__ import socket ,os class MyClass(object): def __init__(self ...