<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. 前端路由的两种模式:hash(#)模式和history模式(转)

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  2. luogu P2117 小Z的矩阵（结论题）

    题意 题解 这题有点水. 我们发现对答案有贡献的实际上只有左上到右下的对角线上的数. 因为不在这条对角线上的乘积都要计算两遍,然后%2就都没了... 然后就做完了. #include<iostr ...

  3. 写入~/.bashrc 文件

    1.进入~/.bashrc 文件 vim ~/.bashrc 2.按下I键,然后按Enter键 加入路径 3.按ESC键退出,再按:wq! 保存即可.

  4. 题解 P3369 【【模板】普通平衡树】

    在网上某篇神奇的教程和@codesonic 大佬的标程帮助下,我又肝完了Leafy Tree,跑过来写篇题解(好像以前写过一篇?) 什么是Leafy Tree? Leafy Tree由两种节点组成:辅 ...

  5. Python学习第一天-编写登陆接口

    编写登陆接口 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 帐号文件user.txt内容如下: qaz 123qwe 12345qweqwr 12321424...... 锁文件user_l ...

  6. iOS CST NSDate

    好像是从ios4.1開始[NSDate date];获取的是GMT时间,这个时间和北京时间相差8个小时.下面代码能够解决问题 - (void)tDate { NSDate *date = [NSDat ...

  7. bzoj1211: [HNOI2004]树的计数（prufer序列+组合数学）

    1211: [HNOI2004]树的计数 题目:传送门 题解: 今天刚学prufer序列,先打几道简单题 首先我们知道prufer序列和一颗无根树是一一对应的,那么对于任意一个节点,假设这个节点的度数 ...

  8. bzoj1002: [FJOI2007]轮状病毒(基尔霍夫矩阵)

    1002: [FJOI2007]轮状病毒 题目:传送门 题解: 决定开始板刷的第一题... 看到这题的时候想:这不就是求有多少种最小生成树的方式吗? 不会啊!!!%题解... 什么鬼?基尔霍夫矩阵?? ...

  9. Python 中的 None 与真假

    Python 中 0 为假,大小为 0 的容器也定义为假: 空字符串与空的列表也为假: None 可作为一个对象,该对象的类型为:NoneTye None 表示的含义,更多的是一种不存在,是真正的空, ...

  10. POJ 3672 水题......

    5分钟写完 水水更开心 //By SiriusRen #include <cstdio> #include <iostream> #include <algorithm& ...