<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>520</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: pink;
}
.box {
width: 150px;
height: 150px;
background: #ff0000;
margin: 200px auto;
margin-bottom: 80px;
/* 盒子旋转45度 */
transform: rotate(45deg) scale(0.9);
/* 绑定动画 */
animation: change 1s infinite;
box-shadow: 0 0 30px 5px rgba(255, 0, 0, 0.7);
}
.box::after,
.box::before {
content: "";
position: absolute;
width: 150px;
height: 150px;
background: #ff0000;
/* 让插入的两个边框变成圆角 */
border-radius: 50%;
/* 给盒子设置阴影效果 */
box-shadow: 0 0 30px 5px rgba(255, 0, 0, 0.7);
}
.box::after {
/* 让这个盒子向左偏移68px */
left: -68px;
}
.box::before {
/* 让这个盒子向上偏移68px */
top: -68px;
}
/* 创建动画 */
/* 要让爱心动起来其实很简单,只需要变形-缩放 */
@keyframes change {
0% {
transform: rotate(45deg) scale(0.85);
}
50% {
transform: rotate(45deg) scale(1);
}
100% {
transform: rotate(45deg) scale(0.85);
}
}
p {
text-align: center;
font-size: 30px;
font-weight: 520;
color: rgba(255, 0, 0, 0.5);
/* 文字阴影 */
text-shadow: 0 0 2px rgba(255, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="box"></div>
<p>若你脆弱不堪,我愿将弱点向你暴露无遗</p>
<p>若你假装坚强,我愿将你的柔软轻拥怀中</p>
</body>
</html>
效果展示: