css动画与样式叠加的应用
造型来源：正方形加两个圆编写csscss样式的内外边框调整为0正方形css圆的css样式（伪类）小圆1号（伪类before）小圆2号（伪类after）旋转45度统一颜色动画背景颜色变化图案的循环缩放整体代码效果造型来源：正方形加两个圆
正方形加上两个圆可以组合成心型
圆的直径与正方形的边长相同初始化位置都在中心一个圆左移一个直径单位另一个圆左移一个半径单位，再上移一个直径单位整体顺时针移动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>
