当前位置：首页 > 网页特效 > 图像/媒体

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

分类：图像/媒体日期：2024-05-14 点击(0) 评论(0)

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

简介

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

```html
<div class="icon">
  <div class="mail">
    <div class="shadows"></div>
  </div>
</div>     
```        
#####  CSS样式
email图标的CSS样式也非常简单：div.mail元素是整个信封的主体，它设置了固定的宽度和高度，并设置了一个小圆角和一些阴影效果。

```html
.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是右侧的三角形阴影。

```html
.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样式，使用哪个图标可以直接引入相应的样式即可。

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果