520CSS制作爱心学习记录

爱心的组成

使用CSS画一个爱心首先我们可以把爱心分解成三部分，分别是两个圆，加上一个菱形。再通过他们之间的层叠关系将爱心画出来

三部分的CSS

整个框起来的div

.love {
	width: 500px;
	height: 500px;
/* 	border: 1px solid black; */
	position: relative;	
	left: 500px;	
	opacity: 0;
	}	
	}

两个圆形加一个矩形，两个圆许多属性相同使用群组选择器

.left,.right {
		width: 220px;
		height: 220px;
		background-color: aqua;	
		border-radius: 50%;
		position: absolute;

	}
	.center {
		width: 210px;
		height: 210px;
		background:linear-gradient(-45deg,#f50a45 0%,#d5093c 40%);
		position: absolute;
		transform: rotate(45deg);	
		bottom: 100px;
		left: 145px;
		z-index: 2;

	}

在开始编写的时候三部分使用不同颜色，方便我们进行调整。
在这里值得注意的是
1.将矩形变成菱形 使用的是CSS3中transform变幻属性中的rotate旋转属性45deg表示将矩形旋转45°
2.三部分均使用的是绝对定位（position：absolute），因为在外层有一个div框着三个部分，所以他们都默认出现在外层div的左上角。**
一个元素定位之后会多出四个属性left，right，top，bottom还会多出一个z轴用z-index来实现层叠**
3.为了实现一个爱心的样子，我们先给三个部分设定left，top属性为1px或随意，通过在页面中使用F12检查元素，在选中left top属性在小键盘中上下可以快速调整其值，当调整满意后将页面中显示的值复制进编辑器中再保存即可
3.当调整好位置后我们就应该对颜色进行调整，这一步可以根据个人的喜好进行调整，遵循的原则都是看起来较为自然。要达到自然的效果，使用到CSS3中的渐变属性
线性渐变 linear-gradient()第一个值表示方向第二个便是颜色可以通过百分比设置渐变色尺寸

eg：background:linear-gradient(90deg,#f50a45 0%,#d5093c 40%);

阴影的制作

因为我们要达到的效果是心动的感觉，所以应该使用到阴影的效果让其看起来更为美观

制作阴影使用到的是box-shadow

/* box-shadow 1.左右偏移2.上下偏移3.模糊半径4.阴影的颜色 */
box-shadow: 0 0 40px #d5093c;

选择的阴影颜色是和渐变颜色中的#d5093c一样会显得比较自然。
上下左右偏移都选择为0，模糊半径为40px（阴影的深浅晕围）

动画效果

我们要实现心动的感觉就是让我们画出的“爱心”呈现缩放效果
分析：eg：爱心的整体大小为100px，在动画完成到50%的时候使其大小为200px。最后在动画完成时又回到100px。这样我们的爱心就能呈现心动的感觉
这次我们要使用的是CSS3中的animation(动画)属性。使用这个属性
1.首先我们需要定义animation的name

animation-name:heart

这作为@keyframes 的识别
2.设置当前动画的执行时间，也就是爱心从小到大再变回小一次所使用的时间。在这里显示的效果就为每分钟或每三十秒心跳次数，当值设置约小，心跳越快，每分钟的跳动次数就越多

animation-duration:0.9s

3.规定动画的速度曲线，也就是能够设置该动画是否是匀速完成，还是一开始快然后加速等等。常用的属性linear:动画从头到尾的速度是相同的。// 默认。动画以低速开始，然后加快，在结束前变慢。
我们使用的是linear

animation-timing-function:linear

4.设置动画执行的次数。使用到animation-iteartion-count,infinte即是无限的意思，如果添上具体的数值则按照次数执行完成后停止动画执行。

animation-iteration-count:infinite

执行动画

当我们将动画属性写好之后就该让动画执行。

我们要是使用的是CSS3的@keyframes规则，使用他和animation-name关联后将动画执行直接上代码

/* 执行动画 定义关键帧动画*/
	@keyframes heart{
		/* 初始状态--》变大--》变回原形 */
		0% {
			/* 调整元素 缩放 transform变幻属性 scale缩放属性 */
			transform: scale(1) rotate(45deg);
			/* 外层阴影也有放大效果 */
			/* box-shadow 1.左右偏移2.上下偏移3.模糊半径4.阴影的颜色 */
			box-shadow: 0 0 40px #d5093c;
			}
		/* 运行到一半时 放大 */
	
		50% {
			/* 元素放大1.2倍 */
			transform: scale(1.2) rotate(45deg);
			box-shadow: 0 0 80px #d5093c;
		}
		/* 结束状态 */
		100% {	
			transform: scale(1) rotate(45deg);
			box-shadow: 0 0 40px #d5093c;
		}
		
	}

1.首先我们先将我们的想法转变成代码，让爱心缩放，我们使用的依旧是transform（变幻）属性，但是我们用到的属性是scale（）将放大倍数传进去即可实现元素的缩放。注意当我们在这里设置完scale（）之后测试发现之前我们通过旋转矩形得到的菱形又变成了矩形。所以我们这里需要在transform属性中再天上rotate旋转的属性，依旧是使用45°。
2.我们这时就可以将阴影的代码加入到效果中，在爱心最大的时候我们设置阴影的模糊半径也跟随变大会让爱心变得自然。

至此我们的代码就完成了。成功用CSS完成了一个爱心的制作，祝福520快乐！
[1]: https://www.w3school.com.cn/cssref/pr_keyframes.asp
[2]:https://www.w3school.com.cn/cssref/pr_animation.asp