<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. js获取当前根目录的方法

    function getRootPath_web() { //获取当前网址,如: http://localhost:8083/uimcardprj/share/meun.jsp var curWwwP ...

  2. [codevs3269]混合背包

    题目大意:一道混合背包模板. 解题思路:分三种情况讨论,01和完全没什么问题,多重背包需要把物品分成$\log W[i]$件,然后01即可,分成W[i]件01会TLE. 读优大法好! C++ Code ...

  3. 使用vue实现简单键盘，支持移动端和pc端

    常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用,欢迎点赞,h5 ios输入框与键盘 兼容性优化 实现效果: Keyboard.vue <t ...

  4. python 中i++、逻辑表达式

    参考链接:https://www.cnblogs.com/yupeng/p/3345946.html i++运算符 python中没有类似i++之类实现+1的运算符,但是有++i,+-i.之类的,他们 ...

  5. FZU 1980 AbOr's story

    AbOr's story Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on FZU. Original I ...

  6. 榨取kkksc03 luogu1855 dp 裸二维费用背包

    首先对于这个题目背景,,个人认为很(you)好(qu),,, 核心就是一个裸的二维费用背包,刚刚学习的同学参见dd大牛的背包九讲 #include <cstdio> #include &l ...

  7. java 自定义实现base64编码转换

    1.base64编码转换 所谓base64编码,即按照规则把字符转化为"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456 ...

  8. 设计模式之Mediator模式（笔记）

    中介者模式:用一个中介对象来封装一系列的对象交互. 中介者使各对象不须要显式的相互引用,从而使其耦合松散.并且能够独立的改变它们之间的交互. 使用场合:中介者模式一般应用于一组对象以定义良好可是复杂的 ...

  9. 一、奇妙插件Tampermonkey的简单安装教程

    奇妙插件Tampermonkey的简单安装教程 1.下载 对于浏览器而言,一般的功能并不能满足"特殊用户的需求".这时候就须要插件来帮忙了.那么讲到插件的支持多又常见的浏览器必定要 ...

  10. 主程的晋升攻略(4)：TCP、消息分包和协议设计

    在<主程的晋升攻略(3):IP.DNS和CDN>中,一次网络请求经过DNS解析知道了目的IP,如今就要发出网络包,这里我们说一说TCP的相关话题. TCP是一种流式协议 讲网络编程的教科书 ...