jquery实现打字机式爱情表白场景动画效果代码-html代码-BFW代码库

jquery实现打字机式爱情表白场景动画效果代码

代码语言：html

所属分类：表白

代码描述：jquery实现打字机式爱情表白场景动画效果代码，先吐露真情，然后说出我喜欢你。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html,body{
          margin:0px;
          height:100%;
        }
        .bg_heart{
          position:relative;
          top:0;
          left:0;
          width:100%;
          height:100%;
         overflow:hidden;
          background-image:url("//repo.bfw.wiki/bfwrepo/image/618da05d2c35e.png");
          background-size:100% 100%;
          z-index:-1;
        }
        
        .container{
          position:absolute;
          top:0;
          left:0;
          height:100%;
          width:100%;
          text-align:center;
          color:white;
          font-family:cursive;
        }
        
        
        .heart{
          position:absolute;
          top:-50%;
          transform:rotate(-45deg);
          -webkit-transform:rotate(-45deg);
          -moz-transform:rotate(-45deg);
          -m-transform:rotate(-45deg);
        }
        .heart:before{
          position:absolute;
          top:-50%;
          left:0;
          display:block;
          content:"";
          width:100%;
          height:100%;
          background:inherit;
          border-radius:100%;
        }
        .heart:after{
          position:absolute;
          top:0;
          right:-50%;
          display:block;
          content:"";
          width:100%;
          height:100%;
          background:inherit;
          border-radius:100%;
        }
        
        @keyframes love {
          0%{top:110%}
        }
        @-webkit-keyframes love {
          0%{top:110%}
        }
        @-moz-keyframes love {
          0%{top:110%}
        }
        @-ms-keyframes love {
          0%{top:110%}
        }
    </style>



</head>

<body>
    <html>

    <head>
        <title>love you</title>
    </head>

    <body>


        <div class="bg_heart">
        </div>

        <div class="container">


            <h2 id="text1"></h2>


        </div>

        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
        <script>
            var love = setInterval(function () {
              var r_num = Math.floor(Math.random() * 40) + 1;
              var r_size = Math.floor(Math.random() * 65) + 10;
              var r_left = Math.floor(Math.random() * 100) + 1;
              var r_bg = Math.floor(Math.random() * 25) + 100;
              var r_time = Math.floor(Math.random() * 5) + 5;
              $('.bg_heart').append("<div class='heart' style='width:" + r_size + "px;height:" + r_size + "px;left:" + r_left + "%;background:rgba(255," + (r_bg - 25) + "," + r_bg + &.........完整代码请登录后点击上方下载按钮下载查看