前言
今天，小凡继续跟大家分享一个非常实用的动效，一颗跳动的心脏动效。大家先别急着往下看，可以先考虑一下，如果我们自己来做一个心形的图形，应该怎样做呢？~（嘘.....悄悄告诉大家，小凡我刚开始时也没想出来，而且还是那种一点思路都没有的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了。
左右两个伪元素
|
左侧伪元素旋转45度
|
右侧伪元素旋转45度
|
.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规则
以上就是本文中用到的知识点，大家都学会了吗？
