canvas 实现流星雨特效

效果图：

代码：


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}body{background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);height: 100vh;        /* == height: 100%  */overflow: hidden;font-family: 'Times New Roman', Times, serif;justify-content: center;align-items: center;}.container{position: relative;width: 100%;height: 100%;-webkit-transform: rotate(45deg);transform: rotateZ(45deg);-webkit-animation: sky 200000ms linear infinite;animation: sky 200000ms linear infinite;}.meteor{position: absolute;left: 50%;top: 50%;height: 2px;background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));border-radius: 999px;-webkit-filter: drop-shadow(0 0 6px #699bff);filter: drop-shadow(0 0 6px #699bff);-webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;}.meteor::before, .meteor::after{content: '';position: absolute;top: calc(50% - 1px);right: 0;height: 2px;background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0) );-webkit-transform: translateX(50%) rotateZ(45deg);transform: translateX(50%) rotateZ(45deg);border-radius: 100%;-webkit-animation: shining 3000ms ease-in-out infinite;animation: shining 3000ms ease-in-out infinite;}.meteor::after{-webkit-transform: translateX(50%) rotateZ(-45deg);transform: translateX(50%) rotateZ(-45deg);}/* 1 */.meteor:nth-child(1){top: calc(50% - 185px);left: calc(50% - 150px);-webkit-animation-delay: 8888ms;animation-delay: 8888ms;}.meteor:nth-child(1)::before, .meteor:nth-child(1)::after, .meteor:nth-child(1)::after{-webkit-animation-delay: 8888ms;animation-delay: 8888ms;}/* 2 */.meteor:nth-child(2){top: calc(50% - 50px);left: calc(50% - 180px);-webkit-animation-delay: 9288ms;animation-delay: 9288ms;}.meteor:nth-child(2)::before, .meteor:nth-child(2)::after, .meteor:nth-child(2)::after{-webkit-animation-delay: 9288ms;animation-delay: 9288ms;}.meteor:nth-child(3){top: calc(50% - 145px);left: calc(50% - 135px);-webkit-animation-delay: 8600ms;animation-delay: 8600ms;}.meteor:nth-child(3)::before, .meteor:nth-child(3)::after, .meteor:nth-child(3)::after{-webkit-animation-delay: 8600ms;animation-delay: 8600ms;}.meteor:nth-child(4){top: calc(50% - 78px);left: calc(50% - 155px);-webkit-animation-delay: 3288ms;animation-delay: 3288ms;}.meteor:nth-child(4)::before, .meteor:nth-child(4)::after, .meteor:nth-child(4)::after{-webkit-animation-delay: 3288ms;animation-delay: 3288ms;}.meteor:nth-child(5){top: calc(50% - 183px);left: calc(50% - 8px);-webkit-animation-delay: 5588ms;animation-delay: 5588ms;}.meteor:nth-child(5)::before, .meteor:nth-child(5)::after, .meteor:nth-child(5)::after{-webkit-animation-delay: 5588ms;animation-delay: 5588ms;}.meteor:nth-child(6){top: calc(50% - 30px);left: calc(50% - 195px);-webkit-animation-delay: 9388ms;animation-delay: 9388ms;}.meteor:nth-child(6)::before, .meteor:nth-child(6)::after, .meteor:nth-child(6)::after{-webkit-animation-delay: 9388ms;animation-delay: 9388ms;}.meteor:nth-child(7){top: calc(50% - 95px);left: calc(50% - 70px);-webkit-animation-delay: 2588ms;animation-delay: 2588ms;}.meteor:nth-child(7)::before, .meteor:nth-child(7)::after, .meteor:nth-child(7)::after{-webkit-animation-delay: 2588ms;animation-delay: 2588ms;}.meteor:nth-child(8){top: calc(50% - 60px);left: calc(50% - 70px);-webkit-animation-delay: 5288ms;animation-delay: 5288ms;}.meteor:nth-child(8)::before, .meteor:nth-child(8)::after, .meteor:nth-child(8)::after{-webkit-animation-delay: 5288ms;animation-delay: 5288ms;}.meteor:nth-child(9){top: calc(50% - 75px);left: calc(50% - 250px);-webkit-animation-delay: 888ms;animation-delay: 888ms;}.meteor:nth-child(9)::before, .meteor:nth-child(9)::after, .meteor:nth-child(9)::after{-webkit-animation-delay: 888ms;animation-delay: 888ms;}.meteor:nth-child(9){top: calc(50% - 76px);left: calc(50% - 240px);-webkit-animation-delay: 2388ms;animation-delay: 2388ms;}.meteor:nth-child(9)::before, .meteor:nth-child(9)::after, .meteor:nth-child(9)::after{-webkit-animation-delay: 2388ms;animation-delay: 2388ms;}.meteor:nth-child(10){top: calc(50% - 85px);left: calc(50% - 6px);-webkit-animation-delay: 3588ms;animation-delay: 3588ms;}.meteor:nth-child(10)::before, .meteor:nth-child(10)::after, .meteor:nth-child(10)::after{-webkit-animation-delay: 3588ms;animation-delay: 3588ms;}.meteor:nth-child(11){top: calc(50% - 135px);left: calc(50% - 260px);-webkit-animation-delay: 2888ms;animation-delay: 2888ms;}.meteor:nth-child(11)::before, .meteor:nth-child(11)::after, .meteor:nth-child(11)::after{-webkit-animation-delay: 2888ms;animation-delay: 2888ms;}.meteor:nth-child(12){top: calc(50% - 15px);left: calc(50% - 8px);-webkit-animation-delay: 388ms;animation-delay: 388ms;}.meteor:nth-child(12)::before, .meteor:nth-child(12)::after, .meteor:nth-child(12)::after{-webkit-animation-delay: 388ms;animation-delay: 388ms;}.meteor:nth-child(13){top: calc(50% - 155px);left: calc(50% - 50px);-webkit-animation-delay: 7288ms;animation-delay: 7288ms;}.meteor:nth-child(13)::before, .meteor:nth-child(13)::after, .meteor:nth-child(13)::after{-webkit-animation-delay: 7288ms;animation-delay: 7288ms;}.meteor:nth-child(14){top: calc(50% - 28px);left: calc(50% - 80px);-webkit-animation-delay: 8888ms;animation-delay: 8888ms;}.meteor:nth-child(14)::before, .meteor:nth-child(14)::after, .meteor:nth-child(14)::after{-webkit-animation-delay: 8888ms;animation-delay: 8888ms;}.meteor:nth-child(15){top: calc(50% - 35px);left: calc(50% - 200px);-webkit-animation-delay: 7588ms;animation-delay: 7588ms;}.meteor:nth-child(15)::before, .meteor:nth-child(15)::after, .meteor:nth-child(15)::after{-webkit-animation-delay: 7588ms;animation-delay: 7588ms;}.meteor:nth-child(16){top: calc(50% - 40px);left: calc(50% - 250px);-webkit-animation-delay: 1888ms;animation-delay: 1888ms;}.meteor:nth-child(16)::before, .meteor:nth-child(16)::after, .meteor:nth-child(16)::after{-webkit-animation-delay: 1888ms;animation-delay: 1888ms;}@-webkit-keyframes tail{0%{width: 0;}30%{width: 100px;}100%{width: 0;}}@keyframes tail{0%{width: 0;}30%{width: 100px;}100%{width: 0;}}@-webkit-keyframes shining{0%{width: 0;}50%{width: 30px;}1000%{width: 0;}}@keyframes shining{0%{width: 0;}50%{width: 30px;}1000%{width: 0;}}@-webkit-keyframes shooting{0%{-webkit-transform: translateX(0);transform: translateX(0);}100%{-webkit-transform: translateX(300px);transform: translateX(300px);}}@keyframes shooting{0%{-webkit-transform: translateX(0);transform: translateX(0);}100%{-webkit-transform: translateX(300px);transform: translateX(300px);}}@-webkit-keyframes sky{0%{-webkit-transform: rotate(45deg);transform: rotate(45deg);}100%{-webkit-transform: rotate(405deg);transform: rotate(405deg);}}@keyframes sky{0%{-webkit-transform: rotate(45deg);transform: rotate(45deg);}100%{-webkit-transform: rotate(405deg);transform: rotate(405deg);}}</style>
</head>
<body>
<div class="container"><div class="meteor"></div><div class="meteor"></div><div class="meteor"></div><div class="meteor"></div><div class="meteor"></div><div class="meteor"></div><div class="meteor"></div><div class="meteor"></div><div class="meteor"></div><div class="meteor"></div><div class="meteor"></div><div class="meteor"></div><div class="meteor"></div><div class="meteor"></div><div class="meteor"></div><div class="meteor"></div><div class="meteor"></div></div>
</body>
</html>

canvas 实现流星雨特效相关推荐

Canvas流星雨特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
HTML5 canvas生成图片马赛克特效插件
HTML5 canvas生成图片马赛克特效插件简要教程这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...
canvas实现粒子特效
canvas实现粒子特效前言前段时间在学习canvas,实现了一些有趣的功能,最近有时间就把它拿出来分享一下. 成品图思路将这个功能先分析拆解一下: 一张画布上放一个背景图有很多小球在运动 ...
canvas的雨滴特效
canvas的雨滴特效 var canvas = document.querySelector(".rain");//获得类(获得id用#rain)ctx = canvas.get ...
2022圣诞节用canvas实现流星雨
时光过得飞快,不知不觉中,充满期望的2022年就伴随着新年伊始即将临近,感谢陪伴CSDN尔嵘! 前言: 2022圣诞节用 canvas实现流星雨! 正文: 1.效果:
ae制h5文字动画_7款超华丽的HTML5 Canvas文字动画特效
本文作者html5tricks,转载请注明出处文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这时候我们就 ...
html5字体动画效果,7款超华丽的HTML5 Canvas文字动画特效
原标题:7款超华丽的HTML5 Canvas文字动画特效文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这 ...
html酷炫电子时钟效果,逼真的HTML5 canvas模拟时钟特效
插件描述:thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效.该时钟特效使用jQuery和HTML5 Canvas API来制作,模拟现实生活中的时钟.并且它还具有定时闹钟的功 ...
canvas绘制流星雨
偶然看到用canvas绘制流星雨,好好看呀! 遇上一个人,只需擦肩而过的缘分:喜欢一个人,只需一见钟情的瞬间:爱上一个人只需流星划过的刹那: <!DOCTYPE html> <htm ...

canvas 实现流星雨特效

canvas 实现流星雨特效相关推荐

最新文章

热门文章