前言
全世界都充满了恋爱的酸臭,只有我散着着单身狗的清香。。。
❤的实现
实现思路如下:
首先我们准备一个正方形,在正方形内有两个圆分别往左侧以及上侧进行一定位置的偏移。
在对正方形及圆进行颜色的填充后,将整个元素旋转45°。
图例:
最后为了效果看起来更好,我们可以为元素设置阴影及缩放的动画,使其看起来像是在扑通扑通的跳
代码如下
HTML
<div class="box"></div>
<p>I Love You Forever</p>
CSS
.box {
width: 120px;
height: 120px;
background: #ff0000;
transform: rotate(45deg) scale(0.85);
margin: 200px auto;
animation: love 1s infinite;
margin-bottom: 80px;
box-shadow: 0 0 20px rgba(255, 0, 0, 0.7);
}
.box::before,
.box::after {
content: '';
position: absolute;
width: 120px;
height: 120px;
background: #ff0000;
border-radius: 50%;
box-shadow: 0 0 20px rgba(255, 0, 0, 0.7);
}
.box::before {
left: -68px;
}
.box::after {
top: -68px;
}
p {
text-align: center;
font-size: 30px;
font-weight: bold;
color: rgba(255, 0, 0, 0.5);
}
@keyframes love {
0% {
transform: rotate(45deg) scale(0.85);
}
50% {
transform: rotate(45deg) scale(1);
}
100% {
transform: rotate(45deg) scale(0.85);
}
}