欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > css3库 > UI界面设计 > 一组精美的纯CSS3扁平风格图标

一组精美的纯CSS3扁平风格图标

一组精美的纯CSS3扁平风格图标

关键词:纯css3,图标,扁平风格,css图标,图标动画,css3库,uijiemian

描述:这是一组使用纯CSS3制作的扁平风格的图标。这组图标共有16个,所有图标均由CSS渲染而成,没有使用任何图片。其中有5个图标在鼠标滑过时带有动画特效。

简要教程

这是一组使用纯CSS3制作的扁平风格的图标。这组图标共有16个,所有图标均由CSS渲染而成,没有使用任何图片。其中有5个图标在鼠标滑过时带有动画特效。

使用方法

HTML结构

所有的图标都是以div.icon作为包裹容器,里面放置需要的元素。在email图效果中,它的HTML结构如下:

<div class="icon">
  <div class="mail">
    <div class="shadows"></div>
  </div>
</div>             
              
CSS样式

email图标的CSS样式也非常简单:div.mail元素是整个信封的主体,它设置了固定的宽度和高度,并设置了一个小圆角和一些阴影效果。

.mail:before {
  content:"";
  width: 0;
  height: 0;
  position:absolute;
  top:6px;
  border-left: 54px solid transparent;
  border-right: 54px solid transparent;
  border-top: 50px solid rgba(0,0,0,0.3);
}

.mail:after {
  content:"";
  width: 0;
  height: 0;
  position:absolute;
  top:6px;
  border-left: 54px solid transparent;
  border-right: 54px solid transparent;
  border-top: 39px solid #eeecdf;
}             
              

信封的阴影由三个部分组成:.shadows元素是下方的三角形阴影,.shadows::after是左侧的三角形阴影,.shadows::before是右侧的三角形阴影。

.mail .shadows {
  width: 0;
  height: 0;
  border-left: 42px solid transparent;
  border-right: 42px solid transparent;
  border-bottom: 30px solid rgba(0,0,0,0.12);
  position:absolute;
  bottom:0;
  left:50%;
  margin-left:-42px;
}
.mail .shadows:after {
  content:"";
  position:absolute;
  left:-54px;
  top:-41px;
  width: 0;
  height: 0;
  border-top: 41px solid transparent;
  border-left: 54px solid rgba(0,0,0,0.06);
  border-bottom: 39px solid transparent;
}
.mail .shadows:before {
  content:"";
  position:absolute;
  right:-54px;
  top:-42px;
  width: 0;
  height: 0;
  border-top: 42px solid transparent;
  border-right: 54px solid rgba(0,0,0,0.2);
  border-bottom: 39px solid transparent;
}               
              

在styles.css文件中有所有图标对应的CSS样式,使用哪个图标可以直接引入相应的样式即可。

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/css3_uijiemian/7912.html

 在线演示  免费下载
编号:201802080000007912
大小:0.01MB
上传时间:2018-02-12 14:02
素材由用户"q564016251"上传分享。

标签

最新推荐素材

与一组精美的纯CSS3扁平风格图标相关的素材

.