css实现流星划过动画

2,514 阅读4分钟

背景

👏渐变+伪元素实现流星,translateY实现划过动画,速速来Get吧~

🥇文末分享源代码。记得点赞+关注+收藏!

1.实现效果

在这里插入图片描述

2.实现原理

translateY()

translateY() 在页面垂直移动元素。 translateY(ty) 对应 translate(0, ty) 或translate3d(0, ty, 0)。

rotate()

rotate() 函数定义了一种将元素围绕一个定点(由transform-origin属性指定)旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正,则顺时针方向旋转,否则逆时针方向旋转。旋转 180° 也被称为点反射。

在这里插入图片描述

background-position

CSS 属性为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。

在这里插入图片描述

3.实现步骤

3.1 实现一个流星

  • linear-gradient渐变实现尾迹,由下到上进行渐变,可以得到如下的矩形
width: 5px;
height: 85px;
background: linear-gradient(0deg, orange 0, red 100%);

在这里插入图片描述

  • 试着将红色改为透明底色,可以得到如下的矩形
background: linear-gradient(0deg, orange 0, transparent 100%);

在这里插入图片描述

  • 在此标签上添加伪元素,实现流星的头部
content: "";
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: orange;
filter: blur(1.8px);
bottom: -6px;
left: 50%;
transform: translate(-50%);

在这里插入图片描述

  • rotate旋转45deg
transform: rotate(45deg);

在这里插入图片描述

3.2 实现多个流星

!注意:以下代码基于vue

  • 页面存在多个流星,位置不同 ,颜色不同,可定义一个流星列表,属性包括颜色,位置,以及动画延迟delay时间等,通过css的var变量实现样式的绑定。
  • 列表如下:c1和c2表示渐变的两个色值,l表示left距离,r表示right距离,d表示动画延迟时间
lineList: [
 {
     c1: "#69E4F6",
     c2: "#69e4f600",
     l: "0px",
     d: 3,
   },
   {
     c1: "#FED258",
     c2: "rgba(254,210,88,0)",
     l: "60px",
     d: 5,
   },
   {
     c1: "#FED258",
     c2: "rgba(254,210,88,0)",
     r: "72px",
     d: 2,
   },
   {
     c1: "#69E4F6",
     c2: "#69e4f600",
     r: "30px",
     d: 0,
   },
   {
     c1: "#69E4F6",
     c2: "#69e4f600",
     r: "41px",
     d: 1,
   },
   {
     c1: "#69E4F6",
     c2: "#69e4f600",
     l: "105px",
     d: 4,
   },
   {
     c1: "#FED258",
     c2: "rgba(254,210,88,0)",
     l: "30px",
     d: 2,
   },
   {
     c1: "#FED258",
     c2: "rgba(254,210,88,0)",
     r: "111px",
     d: 5,
   },
   {
     c1: "#69E4F6",
     c2: "#69e4f600",
     r: "2px",
     d: 3,
   },
 ],
  • 在行内样式中,写入参数
 <div class="line-box">
   <span
      class="line-item"
      v-for="(item,index) in lineList"
      :key="index"
      :style="{
              '--c1':item.c1,
              '--c2':item.c2,
              '--l':item.l,
              '--d':item.d,
              '--r':item.r
          }"
    ></span>
  </div>
  • 线条的样式对应到var定义的变量上
.line-item {
  width: 2px;
  height: 33px;
  background: linear-gradient(0deg, var(--c1) 0%, var(--c2) 100%);
  position: absolute;
  top: 0;
  transform: rotate(45deg);
  left: var(--l);
  right: var(--r);
}

.line-item::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c1);
  filter: blur(1.8px);
  box-shadow: 0px -1px -1px 5px var(--c2);
  bottom: -4px;
  left: 50%;
  transform: translate(-50%);
}
  • 按照上述内容,实现的效果如下

在这里插入图片描述

3.3 添加划过动画

  • 所有流星默认透明度为0,不展示,若不设置为0,动画带来的延迟将会直接显示该线条,非常突兀
.line-item{
	+ opacity: 0;
}
  • 手动设置translateY的大小,观察流星的位置变化 在这里插入图片描述
  • 通过调试,写一个合适的动画(具体数值,需根据实际情况而定)
@keyframes shank {
  0% {
    transform: rotate(45deg) translateY(-100px) scale(0.5);
    opacity: 0;
  }

  70% {
    opacity: 1;
    transform: rotate(45deg) translateY(100px) scale(1.1);
  }

  100% {
    transform: rotate(45deg) translateY(220px) scale(0.5);
    opacity: 0;
  }
}
  • 给每个流星线条添加动画以及延迟,通过延迟使其有一定的视觉差
.line-item{
	+ animation: shank 2s linear infinite;
	+ animation-delay: calc(var(--d) * 0.2s);
}

在这里插入图片描述

  • 流星总体偏左,不够协调,可以改变其初始位置,(left或者right),或者直接在其位置上添加一定的偏移量,使其更加的和谐
.line-item{
    - left: var(--l);
    - right: var(--r);
    + left: calc(var(--l) + 70px);
    + right: calc(var(--r) - 70px);
}

在这里插入图片描述

3.4 页面添加背景并设置动画

  • 添加背景
  • 给背景设置一个background-position的动画
.container::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background: url(./img/earth.jpg) no-repeat;
   background-size: cover;
   animation: ping 4s infinite linear alternate-reverse;
 }
 @keyframes ping {
   100% {
     background-position: 100%;
   }
 }

4.实现代码

  • 样式代码
.container {
   box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
   border-radius: 20px;
   padding: 40px;
   position: relative;
   width: 350px;
   height: 260px;
   overflow: hidden;
 }
 .container::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background: url(./img/earth.jpg) no-repeat;
   background-size: cover;
   animation: ping 4s infinite linear alternate-reverse;
 }
 @keyframes ping {
   100% {
     background-position: 100%;
   }
 }
 .line-box {
   width: 100%;
   height: 100%;
   position: relative;
 }

 .line-item {
   width: 2px;
   height: 33px;
   background: linear-gradient(0deg, var(--c1) 0%, var(--c2) 100%);
   position: absolute;
   top: 0;
   transform: rotate(45deg);
   left: calc(var(--l) + 70px);
   right: calc(var(--r) - 70px);
   opacity: 0;
   animation: shank 2s linear infinite;
   animation-delay: calc(var(--d) * 0.2s);
 }

 .line-item::after {
   content: "";
   position: absolute;
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--c1);
   filter: blur(1.8px);
   box-shadow: 0px -1px -1px 5px var(--c2);
   bottom: -4px;
   left: 50%;
   transform: translate(-50%);
 }

 @keyframes shank {
   0% {
     transform: rotate(45deg) translateY(-100px) scale(0.5);
     opacity: 0;
   }

   70% {
     opacity: 1;
     transform: rotate(45deg) translateY(100px) scale(1.1);
   }

   100% {
     transform: rotate(45deg) translateY(220px) scale(0.5);
     opacity: 0;
   }
 }
  • 页面代码
<div class="container" >
    <div class="line-box">
     <span
       class="line-item"
       v-for="(item,index) in lineList"
       :key="index"
       :style="{
               '--c1':item.c1,
               '--c2':item.c2,
               '--w':item.w,
               '--h':item.h,
               '--l':item.l,
               '--d':item.d,
               '--r':item.r
           }"
     ></span>
    </div>
 </div>
  • lineList代码如3.2章节所示

5.在线预览

6.写在最后🍒

看完本文如果觉得对你有一丢丢帮助,记得点赞+关注+收藏鸭 🍕
更多相关内容,关注🍥苏苏的bug,🍡苏苏的github,🍪苏苏的码云~