浙江 杭州

CSS3伪元素制作圆形扁平风格图标

系统分类: 网页特效 - css3 - css3 过渡 2016-05-26

人气20312

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一组使用纯CSS3制作的精美的扁平风格的圆形图标。这些圆形图标都是使用CSS的伪元素来制作,是一套以家居为主题的图标,包括门窗,邮箱,浴室,台灯书柜等等10个图标。

制作方法

HTML结构

图标的HTML结构非常简单。<div>作为包裹元素,里面的图标内容使用<span>元素来制作。

<div class="i1">
  <span class="cortinas"></span>
</div>

 

CSS样式

以第一个图标为例,先设置包裹<div>元素的基本样式。将它设置为圆形。窗口部分是用.i1来设置,窗口的横条使用.i1::before来设置,窗口的竖条使用.i1::after来设置。

.i1{
  position:absolute;
  width:55px;
  height:70px;
  border:5px solid #1ac2ff;
  margin:25px 33px;
}

.i1::before{
  content:"";
  display:block;
  width:5px;
  height:70px;
  background:#1ac2ff;
  margin:0 25px 
}
.i1::after{
  content:"";
  display:block;
  width:55px;
  height:5px;
  background:#1ac2ff;
  margin:-37px 0px 
}

 

接着是门部分。门上边的红色线条是.cortinas来设置,左边门柱是.cortinas::before来设置,右边门柱是.cortinas::after来设置。

.cortinas{
  position:absolute;
  width:70px;
  height:5px;
  background:#ff5675;
  margin:-83px -7px;   
}              
.cortinas::before{
  content:"";
  display:block;
  width:12px;
  height:95px;
  background:rgba(255, 255, 255, .3);
  margin: 0 0;
}
.cortinas::after{
  content:"";
  display:block;
  width:12px;
  height:95px;
  background:rgba(255, 255, 255, .3);
  margin:-95px 57px
}

 

通过上面的设置,一个扁平风格的圆形图标就诞生了,是不是横神奇呢?

查看演示
下载资源:1
下载资源
错误提交:

格式:zip 大小:56.21KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2245.html 非特殊说明,本文版权归原作者所有,转载请注明出处
CSS3伪元素制作圆形扁平风格图标

我当前G币余额:0 已下载次数:1

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有3 评论)