js和css实现带泡泡音效的我爱你爱情表白文字动画效果代码-html代码-BFW代码库

js和css实现带泡泡音效的我爱你爱情表白文字动画效果代码

代码语言：html

所属分类：表白

代码描述：js和css实现带泡泡音效的我爱你爱情表白文字动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        *, *:before, *:after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
        
        html, body {
          min-height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #FFC568;
          font-size: 62.5%;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
        @media screen and (max-width: 520px) {
          html, body {
            /* don't know how to set default units to rem in mojs :(( */
          }
        }
        
        .container {
          width: 50rem;
          height: 20rem;
          position: relative;
        }
        
        .svg-container {
          z-index: 2;
          position: absolute;
        }
        
        .mo-container {
          width: 100%;
          height: 100%;
        }
        
        .line {
          fill: none;
          stroke: #FFFFFF;
          stroke-width: 8;
          stroke-linecap: round;
          stroke-miterlimit: 10;
        }
        
        .lttr {
          fill: #763C8C;
        }
        
        .sound {
          position: fixed;
          color: #763C8C;
          font-size: 1.6rem;
          bottom: 1rem;
          right: 1rem;
          text-decoration: underline;
          cursor: default;
        }
        .sound--off {
          text-decoration: line-through;
        }
    </style>



</head>

<body>
    <div class="container">
        <svg class="svg-container" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200">
    <line class="line line--left" x1="10" y1="17" x2="10" y2="183"> </line>
    <line class="line line--rght" x1="490" y1="17" x2="490" y2="183"> </line>
    <g>
      <path class="lttr lttr--I" d="M42.2,73.9h11.4v52.1H42.2V73.9z"></path>
      <path class="lttr lttr--L" d="M85.1,73.9h11.4v42.1h22.8v10H85.1V73.9z"></path>
      <path class="lttr lttr--O" d="M123.9,100c0-15.2,11.7-26.9,27.2-26.9s27.2,11.7,27.2,26.9s-11.7,26.9-27.2,26.9S123.9,115.2,123.9,100zM166.9,100c0-9.2-6.8-16.5-15.8-16.5c-.........完整代码请登录后点击上方下载按钮下载查看