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

最新推荐文章于 2024-06-20 13:45:41 发布

凡星℃

最新推荐文章于 2024-06-20 13:45:41 发布

阅读量2.3k

点赞数 2

分类专栏： uni-app 文章标签： vue.js css css3 html uni-app

本文链接：https://blog.csdn.net/xujing81/article/details/110248296

版权

uni-app 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

前言

今天，小凡继续跟大家分享一个非常实用的动效，一颗跳动的心脏动效。大家先别急着往下看，可以先考虑一下，如果我们自己来做一个心形的图形，应该怎样做呢？~（嘘.....悄悄告诉大家，小凡我刚开始时也没想出来，而且还是那种一点思路都没有的o(╥﹏╥)o），好啦，想不出来也没关系，大家继续往下看吧！O(∩_∩)O

一、效果展示及思路分析

1.效果展示

2.思路分析

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

第一部分就是心形图形的左半部分，第二部分就是心形图形的右半部分

有了心形图形，再加上跳动的动效就完美了！！

二、实现步骤

1.准备工作

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

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

2.代码实现

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

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

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

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

在模版代码块中，添加uni-app提供的view组件元素（类似于HTML中的div）并设置class属性为heart（嗯嗯，没错！依然是那个熟悉的“味道”，极简模式，只有一个view元素，通过CSS样式就能实现我们想要的动效！）

<template>
	<view class="heart"></view>
</template>

设置view元素的样式

.heart{
        /*设置弹性布局*/
		display: flex;
		margin: 5px 0;
		width: 40px;
		height: 30px;

        /*通过过滤器设置元素内阴影样式*/
		filter: drop-shadow(0 1px 1px #973340a3);

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

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

    .heart::before,
	.heart::after{
		content: '';
        /*创建的两个伪元素各占一份*/
		flex: 1;
		height: 30px;
        /*设置边框四个角的大小 顺序是：上、右、下、左*/
		border-radius: 20px 20px 4px 4px;
        /*设置图形变形（旋转、拉伸等）的原点*/
		transform-origin: 50% 6px;
	}

分析：两个伪元素各占父元素的一般，父元素的宽度是40px，那么每个伪元素的宽度是20px，所以在创建伪元素时就不用再设置元素宽度了，由于此时伪元素都没有设置背景色，所以，暂时都看不到他们的样子

修改伪元素的样式，做出心形的样子

分析：文章开始时，小凡让大家思考过该如何制作这个心形，那么现在是公布答案的时候了，看看和你想的方法一样吗？我们可以利用transform-origin属性设置旋转时的原点，然后再利用transform属性里面的rotate()方法，分别旋转两个伪元素就OK了。

.heart::before{
        /*设置背景图片 线性渐变角度设置为90度*/
		background-image: linear-gradient(90deg, red, #ff6666);
        /*元素根据设置的原点逆时针旋转45度*/
		transform: rotate(-45deg);
	}
	.heart::after{
        /*设置背景图片 线性渐变角度设置为90度*/
		background-image: linear-gradient(0deg, red, #ff8484);
        /*元素根据设置的原点顺时针旋转45度*/
		transform: rotate(45deg);
	}

添加CSS3动效

说明：伪元素中添加的animation属性与@keyframes一起使用，从而实现不同的动画效果，0%表示开始动画，100%表示结束动画，当然我们还可以在中间设置新的关键帧，例如：在0%和100%中间再设置一个50%，通过设置transform属性中的scale()方法，在不同的关键帧处改变元素放大和复原的值，来实现这个心跳的动效！

.heart{
		......

        /*添加动画效果*/
		animation: breath infinite 2s ease;
	}

@keyframes breath{
		0%{
			transform: scale(1);
		}
		50%{
			transform: scale(1.1);
		}
		100%{
			transform: scale(1);
		}
	}

总结

一颗跳动的心脏动效就跟大家分享完了，是不是和你想的实现方法一致呢？ O(∩_∩)O，好啦，下面我们来简单总结下这个动效中的知识点：

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

以上就是本文中用到的知识点，大家都学会了吗？

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