js实现canvas开炮发射烟花绽放动画效果代码-html代码-BFW代码库

js实现canvas开炮发射烟花绽放动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas开炮发射烟花绽放动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
          background: #212121;
          margin: 0;
          overflow: hidden;
        }
        
        @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
        @keyframes chill {
          from {
            opacity: 1;
          }
          to {
            opacity: 1;
          }
        }
        @keyframes fadeOut {
          from {
            opacity: 1;
          }
          to {
            opacity: 0;
          }
        }
        p {
          position: absolute;
          top: 10px;
          left: 12px;
          color: white;
          opacity: 0;
          font-family: "Source Sans Pro";
          animation: fadeIn 2s ease-out, chill 2s 2s, fadeOut 2s 4s;
        }
        
        .twitter:hover a {
          transform: rotate(-45deg) scale(1.05);
        }
        .twitter:hover i {
          color: #21c2ff;
        }
        .twitter a {
          bottom: -40px;
          right: -75px;
          transform: rotate(-45deg);
        }
        .twitter i {
          bottom: 7px;
          right: 7px;
          color: #00ACED;
        }
        
        .social-icon a {
          position: absolute;
          background: white;
          color: white;
          box-shadow: -1px -1px 20px 0px rgba(0, 0, 0, 0.3);
          display: inline-block;
          width: 150px;
          height: 80px;
          transform-origin: 50% 50%;
          transition: 0.15s ease-out;
        }
        .social-icon i {
          position: absolute;
          pointer-events: none;
          z-index: 1000;
          transition: 0.15s ease-out;
        }
        
        .youtube:hover a {
          transform: rotate(45deg) scale(1.05);
        }
        .youtube:hover i {
          color: #ec4c44;
        }
        .youtube a {
          bottom: -40px;
          left: -75px;
          transform: rotate(45d.........完整代码请登录后点击上方下载按钮下载查看