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