双击爱心（可复制源代码）

刘重洋

于 2024-09-10 15:05:43 发布

阅读量308

点赞数 4

分类专栏： Vue.js组件精讲文章标签： css

本文链接：https://blog.csdn.net/lcy1619260/article/details/142099514

版权

Vue.js组件精讲专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果演示

请添加图片描述
源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双击爱心</title>
    <style>
        body{display:flex;justify-content:center;overflow:hidden;margin:0;height:100vh;background:linear-gradient(135deg,#121721,#000)}[type='checkbox']{position:absolute;left:-100vw}[type='checkbox']+label{align-self:center;position:relative;color:darkgrey;font-size:2em;cursor:pointer}[type='checkbox']+label:before,[type='checkbox']+label:after{position:absolute;z-index:-1;top:50%;left:50%;border-radius:50%;animation:inherit;content:''}[type='checkbox']+label:before{margin:-2.25rem;width:4.5rem;height:4.5rem;transform:scale(0);background:currentColor;color:#e2264d}[type='checkbox']+label:after{margin:-0.1875rem;width:0.375rem;height:0.375rem;opacity:.001}[type='checkbox']:checked+label{color:#e2264d;will-change:font-size;animation:heart 1s cubic-bezier(0.17,0.89,0.32,1.49)}[type='checkbox']:checked+label:before{will-change:transform,box-shadow,background-color,color;animation-name:bbubble}[type='checkbox']:checked+label:after{will-change:opacity,box-shadow;animation-name:sbubble;animation-timing-function:ease-out}@keyframes heart{0%,10%{font-size:0}}@keyframes bbubble{20%{transform:scale(1);box-shadow:inset 0 0 1rem currentColor;background-color:currentColor;color:#cc8ef5}25%{background-color:rgba(204,142,245,0)}39%{box-shadow:inset 0 0 0 currentColor}40%,100%{transform:scale(1);box-shadow:none;background-color:rgba(204,142,245,0);color:#cc8ef5}}@keyframes sbubble{20%{opacity:.001}23%{opacity:.999;box-shadow:0.32476rem -2.4375rem 0 0rem #ff8080,-0.32476rem -2.0625rem 0 0rem #ffed80,2.1082rem -1.26585rem 0 0rem #ffed80,1.41004rem -1.53985rem 0 0rem #a4ff80,2.30412rem 0.85901rem 0 0rem #a4ff80,2.08305rem 0.14233rem 0 0rem #80ffc8,0.76499rem 2.33702rem 0 0rem #80ffc8,1.18748rem 1.71734rem 0 0rem #80c8ff,-1.35019rem 2.0552rem 0 0rem #80c8ff,-0.60229rem 1.99916rem 0 0rem #a480ff,-2.44865rem 0.22578rem 0 0rem #a480ff,-1.93852rem 0.77557rem 0 0rem #ff80ed,-1.70323rem -1.77366rem 0 0rem #ff80ed,-1.81501rem -1.03204rem 0 0rem #ff8080}100%{opacity:.999;box-shadow:0.32476rem -3rem 0 -0.1875rem #ff8080,-0.32476rem -2.625rem 0 -0.1875rem #ffed80,2.54798rem -1.61656rem 0 -0.1875rem #ffed80,1.84982rem -1.89057rem 0 -0.1875rem #a4ff80,2.85252rem 0.98418rem 0 -0.1875rem #a4ff80,2.63145rem 0.2675rem 0 -0.1875rem #80ffc8,1.00905rem 2.84381rem 0 -0.1875rem #80ffc8,1.43154rem 2.22414rem 0 -0.1875rem #80c8ff,-1.59425rem 2.562rem 0 -0.1875rem #80c8ff,-0.84635rem 2.50595rem 0 -0.1875rem #a480ff,-2.99705rem 0.35095rem 0 -0.1875rem #a480ff,-2.48692rem 0.90073rem 0 -0.1875rem #ff80ed,-2.14301rem -2.12438rem 0 -0.1875rem #ff80ed,-2.25479rem -1.38275rem 0 -0.1875rem #ff8080}}
    </style>
</head>

<body>
    <input id="toggle" type="checkbox" />
    <label for="toggle">❤</label>
</body>

</html>