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