会跳动的心♥

一  制作过程

1.  先采用HTML与CSS拼接心形

        

         

     2.  采用CSS3让心跳动起来

二  代码

  HTML代码

<div class="heart"></div>

   CSS代码

  * {
            padding: 0;
            margin: 0;
        }

        /* 父级元素没有设置宽高，没法居中
        让容器的宽度和高度充满全屏 */
        html,
        body {
            width: 100%;
            height: 100%;
        }

        body {
            background-color: pink;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .heart {
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            transform: rotate(45deg);
            animation: beat 1s linear infinite;
            box-shadow: 0 0 30px red;
        }

        .heart::before {
            content: '';
            width: 200px;
            height: 100px;
            background-color: red;
            /* 到此处为止没有任何内容效果 需要添加绝对定位 */
            position: absolute;
            top: -99px;
            border-radius: 100px 100px 0 0;
            box-shadow: 0 0 30px red;

        }

        .heart::after {
            content: '';
            width: 100px;
            height: 200px;
            background-color: red;
            /* 到此处为止没有任何内容效果 需要添加绝对定位 */
            position: absolute;
            left: -99px;
            border-radius: 100px 0 0 100px;
            box-shadow: 0 0 30px red;

        }

        /* 添加动画，让心跳动 */
        @keyframes beat {
            0% {
                transform: rotate(45deg) scale(0.3);
            }

            100% {
                transform: rotate(45deg) scale(1.3);
            }
        }

三 总结

1.     让容器的宽度和高度充满全屏 

        html,

        body {

            width: 100%;

            height: 100%;

}

    2. 为什么元素中已经添加了旋转角度，动画时还需要添加旋转角度

        

如果在元素上已经应用了旋转角度（使用transform: rotate();），那么在添加动画时旋转效果可能会失效，这是因为两个属性的作用发生了冲突。

transform: rotate();是用于添加元素的旋转效果的属性，它会对元素进行全局的旋转操作，并且旋转的角度会覆盖之前的任何旋转效果。

而animation: 属性名 动画名 延迟 周期 方向 缓动函数等属性;是用于给元素添加动画效果的属性，它会将元素的旋转效果作为一个动画进行处理，并应用缓动函数等属性来实现动画效果。

因此，如果已经应用了transform: rotate();属性，再添加动画效果时，旋转角度的旋转效果可能会覆盖动画效果的旋转效果，导致动画效果失效。