效果圖：
light.gif
想用 css+html 實現(xiàn)此效果的(代碼看起來不是很簡潔)，可參考地址http://www.jq22.com/code3026
代碼如下：
<template>
<div class="body">
<div class="light_box">
<div class="light" v-for="(i,index) in 10" :key="index"></div>
</div>
</div>
</template>
<script>
import anime from "animejs/lib/anime.es.js";
export default {
mounted() {
let lights = document.querySelectorAll(".light");
for (let i = 0; i < lights.length; i++) {
anime({
targets: lights[i],
duration: 1000, //動畫時間
scaleY: 1.4,
delay: i * 100,
direction: "alternate",
easing: "linear",
loop: true //執(zhí)行次數(shù) true 為無限次
});
}
}
};
</script>
<style lang="scss" scoped>
.body {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
background: #00091a;
}
.light_box {
width: 100%;
height: 500px;
position: absolute;
top: 0;
left: 50%;
display: flex;
transform-origin: 50% 0;
transform: rotate(20deg);
.light {
flex-grow: 1;
height: 100%;
transform-origin: 50% 0;
filter: blur(75px);
background-image: linear-gradient(
0deg,
transparent,
hsla(100, 100%, 50%, 0.13) 10%,
transparent,
hsla(147, 100%, 50%, 0.48) 40%,
transparent,
hsla(219, 100%, 50%, 0.58) 60%
);
// background-image: linear-gradient(
// 0deg,
// transparent,
// hsla(295, 100%, 50%, 0.13) 10%,
// transparent,
// hsla(288, 100%, 50%, 0.48) 40%,
// transparent,
// hsla(345, 100%, 50%, 0.58) 60%
// );
}
}
</style>
