Jelly love

1. Love

2. Jelly

In terms of love

Juejin. Cn/post / 702628…

A beating heart in my previous blog

So let’s cut to the chase. Jelly

Jelly effects

A little Duang Duang Duang special effect

Go straight to code


    <style>
        .heart {
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: pink;
            height: 100px;
            width: 100px;
            transform: rotate(-45deg);
        }

        .heart:after,
        .heart:before {
            background-color: pink;
            content: "";
            border-radius: 50%;
            position: absolute;
            width: 100px;
            height: 100px;
            top: 0px;
            left: 50px;
        }

        .heart:before {
            top: -50px;
            left: 0px;
        }

        button {
            z-index: 1;
            border: none;
        }

        button:hover {
            cursor: pointer; // Cursor changeanimation: jelly 0.5 s;
        }

        @keyframes jelly {

            0%.100% {
                transform: scale(1.1) rotate(-45deg); Rotate rotate rotate rotate rotate rotate25%.75% {
                transform: scale(0.9.1.1) rotate(-45deg);
            }

            50% {
                transform: scale(1.1.0.9) rotate(-45deg); }}body {
            width: 100vw;
            height: 100vw;
            overflow: hidden;
            background-image: linear-gradient(to bottom, rgb(234.124.240), rgb(23.221.40));
        }
    </style>
Copy the code

html

<body>
    <button class="heart"></button>
</body>
Copy the code

Another day of CSS animation practice.