CSS动画：transition画一个爱心

57 阅读 0 评论 38 点赞

我是靠谱客的博主尊敬小懒虫，最近开发中收集的这篇文章主要介绍CSS动画：transition画一个爱心，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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>

最后展示出来的效果

效果图