关于前端:火箭上天效果

3次阅读

共计 1626 个字符，预计需要花费 5 分钟才能阅读完成。

代码来自头条号 ” 前端小智 ”, 侵权删

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffeb3b;
    overflow: hidden;
  }
  .pulse{
    position: relative;
    width: 200px;
    height: 200px;
    background-color: red;
    border-radius: 50%;
  }
  span{
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    left: 0;
    top: 0;
    animation: bg 1.5s linear infinite;
  }
  @keyframes bg {
    0%{transform: scale(1);
      opacity: 0.5;
    }
    90%{transform: scale(3);
    }
    100%{transform: scale(3);
      opacity: 0;
    }
  }
  .rocket{
    width: 100px;
    height: 100px;
    position: relative;
    top: 50px;
    left: 50px;
    animation: fly 0.1s ease infinite;
  }
  @keyframes fly{
    0%, 100%{transform: translateY(-1px);
    }
    50% {transform: translateY(1px);
    }
  }
  img{
    width: 100px;
    height: 100px;
  }
  .rocket::before{  /* 火箭尾部的火焰 */
    content: '';
    position: absolute;
    bottom: -250px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 250px;
    background: linear-gradient(#ffc107, transparent);
  }
  .rocket::after{  /* 火箭尾部的火焰, 应用 blur 做了暗影的成果 */
    content: '';
    position: absolute;
    bottom: -250px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 250px;
    background: linear-gradient(#ffc107, transparent);
    filter: blur(20px);
  }
</style>
<body>
  <div class="pulse">
    <span style="--i:1"></span>
    <span style="--i:2"></span>
    <span style="--i:3"></span>
    <span style="--i:4"></span>
    <span style="--i:5"></span>
    <div class="rocket">
      <img src="https://img01.jituwang.com/200310/173754-2003101R95361.jpg" alt="">
    </div>
  </div>
</body>

</html>

正文完