火箭上天效果

時間 2021-04-24

標籤 html 前端 flex spa code orm htm rem 欄目 HTML 简体版

原文原文鏈接

代碼來自頭條號"前端小智",侵權刪html

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。