屏幕中的流星效果

具體代碼:

<!--在<template>添加--> <!--流星--><div class="liuxing liuxing1 liuxingFla"></div><div class="liuxing liuxing2 liuxingFla2"></div><div class="liuxing liuxing3 liuxingFla3"></div><div class="liuxing liuxing4 liuxingFla4"></div> /*在<style>中添加*/ /*流星*/ .liuxing{width: 85px;height: 85px;position: absolute;background: url(../../assets/line.png) no-repeat;background-size: contain; } .liuxing1 {top: 200px;left: 200px; } .liuxing2 {top: 200px;left: 50%;margin-left: 200px; } .liuxing3 {top: 100px;right: 300px; } .liuxing4 {top: 150px;right: 300px; } .liuxingFla {animation: liuxing 5s ease-in infinite; } .liuxingFla2 {animation: liuxing2 4s ease-in infinite; } .liuxingFla3 {animation: liuxing3 3s linear infinite; } .liuxingFla4 {animation: liuxing4 2s linear infinite; } /* 流星動畫 */ @keyframes liuxing {0% {transform: translate(200px, -200px)}90% {transform: translate(-180px, 180px);opacity: 1;}100% {transform: translate(-200px, 200px);opacity: 0;} }@keyframes liuxing2 {0% {transform: translate(200px, -200px)}90% {transform: translate(-480px, 480px);opacity: 1;}100% {transform: translate(-500px, 500px);opacity: 0;} }@keyframes liuxing3 {0% {transform: translate(200px, -200px)}90% {transform: translate(-480px, 480px);opacity: 1;}100% {transform: translate(-500px, 500px);opacity: 0;} } @keyframes liuxing4 {0% {transform: translate(200px, -200px)}90% {transform: translate(-180px, 180px);opacity: 1;}100% {transform: translate(-200px, 200px);opacity: 0;} }

圖片素材：

總結

以上是生活随笔為你收集整理的用CSS来实现一些动画在vue中使用之流星滑过（3）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。