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

前言

经历了前面几篇文章的痛苦经历以后,我终于深刻领悟到了那句“学海无涯苦作舟”呀! o(╥﹏╥)o 看来小凡我前端学习的路还很漫长呀!大家也要继续努力呀!加油!!咳咳......一不小心又跑题了,我们言归正传,今天继续给大家分享一个有趣的动效,一个会跟大家撒娇的旗帜徽章。


一、效果展示及思路分析

1.效果展示

 截了好久的图,终于还是放弃了,动画速度实在是太快了,我手速实在是太low了o(╥﹏╥)o 算了,大家还是按照小凡的讲解做出来自己看效果吧!

2.思路分析

我们可以将该动效拆成两部分来理解:

第一部分就是旗帜的上半部分以及其中的文字,第二部分就是旗帜下面的两个角

理清了思路,我们就直接上代码!!

二、实现步骤

1.准备工作

在正式开始写代码之前,需要先下载相应的IDE,以及进行必要的配置工作。

小凡在【uni-app项目|vue组件形式实现的科技感loading纯CSS动效】文章中详细讲解过如何进行必要的配置工作,这里就不再重复讲解了,大家可以点击右侧链接查看→科技感Loading动效详解

2.代码实现

(1)在home.vue应用启动页中添加一个布局,引入并注册自定义vue组件,在模版中使用自定义vue组件

<template>
	<view class="home">
		<view><Badge></Badge></view>
	</view>
</template>

<script>
	import Badge from '@/components/Badge.vue'
	export default {
		components:{
			Badge
		}
	}
</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组件Badge.vue

说明:样式代码并没有考虑浏览器兼容问题,本代码的测试环境是谷歌浏览器。

  • 在模版代码块中,添加uni-app提供的view组件元素(类似于HTML中的div)并设置class属性为badge(嗯嗯,没错!依然是熟悉的“味道”,简单到极致,只有一个view元素,通过CSS样式就能实现我们想要的动效!)
<template>
	<view class="badge">Hi</view>
</template>
  • 设置view元素的样式
.badge{
        /*设置相对定位,作为绝对定位元素的父容器*/
		position: relative;

        /*弹性布局,容器内元素水平居中*/
		display: flex;
		justify-content: center;

        /*设置圆角边框  顺序:上、右、下、左*/
		border-radius: 4px 4px 0 0;
		margin: 2px;

        /*元素大小、溢出隐藏以及元素阴影*/
		width: 36px;
		height: 36px;
		overflow: hidden;
		filter: drop-shadow(0 1px 1px #973340a3);

        /*设置字体样式、字体阴影*/
		color: white;
		font-weight: bold;
		line-height: 32px;
		text-shadow: 0 1px 0 rgba(0,0,0,0.4);

        /*设置元素动画*/
		animation: shake infinite 2s ease;
	}

说明:样式中设置了width、height、overflow: hidden,首先是为了限制徽章的大小,后面要创建的伪元素再大,也不会超出这里设置的宽高范围;其次,设置了溢出隐藏以后,无论后面创建的伪元素如何旋转、变形等,都只是在规定的宽高内显示,便于我们做出想要的图形。由于没有设置背景色,所以,此时我们在页面上是看不到该元素的轮廓的,只能看到设置了样式的Hi字体。

  • 利用CSS:before和:after选择器,创建伪元素

分析:同时创建了两个方形的伪元素,重叠显示,所以页面上看到的只有一个方形图形

.badge::before,
	.badge::after{
		content: '';
        /*元素绝对定位*/
		position: absolute;

        /*定位元素位置*/
		left: 0;
		top: 0;

        /*设置层级,防止将父元素中的文字覆盖*/
		z-index: -1;

        /*定义元素形状及背景图*/
		display: block;
		border-radius: 4px;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(0deg, red, #ff8484);
	}
  • 修改伪元素的样式,做出旗帜的样子

分析:如何做出这种不规则的图形呢?so easy!我们可以利用transform-origin属性设置拉伸时的原点,然后再利用transform属性里面的skewY()方法,拉伸图形的X轴就可以得到两个尖尖的角了。

:before伪元素被拉伸

 

:after伪元素被拉伸

 

溢出部分未隐藏

 

溢出隐藏
.badge::before{
        /*将伪元素左上点作为拉伸变形原点*/
		transform-origin: left top;
		transform: skewY(-20deg);
	}
	.badge::after{
        /*将伪元素右上点作为拉伸变形原点*/
		transform-origin: right top;
		transform: skewY(20deg)
	}
  • 添加CSS3动效

说明:伪元素中添加的animation属性与@keyframes一起使用,从而实现不同的动画效果,0%表示开始动画,100%表示结束动画,当然我们还可以在中间设置新的关键帧,例如:在0%和100%中间再设置一个50%

.badge{
		......

        /*添加动画效果*/
		animation: shake infinite 2s ease;
	}
@keyframes shake{
		0%{
			transform: rotate(0deg);
		}
		4%{
			transform: rotate(-5deg);
		}
		8%{
			transform: rotate(5deg);
		}
		12%{
			transform: rotate(-5deg);
		}
		16%{
			transform: rotate(5deg);
		}
		20%{
			transform: rotate(-5deg);
		}
		24%{
			transform: rotate(5deg);
		}
		28%{
			transform: rotate(0deg);
		}
	}

 


总结

怎么样?做出来的效果大家都看到了吧,是不是一个会定时撒娇的旗帜呀?O(∩_∩)O,好啦,下面我们来简单总结下这个动效中的知识点:

  • uni-app项目中如何设置应用启动页,如何创建自定义vue组件以及如何在应用启动页中使用自定义vue组件
  • 编写自定义vue组件中用到了“相对定位与绝对定位”、“弹性布局”、border-radius、filter: drop_shadow()、background-image: linear-gradient()
  • 重点讲解了transform-origin属性是用来设置拉伸时的原点以及使用transform属性里面的skewY()方法,用来拉伸元素的X轴
  • 添加CSS3动效时用到的animation属性以及@keyframes规则

以上就是本文中用到的知识点,小凡还得啰嗦两句,这个动效本身并不难理解,稍微有点难的地方应该就是如何做出旗帜徽章下面的两个角了。如果不了解CSS中的transform-origin属性和transform: skewY()方法的话,小凡觉得实现起来还是有点困难的,所以,要想有好的创意就必须要有好的技能,本文分享的动效就很好的证实了这句话!所以啦,小凡和大家一起“好好学习,天天进步”(*^▽^*)

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

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

相关文章推荐:

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

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

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