持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

效果图

实现思路

设置一个版心，搞一个大盒子，大盒子是信封的样子，然后通过无序列表实现心和漂浮的心，最后在通过动画的方式，心得跳动

排版样式

  <div id="app">
        <!-- 信封盒子 -->
        <div class="envelope">
        </div>
        <!-- 爱心 -->
        <ul class="heart">
            <li></li>
            <!-- 漂浮的爱心 -->
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

信封

通过给盒子的宽高，用边框描述出来盒子的样子，最后通过伪元素结合定位的方式，实现信封的样式

    .envelope {
            position: relative;
            width: 400px;
            height: 200px;
            border: 10px solid #e76978;
            overflow: hidden;
        }

然后给伪元素宽和高，设置一个直角边框

在通过旋转属性实现信封的大致样式，信封需要俩个三角形，然后旋转到对应的角度在通过定位实现

这里要注意的是，上面直角的伪元素需要设置背景色，如果不设置背景色就会透过去

/* 边框 */

        .envelope::after,
        .envelope::before {
            content: '';
            width: 280px;
            height: 280px;
            border-top: 10px solid #e76978;
            border-right: 10px solid #e76978;
            position: absolute;
        }
        
        .envelope::after {
            transform: rotate(135deg);
            top: -148px;
            left: 53px;
            background: #fff;
        }
        
        .envelope::before {
            transform: rotate(-45deg);
            bottom: -148px;
            left: 53px;
        }

爱心的实现

接下来我们来实现爱心，爱心其实很简单,我们给ul一个宽高，给一个颜色大致样式在结合定位的方式放到信封的正中间

现在开始画爱心，首先我们通过旋转属性旋转到一个合适的角度，在通过给伪元素给设置一个宽和高，我们这里宽和高是继承父级的，然后在通过定位的方式，定位到俩侧就可以了，最后需要在给个边框阴影显得更像一些

        .heart,
        .heart>li {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50px;
            height: 50px;
            background: #ff1414;
            z-index: 10;
        }
        
        .heart {
            transform: translate(-50%, -50%) rotate(45deg);
            box-shadow: 0 0 15px #ff1414;
            cursor: pointer;
        }
 
        /* 左爱心 */
        
        .heart>li::before,
        .heart:before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-color: #ff1414;
            transform: translateY(-50%);
            border-radius: 50%;
        }
        /* 右爱心 */
        
        .heart>li::after,
        .heart:after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-color: #ff1414;
            transform: translateX(-50%);
            border-radius: 50%;
        }
        /* 爱心 End */

然后我们在通过动画结合css属性的方式实现，心会跳动的样子

   @keyframes beatHeart {
            0% {
                transform: translate(-50%, -50%) scale(1);
            }
            30% {
                transform: translate(-50%, -50%) scale(1.2);
            }
            50% {
                transform: translate(-50%, -50%) scale(1.5);
            }
            70% {
                transform: translate(-50%, -50%) scale(1.2);
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
            }
        }

最后实现漂浮的动画，这里漂浮的动画，我们采用了定位的方式进行实现

、 /* 漂浮动画 */
        
        @keyframes beatHeart1 {
            from {
                top: -20px;
                left: 0;
                transform: scale(0.25) rotate(45deg);
                opacity: 1;
            }
            to {
                top: -200px;
                left: 0;
                transform: scale(1) rotate(50deg);
                opacity: 0;
            }
        }
        
        @keyframes beatHeart2 {
            from {
                top: -10px;
                left: -10px;
                transform: scale(0.25) rotate(-20deg);
                opacity: 0.2;
            }
            to {
                top: -200px;
                left: 10px;
                transform: scale(1) rotate(45deg);
                opacity: 0;
            }
        }
        
        @keyframes beatHeart3 {
            from {
                top: -10px;
                left: 10px;
                transform: scale(0.25) rotate(20deg);
                opacity: 0.2;
            }
            to {
                top: -200px;
                left: -100px;
                transform: scale(1) rotate(60deg);
                opacity: 0;
            }
        }
        
        @keyframes beatHeart4 {
            from {
                top: -20px;
                left: -10px;
                transform: scale(0.25) rotate(45deg);
                opacity: 0.2;
            }
            to {
                top: -200px;
                left: -10px;
                transform: scale(1) rotate(80deg);
                opacity: 0;
            }
        }

最后动画结合鼠标滑过的属性，完美实现出一个鼠标滑过跳动的心