JS+CSS+SVG实现动态星空背景

效果图：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>twinkle</title><style>:root {--twinkle-duration: 4s;}.stars-wrapper {background: -webkit-gradient(linear, left top, left bottom, from(#16161d), color-stop(#1f1f3a), to(#3b2f4a));background: linear-gradient(#16161d, #1f1f3a, #3b2f4a);overflow: hidden;height: 100vh;}.stars0,.stars1,.stars2 {position: absolute;top: 0;left: 0;right: 0;bottom: 0;-webkit-animation: twinkle var(--twinkle-duration) ease-in-out infinite;animation: twinkle var(--twinkle-duration) ease-in-out infinite;}.stars0 {-webkit-animation-delay: calc(var(--twinkle-duration) * -0.22);animation-delay: calc(var(--twinkle-duration) * -0.22);}.stars1 {-webkit-animation-delay: calc(var(--twinkle-duration) * -0.44);animation-delay: calc(var(--twinkle-duration) * -0.44);}.stars2 {-webkit-animation-delay: calc(var(--twinkle-duration) * -0.66);animation-delay: calc(var(--twinkle-duration) * -0.66);}@-webkit-keyframes twinkle {25% {opacity: 0;}}@keyframes twinkle {25% {opacity: 0;}}.star {fill: white;}.star:nth-child(3n) {opacity: 0.8;}.star:nth-child(7n) {opacity: 0.6;}.star:nth-child(13n) {opacity: 0.4;}.star:nth-child(19n) {opacity: 0.2;}</style></head><body class="stars-wrapper"><script>for (var i = 0; i < 3; i++) {var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");svg.setAttribute("class", "stars" + i);svg.setAttribute("width", "100%");svg.setAttribute("height", "100%");svg.setAttribute("preserveAspectRatio", "none");for (let j = 0; j < 100; j++) {var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");circle.setAttribute("class", "star");circle.setAttribute("cx", r(0, 100) + "%");circle.setAttribute("cy", r(0, 100) + "%");circle.setAttribute("r", r(0.5, 3));svg.appendChild(circle);}document.getElementsByClassName("stars-wrapper")[0].appendChild(svg);}function r(m, n) {return (Math.random() * (n - m) + m).toFixed(2);}</script></body>
</html>

JS+CSS+SVG实现动态星空背景相关推荐

html 弹出层边框半透明,js+CSS实现弹出居中背景半透明div层的方法
本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: js+CSS弹出居中的背景半透明div层 body{margin:0px;} #bg{widt ...
js实现动态星空背景
这里我截取的是一个图片,实际上是会动的.废话不多说,上代码. HTML: <canvas id="canvas"></canvas> CSS: /*css ...
html 气泡动画效果,CSS 动画实现动态气泡背景的方法
今天是节后上班第一天,早上醒来一睁眼,嗯?啊...?什么...?这是哪?我是谁?上什么班? 然鹅,还是被昨晚特意设置的八个闹钟:alarm_clock:吵醒,冬天早上起床的难度...想必各位都心有体会 ...
canvas鼠标移动动态星空背景特效
在网上发现了一个挺好玩的canvas背景特效,先放上效果图. 这个可以作为背景,里面是直线匀速运动的散点,当两个点直接小于一定距离时会通过canvas生成一条线相连接. 而且当鼠标移入时,鼠标指针一定 ...
vue实现动态css,巧用 CSS 动画实现动态气泡背景__Vue.js__CSS__前端
今天是节后上班第一天,早上醒来一睁眼,嗯?啊-?什么-?这是哪?我是谁?上什么班? 然鹅,还是被昨晚特意设置的八个闹钟⏰吵醒,冬天早上起床的难度-想必各位都心有体会
php星空背景动态,JS实现动态星空背景效果
本文实例为大家分享了JS实现动态星空背景的具体代码,供大家参考,具体内容如下这里我截取的是一个图片,实际上是会动的.废话不多说,上代码. HTML: CSS: /*css reset */ body ...
动态星空效果html,JS实现动态星空背景效果
本文实例为大家分享了JS实现动态星空背景的具体代码,供大家参考,具体内容如下这里我截取的是一个图片,实际上是会动的.废话不多说,上代码. HTML: CSS: /*css reset */ body ...
HTML+CSS实现的动态背景图
HTML+CSS创建的月亮星空背景章目录前言一.主要用到的东西二.使用步骤 1.HTML部分代码 2.填充样式,布局. 总结前言本篇文章是用HTML和CSS创建的星空和月亮背景动态特效,适用 ...
python画动态星空壁纸_JS实现动态星空背景效果
本文实例为大家分享了JS实现动态星空背景的具体代码,供大家参考,具体内容如下这里我截取的是一个图片,实际上是会动的.废话不多说,上代码. HTML: CSS: /*css reset */ body ...

JS+CSS+SVG实现动态星空背景

效果图：

JS+CSS+SVG实现动态星空背景相关推荐

最新文章

热门文章