CSS3 实现RSS图标
<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'> </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图标的更多相关文章
- 纯css3手机页面图标样式代码
全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...
- 用css3实现各种图标效果
原文:用css3实现各种图标效果 公共样式 应该说现在绝大多数公司的项目前端都是一团乱,不仅仅是js写的没有任何框架而言,css同样也是如此,导致项目如果要升级或者说有新的变更维护起来就特别困难. 最 ...
- 修改源码去除zblog博客分类目录的RSS图标
zblog博客的所建立的分类默认前面是有一个RSS图标的,如下图所示: 其实这个图标的存在并不能起到太大的美化作用,增加用户订阅数量的作用.那么应该如何去掉这个RSS图标呢? 这个RSS图标的生成在z ...
- CSS学习笔记----CSS3自定义字体图标
响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...
- 通过SVG与CSS3实现向上图标
需求 H5活动页需要用的图标很少,暂时没有使用iconfont的必要性,而通过图片的话额外增加UI的工作量以及增加请求数,前端也有很多实现简单图标的方法,所以就尝试自己去解决,写一个"返回顶 ...
- 用css3实现各种图标效果（2）
写在前面 写的一模一样的css样式,结果却导致原来出来不一样的效果图. 用chrome的开发者工具查看,比较起来还是一模一样的css样式,可为什么会出现不一样的placeholder效果呢?一个白色粗 ...
- 用css3实现各种图标效果（1）
公共样式 应该说现在绝大多数公司的项目前端都是一团乱,不仅仅是js写的没有任何框架而言,css同样也是如此,导致项目如果要升级或者说有新的变更维护起来就特别困难. 最近领导决定花大时间整理一下css样 ...
- css3简易实现图标动画由小到大逐个显现
在制作网站时避免图片太平淡经常会用到动画效果:由小到大跳跃出现.这种效果很有视觉冲击力,显著提高关注度~ 原理:利用css3的动画属性@keyframes@-moz-keyframes@-webkit ...
- 利用纯粹的CSS3替代小图标---向右箭头
1.向右的箭头> . 看到很多网站里面向右的箭头都是图片代替的,但是为了网站的性能,我们一般的原则是能够避免使用图片的尽量不用图片 比如看下携程个人中心首页面,向右的箭头 其实现思路是这样 ...
随机推荐
- 学习jvm，关于MAT an internal error occurred during:"Parsing heap dump" from问题
写了一个死循环不断的创建对象,模拟内存溢出 package com.zuo.test1; import java.util.ArrayList; import java.util.List; publ ...
- BZOJ3796 Mushroom追妹纸（二分答案+后缀数组+KMP）
求出一个串使得这个串是\(s1,s2\)的子串.串中不包含\(s3\). 如果没有这个\(s3\)就可以二分答案,然后height小于二分值分一组.看看每组里是不是出现过\(s1,s2\)的后缀.判断 ...
- python scrapy爬取HBS 汉堡南美航运公司柜号信息
下面分享个scrapy的例子 利用scrapy爬取HBS 船公司柜号信息 1.前期准备 查询提单号下的柜号有哪些,主要是在下面的网站上,输入提单号,然后点击查询 https://www.hamburg ...
- pandas 5 导入导出 读取保存 I/O API
官网The pandas I/O API pickle格式是python自带的 from __future__ import print_function import pandas as pd da ...
- 不要在.h文件中定义变量
今天在头文件.h中初始化了一个数组和函数,在编译的时候提示这个数组和函数重新定义了,检查后发现,犯了一个致命的错误,在头文件中定义变量... 以下引用别人的一篇说明,警示自己. C语言作为一种结构化的 ...
- STM32是如何进入中断服务函数xxx_IRQHandler的
今天在看stm32的中断,一时间不理解stm32主函数是如何进入中断函数的,按C编程的理解,会有个特定的入口之类的,但是看demo过程中没有发现入口. 以串口中断服务函数void USART1_IRQ ...
- linux的一页是多大
命令 getconf PAGESIZE 结果为4096,即一页=4096字节=4KB(注意是Byte,1B=8bit) 在使用mmap映射函数时,它的实际映射单位也是以页为单位的,即不过我们把MAP_ ...
- 利用hive源码解析sql查了哪些表哪些字段
在hiveserver2中使用了org.apache.hadoop.hive.ql.parse.BaseSemanticAnalyzer对抽象语法树(AST)进行语义分析,分析的过程可以得出hive查 ...
- Google笔试(2015年8月)
华电北风吹 天津大学认知计算与应用重点实验室 日期:2015/8/21 这三道题目的PDF能够在这里下载 https://github.com/ncepuzhengyi/jobHuntingExam/ ...
- HttpClient 图讲解明
大家刚看这个名字一定会想问这是什么东东,在这我特意百度百科了下 HTTP 协议可能是如今 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序须要直接通过 HTTP 协议来訪 ...