Fork me on GitHub

用原生CSS编写-怦怦跳的心 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>怦怦跳爱心</title>
        <link rel="stylesheet" type="text/css" href="index.css"/>
    </head>
    <body>
        <label>
            <input type="checkbox" />
            <svg viewBox="0 0 532 532">
            <path id="heart" transform="translate(10, 10)" d="M256,96.5l-19.7-20.3C186.1,24.3,104.5,15.9,49.7,62.6c-62.8,53.6-66.1,149.8-9.9,207.9l193.5,199.8 c12.5,12.9,32.8,12.9,45.3,0l193.5-199.8c56.3-58.1,53-154.3-9.8-207.9l0,0C407.5,15.9,326,24.3,275.7,76.2L256,96.5z"/>
            </svg>
            <span></span>
        </label>
    </body>
</html>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    transform: scale(1.0);
}

svg {
    width: 200px;
    position: relative;
    z-index: 10;
}

#heart {
    fill: #eee;
    stroke-width: 20px;
    stroke: red;
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    stroke-linecap: round;
}

span, span::after {
    display: block;
    width: 24px;
    height: 24px;
    background-color: transparent;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    
    box-shadow: 0 -160px 0 red, 0 160px 0 red, -160px 0 0 red, 160px 0 0 red;
}

span::after {
    content: '';
    transform: translate(-50%, -50%) scale(0) rotate(45deg);
}

input[type="checkbox"] {
    display: none;
}

label {
    cursor: pointer;
}

input[type="checkbox"]:checked + svg #heart {
    animation: 1s draw-heart linear forwards ;
}

@keyframes draw-heart {
    0% {
        stroke-dashoffset: 1600;
    }
    80% {
        stroke-dashoffset: 0;
        fill: #eee;
    }
    100% {
        fill: red;
        stroke-dashoffset: 0;
    }
}

input[type="checkbox"]:checked ~span {
    animation: .5s blink ease-in-out forwards .85s;
}

input[type="checkbox"]:checked ~span::after {
    animation: .5s blink-after ease-in-out forwards .85s;
}

@keyframes blink {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: .8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: .8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0;
    }
}

@keyframes blink-after {
    0% {
        transform: translate(-50%, -50%) rotate(45deg) scale(0.5);
        opacity: .8;
    }
    50% {
        transform: translate(-50%, -50%) rotate(45deg) scale(1);
        opacity: .8;
    }
    100% {
        transform: translate(-50%, -50%) rotate(45deg) scale(1.1);
        opacity: 0;
    }
}

input[type="checkbox"]:checked + svg {
  animation: 1s pop linear forwards;    
}

@keyframes pop {
    0% {
        transform: scale(1);
    }
    70% {
        transform: scale(1);
    }
    80% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

效果图:

 

posted @ 2021-03-10 17:52  ༺Tu༒aimes༻  阅读(42)  评论(1)  编辑  收藏  举报