【❤——七夕限定】

440 阅读1分钟

前言

全世界都充满了恋爱的酸臭,只有我散着着单身狗的清香。。。

❤的实现

实现思路如下:
首先我们准备一个正方形,在正方形内有两个圆分别往左侧以及上侧进行一定位置的偏移。
在对正方形及圆进行颜色的填充后,将整个元素旋转45°。
图例:

1.png

2.png

最后为了效果看起来更好,我们可以为元素设置阴影及缩放的动画,使其看起来像是在扑通扑通的跳

代码如下

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);
    }
}

最终效果如下:

GIF 2021-8-17 0-04-10.gif