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.向右的箭头> . 看到很多网站里面向右的箭头都是图片代替的,但是为了网站的性能,我们一般的原则是能够避免使用图片的尽量不用图片 比如看下携程个人中心首页面,向右的箭头 其实现思路是这样 ...
随机推荐
- Tarjan专题
前排Orz tarjan tarjan算法在图的连通性方面有非常多的应用,dfn和low数组真是奥妙重重(并没有很搞懂反正背就完事了) 有向图强连通分量 #include<iostream> ...
- libcudnn (R5) not found in library path
环境:Ubuntu 18.04 + Torch7 + cuda10 在运行使用cudnn的lua程序的时候产生错误: /home/majiabiao/torch/: /home/majiabiao/ ...
- Python3+Gurobi使用教程(一)
Gurobi使用教程 1.Gurobi使用的一般框架 from gurobipy import * try: m=Model('modelname') except GurobiError: prin ...
- 开源 PHP 项目找队友、顾问、指导、贡献者等等
介绍站点还没做,先直接甩代码链接了 https://github.com/litphp/litphp Lit是什么? Lit是我一直在撸的个人框架,按第一次上传代码来说历史 超过4年 了,从还能支持P ...
- ASP.NET-让html代码输出为字符串
HttpUtility.HtmlEncode这个函数可以让s变成没有攻击的代码,可以提升网站的安全性 public string Index(string s = "suepr name i ...
- root用户无法切换到cdh的hive账号上
在/etc/passwd中看到hive账号是登录的终端是/bin/false,而正常的用户配置的都是/bin/bash,因此在root账号su到hive也是没有用的 hive:x:111:111:Hi ...
- xml布局内容总结（四）--Android
(1)对于xml编写界面较复杂的情况下,使用include会使得编写和查看更清楚 <LinearLayout android:layout_width="mat ...
- cocos2dx 触摸钢琴
1.触摸钢琴项目描写叙述 1.1触摸钢琴功能描写叙述 实现手指点按琴键发出相应的音调,按下位置出现星云的粒子特效,滚动实现移动到别的琴键的位置,按下安卓返回键运行关闭. 1.2触摸钢琴所需技术 粒子特 ...
- Making User-Managed Backups-17.4、Making User-Managed Backups of Online Tablespaces and Datafiles
17.4.Making User-Managed Backups of Online Tablespaces and Datafiles 当数据库打开时,能够备份一个在线表空间全部和一个指定的数据文件 ...
- 13.MongoDB 连接命令格式
转自:https://www.linuxidc.com/Linux/2016-03/129456.htm 使用用户 admin 使用密码 123456 连接到本地的 MongoDB 服务上.输出结果如 ...