當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS+CSS+SVG实现动态星空背景
生活随笔
收集整理的這篇文章主要介紹了
JS+CSS+SVG实现动态星空背景
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
效果圖：
<!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>總結(jié)
以上是生活随笔為你收集整理的JS+CSS+SVG实现动态星空背景的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 加速下载Cudnn的方法
- 下一篇： 单片机软件设计思路