WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
स्टार ट्रेल्स एनिमेशन
1061
ledoc
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
20 March 2024
एनिमेशन के साथ HTML लैंडिंग पेज टेम्पलेट
5 August 2024
एनिमेशन के साथ सूची
23 September 2025
CSS फॉलिंग लोडिंग एनिमेशन स्निपेट
HTML
Copy
Move your mouse around
CSS
Copy
@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap"); .star { transform-style: preserve-3d; width: 1px; height: 1px; position: absolute; color: red; } .star:before { position: absolute; content: "✦"; color: inherit; inset: 0; text-shadow: 0 0 0.8em #fff5; } .cd__main { margin: 0; min-height: 100vh; font-family: "Montserrat", sans-serif; color: #F9F6EF; display: grid; place-content: center; background-image: radial-gradient(circle at 50% 50%, #2f3040, #1f2020) !important; }
JS
Copy
let x1=0, y1=0; window.client const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0), dist_to_draw = 50, delay = 1000, fsize = [ '1.1rem', '1.4rem', '.8rem', '1.7rem' ], colors = [ '#E23636', '#F9F3EE', '#E1F8DC', '#B8AFE6', '#AEE1CD', '#5EB0E5' ], rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min, selRand = (o) => o[rand(0, o.length -1)], distanceTo = (x1, y1, x2, y2) => Math.sqrt((Math.pow(x2-x1,2))+(Math.pow(y2-y1,2))), shouldDraw = (x, y) => (distanceTo(x1, y1, x, y) >= dist_to_draw), addStr = (x, y) => { const str = document.createElement("div"); str.innerHTML = '✦'; str.className = 'star'; str.style.top = `${y + rand(-20,20)}px`; str.style.left = `${x}px`; str.style.color = selRand(colors); str.style.fontSize = selRand(fsize); document.body.appendChild(str); const fs = 10 + 5 * parseFloat(getComputedStyle(str).fontSize); str.animate({ translate: `0 ${(y+fs)>vh?vh-y:fs}px`, opacity: 0, transform: `rotateX(${rand(1, 500)}deg) rotateY(${rand(1, 500)}deg)` }, { duration: delay, fill: 'forwards', }); setTimeout(() => { str.remove(); }, delay); } addEventListener("mousemove", (e) => { const {clientX, clientY} = e; if(shouldDraw(clientX, clientY)){ addStr(clientX, clientY); x1 = clientX; y1 = clientY; } });