前言
以前的你可能认为CSS的作用只不过是用来给页面排排版，布布局，让页面看起来更加的整洁与美观，最多也就是结合JS脚本动态改变一下页面的样式而已，其实，自从有了CSS3，它的作用就发生了很大的改变。现在我们可以利用CSS3提供的新特性不仅能做出很精致的图标，甚至还可以给这些图标加上动画效果。下面，小凡我就跟大家分享几个完全利用CSS+CSS3创作出的图标，通过这几个案例，相信大家一定会对CSS有一个全新的认识！O(∩_∩)O
一、效果展示及思路分析
1.效果展示
2.思路分析
一共三个图标，我们逐个来分析一下。
第一个图标“邮箱”，我们可以将这个图标看成是三部分组成，第一部分最底层的邮件背面，第二部分是上面的三角折叠效果，第三部分是夹在底层和折叠三角中间的邮件正面
第二个图标“日历”，我们可以将这个图标看成是三部分组成，第一部分最上面的灰色的长方形以及下面的日期号码，第二部分是围绕日期号码的蓝色长方形，第三部分是蓝色长方形下半部分的浅蓝色长方形
第三个图标“vue”，我们可以将这个图标堪称是两部分组成，第一部分最外层绿色三角，第二部分中间黑色三角加最内侧的白色三角
三个图标的设计思路理清了，我们就直接上代码！！内容略长，大家一定要耐心读完哦！(*￣︶￣)
二、实现步骤
1.准备工作
在正式开始写代码之前，需要先下载相应的IDE，以及进行必要的配置工作。
小凡在【uni-app项目|vue组件形式实现的科技感loading纯CSS动效】文章中详细讲解过如何进行必要的配置工作，这里就不再重复讲解了，大家可以点击右侧链接查看→科技感Loading动效详解
2.代码实现
（1）在home.vue应用启动页中添加一个布局，引入并注册自定义vue组件，在模版中使用自定义vue组件
<template>
<view class="home">
<view><mail></mail></view>
<view><calendar></calendar></view>
<view><vue></vue></view>
</template>
<script>
import Mail from '@/components/Mail.vue'
import Calendar from '@/components/Calendar.vue'
import Vue from '@/components/Vue.vue'
export default {
components:{
Mail,
Calendar,
Vue
}
}
</script>
<style scoped>
.home{
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(3,1fr);
height: 100vh;
justify-items: center;
align-items: center;
max-width: 800px;
margin: 0,auto;
}
.home>view{
transform: scale(1.5);
}
</style>（4）编写自定义vue组件Mail.vue
说明：样式代码并没有考虑浏览器兼容问题，本代码的测试环境是谷歌浏览器。
- 在模版代码块中，添加uni-app提供的view组件元素（类似于HTML中的div）并设置class属性为mail（简单到极致，只有一个view元素，通过CSS样式就能绘制出我们想要的图标！）
<template>
<view class="mail"></view>
</template>- 设置view元素的样式（第一部分：最底层的邮件背面）
.mail{
/*相对定位元素，将该元素作为绝对定位的父元素*/
position: relative;
/*调整元素位置*/
margin: 5px 0;
/*定义边框圆角*/
border-radius: 4px;
/*定义元素大小*/
width: 40px;
height: 30px;
/*设置背景图片，线性渐变，角度为90度*/
background-image: linear-gradient(90deg, rgb(228, 69, 69), rgb(129, 0, 0));
/*溢出部分隐藏*/
overflow: hidden;
/*设置元素外阴影样式*/
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
- 利用CSS:before选择器，创建伪元素（第二部分：信封上面的三角折叠效果）
.mail{
......
overflow: hidden;
......
}.mail::before{
content: '';
/*绝对定位元素*/
position: absolute;
/*设置元素位置*/
top: -29px;
left: 50%;
/*设置元素显示层级*/
z-index: 1;
display: block;
margin-left: -20px;
/*设置边框样式*/
border: 4px solid rgb(228, 69, 69);
/*设置边框圆角*/
border-radius: 2px;
/*设置元素大小*/
width: 32px;
height: 32px;
background-color: #eee;
/*放大元素1.3倍并顺时针旋转45度*/
transform: scaleX(1.3) rotate(45deg);
/*设置元素外阴影样式*/
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
}
- 利用CSS:after选择器，创建伪元素（第三部分：夹在底层和折叠三角中间的邮件正面）
.mail::after{
content: '';
/*定义元素为块级元素*/
display: block;
margin: 7px 4px 0;
/*设置该元素的长宽为0*/
width: 0;
height: 0;
/*设置元素边框的样式，上下左右边框的形状都是一个三角形*/
border-top: 14px solid #999;
border-bottom: 12px solid #eee;
border-left: 14px solid #e0e0e0;
border-right: 18px solid #e0e0e0;
/*设置元素的背景色为白色*/
background-color: white;
}
（5）编写自定义vue组件Calendar.vue
说明：样式代码并没有考虑浏览器兼容问题，本代码的测试环境是谷歌浏览器。
- 在模版代码块中，添加uni-app提供的view组件元素（类似于HTML中的div）并设置class属性为calendar（嗯嗯，没错！依然是简单到极致，只有一个view元素，通过CSS样式就能绘制出我们想要的图标！）
<template>
<view class="calendar">31</view>
</template>- 设置view元素的样式（第一部分：最上面的灰色的长方形以及下面的日期号码）
.calendar{
/*相对定位元素，作为绝对定位元素的父元素*/
position: relative;
/*定义元素位置、边框圆角及大小*/
margin: 2px 5px 30px;
border-radius: 2px 2px 0 0;
width: 36px;
height: 5px;
/*定义嵌入元素在三维空间表现*/
transform-style: preserve-3d;
background-color: #ccc;
color: rgb(233, 233, 233);
font-size: 20px;
font-weight: 200;
text-align: center;
line-height: 40px;
/*设置元素Z轴偏移量为0*/
transform: translateZ(0);
}
- 利用CSS:before和after选择器，创建伪元素（这里是设置两个伪元素公共的样式属性）
.calendar::before,
.calendar::after{
content: '';
/*绝对定位元素*/
position: absolute;
/*设置元素位置*/
left: 50%;
top: 5px;
/*设置元素显示层级，防止遮挡父元素日期号码*/
z-index: -1;
/*设置元素为块级元素*/
display: block;
/*设置元素外边距、边框圆角及大小*/
margin-left: -20px;
border-radius: 3px;
width: 40px;
height: 30px;
}- 设置:before创建的伪元素样式（第二部分：围绕日期号码的蓝色长方形）
.calendar{
......
transform-style: preserve-3d;
......
} .calendar::before{
/*设置背景色*/
background-color: rgb(35, 109, 193);
/*设置元素Z轴偏移量、沿着X轴逆时针3D旋转10度*/
transform: translateZ(-2px) rotateX(-10deg);
}
- 设置:after创建的伪元素样式（第三部分：蓝色长方形下半部分的浅蓝色长方形）
.calendar::after{
/*设置背景色*/
background-color: rgb(45, 118, 228);
/*设置元素Z轴偏移量，沿着X轴顺时针3D旋转10度*/
transform: translateZ(-2px) rotateX(10deg);
/*设置元素外阴影样式*/
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
（6）编写自定义vue组件Vue.vue
说明：样式代码并没有考虑浏览器兼容问题，本代码的测试环境是谷歌浏览器。
- 在模版代码块中，添加uni-app提供的view组件元素（类似于HTML中的div）并设置class属性为vue（依然是简单到极致，只有一个view元素，通过CSS样式就能绘制出我们想要的图标！）
<template>
<view class="vue"></view>
</template>- 设置view元素的样式
.vue{
/*相对定位元素，作为绝对元素的父元素*/
position: relative;
/*设置元素大小*/
width: 40px;
height: 40px;
/*设置溢出隐藏属性*/
overflow: hidden;
/*设置元素中图形阴影样式*/
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}- 利用CSS:before和:after选择器，创建伪元素（两个伪元素的公共样式）
.vue::before,
.vue::after{
content: '';
/*绝对定位元素*/
position: absolute;
/*设置元素位置*/
left: 50%;
top: 50%;
/*重新设置元素沿Y轴放大、设置元素在X轴及Y轴的位置、顺时针旋转45度*/
transform: scaleY(1.8) translate(-50%, -30px) rotate(45deg);
}- 设置:before选择器创建的伪元素样式（第一部分：最外层绿色三角）
.vue{
......
overflow: hidden;
......
} .vue::before{
width: 40px;
height: 40px;
background: #41b883;
}
- 设置:after选择器创建的伪元素样式（第二部分：中间黑色三角加最内侧的白色三角）
.vue{
......
overflow: hidden;
......
} .vue::after{
width: 20px;
height: 20px;
border: 6px solid #35495e;
background: white;
}
如果喜欢小凡的这篇文章，记得点赞、收藏和分享哦！也欢迎大家在评论区留言。
相关文章推荐：
详细解析：uni-app|vue组件实现会撒娇的旗帜徽章纯CSS动效
详细解析：uni-app|vue组件实现漂浮的地标图标纯CSS动效
详细解析：uni-app|vue组件实现跳动的心脏图标纯CSS动效
3066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
