CSS动画：transition画一个爱心

最新推荐文章于 2024-09-01 09:05:30 发布

锅絮不是我

最新推荐文章于 2024-09-01 09:05:30 发布

阅读量352

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/myx20220713/article/details/126324067

版权

这篇博客介绍了如何利用CSS的Transition属性制作一个爱心绽放的动画效果。通过设置不同的transform属性，如scale和rotate，当鼠标悬停在爱心形状上时，17个小红心会依次放大并旋转，呈现出绽放的视觉效果。CSS代码包括设置爱心的基本样式、过渡时间和变换效果。这是一个关于前端开发，特别是CSS动效的实例教程。

摘要由CSDN通过智能技术生成

CSS中最简单的动画叫做 transition(转变)。通常，当一个元素的样式属性值发生变化时，我们会立即看到页面元素发生变化，也就是页面元素从旧的属性值立即变成新的属性值的效果。Transition(转变)能让页面元素不是立即的、而是慢慢的从一种状态变成另外一种状态，从而表现出一种动画过程。

这些转变效果可以用下列属性来指定：

transition-property – 什么属性将用动画表现，例如, opacity。

transition-duration – 转变过程持续时间。

transition-timing-function – 转变时使用的调速函数(比如, linear、 ease-in 或自定义的 cubic bezier 函数)。

transition – 三种属性的合体简写。

下面来举例

画出爱心，通过绽放来实现

代码

css代码

<style type="text/css">
			.rule{
				width: 300px;
				height: 300px;
				background-color: red;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				top: 600px;
				
			}
			.rule div{
				width: 40px;
				height: 40px;
				background-color: red;
				border-radius: 50%;
				position: absolute;
				top: 0;
				left: 0;
				transition: 1s;
				transform-origin: 150px 150px;
				transform: scale(0);
				
			}
			.rule:hover div:nth-child(1){
				transform: scale(1) rotate(20deg);
			}
			.rule:hover div:nth-child(2){
				transform: scale(2) rotate(40deg);
			}
			.rule:hover div:nth-child(3){
				transform: scale(3) rotate(60deg);
			}
			.rule:hover div:nth-child(4){
				transform: scale(4) rotate(80deg);
			}
			.rule:hover div:nth-child(5){
				transform: scale(5) rotate(100deg);
			}
			.rule:hover div:nth-child(6){
				transform: scale(6) rotate(120deg);
			}
			.rule:hover div:nth-child(7){
				transform: scale(7) rotate(140deg);
			}
			.rule:hover div:nth-child(8){
				transform: scale(8) rotate(160deg);
			}
			.rule:hover div:nth-child(9){
				transform: scale(9) rotate(180deg);
				
				
			}
			.rule:hover div:nth-child(10){
				transform: scale(2) rotate(-40deg);
			}
			.rule:hover div:nth-child(11){
				transform: scale(3) rotate(-60deg);
			}
			.rule:hover div:nth-child(12){
				transform: scale(4) rotate(-80deg);
			}
			.rule:hover div:nth-child(13){
				transform: scale(5) rotate(-100deg);
			}
			.rule:hover div:nth-child(14){
				transform: scale(6) rotate(-120deg);
			}
			.rule:hover div:nth-child(15){
				transform: scale(7) rotate(-140deg);
			}
			.rule:hover div:nth-child(16){
				transform: scale(8) rotate(-160deg);
			}
			.rule:hover div:nth-child(17){
				transform: scale(1) rotate(-20deg);
			}
			
			
			
		</style>

然后是框架，画出盒子即可

html代码

<div class="rule">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>

最后展示出来的效果

效果图