学习贴 《日落时分想起你 》
<style>#mydiv { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/3e802b041c4ae1c6f0769c82f2814b73_preview.jpg') center/cover; box-shadow: 03px 3px 6px #333; display: grid; place-items: center; position: relative; }
#svg1 { position: absolute; top: 56%; cursor: pointer; filter: hue-rotate(0deg) drop-shadow(0 0 4px black); transition: 1s; }
#svg1:hover { filter: hue-rotate(200deg) drop-shadow(0 0 4px black); }
#mydiv> video { position: absolute; width: 100%; height:80%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: linear-gradient(red, transparent);pointer-events: none; }
</style>
<div id="mydiv">
<audio id="aud" src="https://cccimg.com/view.php/a31a8730fd8943770d071a33dc423bb6.mp3" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2629112/00/01/93/5b4e8e56669ab.mp4" autoplay loop muted></video>
<svg id="svg1" width="200" height="200" viewBox="0 0 200 200" fill="none" stroke="white" stroke-width="6" stroke-dasharray="6 12 6"></svg>
</div>
<script>
var ww = mydiv.offsetWidth;
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({papa: '#mydiv', css: 'bottom: 20px; --fsBg: #eeeeee90; --color: #336699;'});
var observer = new ResizeObserver((elms) => {
var cr = elms.contentRect;
svg1.style.transform = `scale(${cr.width / ww * 1.2})`;
});
mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), hsvg.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), hsvg.unpauseAnimations());
drawCircles = (num) => {
let circlecode = '', anicode = '';
Array(num).fill(0).forEach((c,k) => {
c = k + 1;
let bstr = k > 0 ? `ani${k}.begin+${k * 3 / num}s` : '0s';
let color = `#${Math.random().toString(16).substring(2,8)}a0`;
circlecode += `<circle id="cc${c}" cx="100" cy="100" r="0" stroke="${color}" transform="rotate(${360 / num * k} 100 100)"></circle>`;
anicode += `<animate xlink:href="#cc${c}" attributeName="r" values="0;90;0" dur="20s" repeatCount="indefinite" id="ani${c}" begin="${bstr}"></animate>`;
});
return circlecode + anicode;
};
svg1.innerHTML = drawCircles(10);
observer.observe(mydiv);
aud.onplaying = aud.onpause = () => aud.paused ? svg1.pauseAnimations() : svg1.unpauseAnimations();
svg1.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
漂亮的制作。欣赏水芙蓉美女好帖{:4_187:} 红影 发表于 2024-9-13 22:58
漂亮的制作。欣赏水芙蓉美女好帖
谢谢红影美女鼓励！ 一个字——美！ http://5b0988e595225.cdn.sohucs.com/images/20180609/7cb2f0611268493d99f4d24287cc618c.gif
问好老师，佳作欣赏。 樵歌 发表于 2024-9-14 07:15
一个字——美！
谢谢樵歌支持！ 起个网名好难 发表于 2024-9-14 07:51
谢谢老师支持！ 梦江南 发表于 2024-9-14 10:11
问好老师，佳作欣赏。
谢谢梦见江南老师支持！ 醉美水芙蓉 发表于 2024-9-14 17:07
谢谢樵歌支持！
必须不客气哈。 芙蓉制作漂亮，进来就感觉一片清凉 醉美水芙蓉 发表于 2024-9-14 07:09
谢谢红影美女鼓励！
不客气，问好水芙蓉美女{:4_187:}
页:
[1]