干货分享|三个纯CSS绘制图标的案例带你重新认识CSS的魅力

前言

以前的你可能认为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);
	}
父元素去掉overflow属性后的样子
父元素添加overflow属性后的样子
  •  利用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;
	}
父元素去掉overflow属性
父元素加上overflow属性
  •   设置:after选择器创建的伪元素样式(第二部分:中间黑色三角加最内侧的白色三角)
    .vue{
        ......
		overflow: hidden;
        ......
	}
    .vue::after{
		width: 20px;
		height: 20px;
		border: 6px solid #35495e;
		background: white;
	}
父元素未加上overflow属性

 

父元素加上overflow属性


如果喜欢小凡的这篇文章,记得点赞、收藏和分享哦!也欢迎大家在评论区留言。

扫描二维码关注我的公众号,可以第一时间收到我的更新信息哦!

相关文章推荐:

详细解析:uni-app|vue组件实现会撒娇的旗帜徽章纯CSS动效

详细解析:uni-app|vue组件实现漂浮的地标图标纯CSS动效

详细解析:uni-app|vue组件实现跳动的心脏图标纯CSS动效

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页