造型来源：正方形加两个圆
正方形加上两个圆可以组合成心型
- 圆的直径与正方形的边长相同
- 初始化位置都在中心
- 一个圆左移一个直径单位
- 另一个圆左移一个半径单位，再上移一个直径单位
- 整体顺时针移动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>
效果
