夜空中最亮的星
本帖最后由 起个网名好难 于 2024-9-23 08:38 编辑 <br /><br /><style>#oBlk {
margin: 30px 0 30px calc(50% - 721px);
width: 1280px;
height: 700px;
background: hsla(240, 10%, 10%, 0.75);
box-shadow: 2px 2px 6px #333;
pointer-events: none;
zzzz-index: 1;
position: relative;
--bState: running;
overflow: hidden;
text-align:center;
}
#oBlk::before {
position: absolute;
content: '';
width: 90px;
height: 90px;
background: transparent;
border-radius: 50%;
box-shadow: inset 10px 10px 50px yellow, 0 0 36px #111;
aaaanimation: move 30s ease infinite alternate var(--bState);
pointer-events: auto;
offset-path: path("M -50,520 Q 640,0 1325,520");
offset-rotate: 0deg;
animation: sp 60s linear infinite forwards var(--bState);
}
#vid {
width: 1400px;
opacity: 0.9;
mix-blend-mode: screen;
position: absolute;
left: 0px;
bottom: 0px;
}
@keyframes move {
from {
left: 20%;
transform: rotate(0deg);
}
to {
left: calc(80% - 90px);
transform: rotate(360deg);
}
}
@keyframes sp {
from {
offset-distance: 0%
}
to {
offset-distance: 100%
}
}
</style>
<div id="oBlk">
<svg version="1.1" viewBox="0 0 1024 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="leaf" viewBox="0 0 200 200">
<path id="svg_1" d="m0.005,76.96852l76.77571,0l23.72429,-77.92128l23.7243,77.92128l76.7757,0l-62.11274,48.15745l23.72551,77.92128l-62.11277,-48.15876l-62.11276,48.15876l23.72552,-77.92128l-62.11276,-48.15745z" fill="lightyellow" stroke="none" />
</symbol>
</svg>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/04/5b50853421bd8.mp4" autoplay loop muted></video>
<div style="z-index:99;font:bold 32px sans-serif;color:brown;position:absolute;left:30%;top:5%;">夜空中最亮的星(纯音乐)</div>
<audio id="mAud" src="https://music.163.com/song/media/outer/url?id=1988963144.mp3" loop autoplay></audio>
</div>
<script>
let svgObj = oBlk.querySelector('svg');
for (let n = 0; n < 16; n++) {
let uObj = document.createElementNS('http://www.w3.org/2000/svg', 'use');
uObj.setAttribute('x', parseInt(Math.random() * 960));
uObj.setAttribute('y', -200);
uObj.setAttribute('width', Math.abs(Math.random() * 20 + 10));
uObj.setAttribute('transform', `rotate(${Math.random() * 72 - 36})`);
uObj.setAttribute('href', '#leaf');
let aObj = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
aObj.setAttribute('attributeName', 'y');
aObj.setAttribute('to', 640);
aObj.setAttribute('dur', parseInt(Math.random() * 50 + 15));
aObj.setAttribute('begin', parseInt(Math.random() * -16));
aObj.setAttribute('repeatCount', 'indefinite');
uObj.appendChild(aObj);
svgObj.appendChild(uObj);
}
//==================================================================================================
let aState = (bool) => {
bool ? (vid.play(), svgObj.unpauseAnimations(), oBlk.style.setProperty('--bState', 'running'), mAud.play()) : (vid.pause(), svgObj.pauseAnimations(), oBlk.style.setProperty('--bState', 'paused'), mAud.pause()) ;
}
mAud.onplaying = mAud.onpause = () => aState(!mAud.paused);
oBlk.onclick = () => aState(mAud.paused);
</script> 星星飘飞，月亮缓缓升起。
欣赏难难svg制作的漂亮星月运转图，暂停时星星也能暂停呢{:4_187:} 这个制作漂亮，难难厉害{:4_199:} 支持原创作品，难难把svg运用得真好{:4_187:} 难难这个厉害了，纯代码制作的{:4_178:} 这个效果很美哦，星星月亮，蓝天白云{:4_199:} {:4_199:} 醉美水芙蓉 发表于 2024-9-22 21:17
欣赏老师带来的精彩！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 醉美水芙蓉 发表于 2024-9-22 21:20
老师用代码做的月亮真漂亮！
练习帖， 凑合 红影 发表于 2024-9-22 21:24
星星飘飞，月亮缓缓升起。
欣赏难难svg制作的漂亮星月运转图，暂停时星星也能暂停呢
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 红影 发表于 2024-9-22 21:24
这个制作漂亮，难难厉害
练习帖， 马马虎虎吧 红影 发表于 2024-9-22 21:25
支持原创作品，难难把svg运用得真好
整体效果不够美观 小辣椒 发表于 2024-9-22 21:25
难难这个厉害了，纯代码制作的
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 小辣椒 发表于 2024-9-22 21:26
这个效果很美哦，星星月亮，蓝天白云
勉强凑合的帖子。 马黑黑 发表于 2024-9-22 22:55
https://cccimg.com/view.php/6a1acfd3b4d74a20d5526242c682e519.webp 老师的这帖是我看过您帖子里最棒的！大气，有特色，还是用纯代码做的。好厉害啊！{:4_187:} 梦江南 发表于 2024-9-23 09:48
老师的这帖是我看过您帖子里最棒的！大气，有特色，还是用纯代码做的。好厉害啊！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif {:4_199:}欣赏佳作，谢谢分享！
页:
[1]
2