css动效-详解：uni-app|vue组件实现跳动的肾图标的纯CSS动态效果

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

前言

明天小凡继续给大家分享一个非常实用的动画，一个跳动的肾动画。 先别急着往下看，你可以先想一想，如果我们自己做一个心形的图形，应该怎么做呢？ ~（哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈）哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈)））继续往下看吧！O(∩_∩)O

一、效果展示与思考分析 1、疗效展示

2.思想分析

我们可以把动画拆成两部分来理解：

第一部分是心形的左半部分css动效，第二部分是心形的右半部分

心形的图形，加上跳动的动作效果，简直完美！ ！

2. 实施步骤 1. 制定工作计划

在开始编写代码之前，您需要下载相应的IDE并进行必要的配置工作。

小凡在【uni-app项目 | 项目】一文中详细讲解了如何进行必要的配置工作。 vue组件实现的纯CSS科技感加载动态效果】，这里不再重复讲解，可以点击两侧链接查看→科技感Loading动态效果解读

2. 代码实现

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

	
		
	


	import Heart from '@/components/Heart.vue'
	export default {
		components:{
			Heart
		}
	}


	.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);
	}

（4）编译自定义vue组件Heart.vue

说明：样式代码没有考虑浏览器兼容性问题。 本代码的测试环境是微软浏览器。

.heart{
        /*设置弹性布局*/
		display: flex;
		margin: 5px 0;
		width: 40px;
		height: 30px;
        /*通过过滤器设置元素内阴影样式*/
		filter: drop-shadow(0 1px 1px #973340a3);
        /*设置元素动画效果*/
		animation: breath 2s ease infinite;
	}

    .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()方法分别旋转两个伪元素就可以了。

左右伪元素

两边伪元素旋转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);
	}

说明：伪元素中添加的动画属性与@keyframes一起使用，可以实现不同的动画效果。 0%表示开始动画，100%表示结束动画。 其实我们还可以在中间设置一个新的关键帧css动效，例如：在 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，好啦，我们简单总结一下这个动画的知识点：