css_跳动的心制作过程...带上旋转45度，缩放0.5->0.transform: rotate(45deg) sca

css动画与样式叠加的应用

造型来源：正方形加两个圆

正方形加上两个圆可以组合成心型
在这里插入图片描述

圆的直径与正方形的边长相同
初始化位置都在中心
一个圆左移一个直径单位
另一个圆左移一个半径单位，再上移一个直径单位
整体顺时针移动45度

编写css

css样式的内外边框调整为0

内外边框为0和内容居中

			*{
				padding:0;
				margin:0;
			}
			body{
				width:100vw;
				height:100vh;
				background: #ffffff;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
			}

正方形css

边长200px

			.heart{
				width:200px;
				height:200px;
				position: absolute;
				border-style:solid;
				border-color:pink;
				opacity: 1;
			}

圆的css样式（伪类）

小圆1号（伪类before）

使用伪类css来自200px的正方形，调整圆角为圆形，左移一个直径

			/* 伪类创建 */
			.heart::before{
				content:'';
				width:200px;
				height:200px;
				border-style:solid;
				border-color:pink;
				border-radius: 100%;
				opacity: 1;
				position: absolute;
				transform: translateX(-200px);
			}

小圆2号（伪类after）

使用伪类css来自200px的正方形，调整圆角为圆形，左移一个半径，上移一个直径

			/* 伪类创建 */
			.heart::after{
				content:'';
				width:200px;
				height:200px;
				border-style:solid;
				border-color:pink;
				border-radius: 100%;
				opacity: 1;
				position: absolute;
				transform: translate(-100px,-100px);
			}

在这里插入图片描述
旋转45度

在这里插入图片描述

旋转45度统一颜色

去掉边框颜色，填充背景为粉色

在这里插入图片描述

动画

背景颜色变化

白色到粉色的变化

			@keyframes backdiv {
			  50% {
			    background: #ffe6f2;
			  }
			}

图案的循环缩放

带上旋转45度，缩放0.5->0.8

			@keyframes change{
				0%{
					transform: rotate(45deg) scale(0.5);
				}
				50%{
					transform: rotate(45deg) scale(0.8);
				}
				100%{
					transform: rotate(45deg) scale(0.5);
				}
			}

整体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>heart</title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			body{
				width:100vw;
				height:100vh;
				background: #ffffff;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				animation-name:backdiv;
				animation-duration: 2s;
				animation-iteration-count: infinite;
			}
			.heart{
				width:200px;
				height:200px;
				position: absolute;
				background: pink;
				transform: rotate(45deg);
				animation-name:change;
				animation-duration: 2s;
				animation-iteration-count: infinite;
			}
			/* 伪类创建 */
			.heart::before{
				content:'';
				width:200px;
				height:200px;
				background: pink;
				border-radius: 50%;
				position: absolute;
				/* 定位 */
				transform: translateX(-200px);
			}
			.heart::after{
				content:'';
				width:200px;
				height:200px;
				background: pink;
				border-radius: 50%;
				position: absolute;
				/* 定位 */
				transform: translate(-100px,-100px);
				/* transform: translateX(-100px); */
			}
			@keyframes change{
				0%{
					transform: rotate(45deg) scale(0.5);
				}
				50%{
					transform: rotate(45deg) scale(0.8);
				}
				100%{
					transform: rotate(45deg) scale(0.5);
				}
			}
			@keyframes backdiv {
			  50% {
			    background: #ffe6f2;
			  }
			}
		</style>
	</head>
	<body>
		<div class='heart'> </div>
	</body>
</html>

效果

在这里插入图片描述