js实现爱心跳动重影表白动画效果代码

代码语言:html

所属分类:表白

代码描述:js实现爱心跳动重影表白动画效果代码

代码标签: 跳动 重影 表白 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          overflow: hidden;
          display: grid;
          place-items: center;
          height: 100vh;
          background: #57008a;
        }
        
        h1 {
          font-size: 12vw;
          font-weight: 400;
          color: #fff0;
          display: flex;
          width: 90%;
        }
        
        span {
          flex-basis: 100%;
        }
        
        span:not(.ws) {
          display: inline-block;
        }
    </style>


</head>

<body>
    <h1><span>❤</span><span>❤</span><span>❤</span><span>❤</span><span>❤</span><span>❤</span><span>❤</span><span>❤</span></h1>



    <script>
        NodeList.prototype.animate = function (keyframes, options) {
          this.forEach((el, i) => {
            let delay = options.delay;
            if (options.stagger) delay = options.delay + options.stagger * i;
            el.animate(keyframes, {
         .........完整代码请登录后点击上方下载按钮下载查看

网友评论0