css之心形动画

css之心形动画

1.伪类元素的使用

渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入

    .box::before,
        .box::after{
            width:100px;
            height: 100px;
            background: red;
            position: absolute;
            content: "";
            border-radius: 50%;
        }

2.@keyframes添加动画

0％是开头动画，100％是当动画完成。

        @keyframes love {
            0%{
                transform: rotate(45deg) scale(0.85);
            }
            50%{
                transform: rotate(45deg) scale(1);
            }
            100%{
                transform: rotate(45deg) scale(1);
            }
        }

3.transform 的两个属性

scale 缩放变大

rotate 旋转

4.动画的调用

infinite：循环

     animation: love 1s  infinite ;