本帖最后由 花简静 于 2024-12-22 21:57 编辑
<style>
#pa { margin: 130px 0 30px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/20241027sgyj02.webp') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); z-index: 1; position: relative;overflow: hidden; }
.ell { left:900px;fill: transparent; stroke: DarkOrange; stroke-width: 1.5; filter: opacity(.5) drop-shadow(10px 0 12px DarkGray); cursor: pointer; animation: bigger .2s var(--delay) alternate infinite var(--state);opacity: 0.59; }
.ell:hover { stroke-width: 4; }
#mypic1 { position: absolute; width: 360px;left: calc(90% - 130px); mix-blend-mode: screen;top: 20px; animation: fly 30s alternate infinite forwards var(--state); --xx: 1%;z-index: 10;pointer-events: none;}
#mypic2 { position: absolute; width: 360px;left: calc(10% + 660px); mix-blend-mode:multiply;top: 360px; animation: fly 25s alternate infinite forwards var(--state); transform: scale(-1,1);--xx: 90%;z-index: 10;pointer-events: none;}
#vid { position: absolute; width: 100%; height: 100%; boject-fit: cover; mix-blend-mode: screen; pointer-events: none; -webkit-mask: linear-gradient(to top right, red 88%, transparent 0);opacity: 0.79; }
@keyframes bigger { to { rx: 41; ry: 41; } }
@keyframes fly { to { left: var(--xx); } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1455273374" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/79/86/60c98c8146068.mp4" autoplay loop muted></video>
<svg id="svg1" width="100%" height="100%"></svg>
<img id="mypic1" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" />
<img id="mypic2" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" />
</div>
<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js?v=' + new Date().getTime();
document.body.appendChild(sc);
sc.onload = () => {
var dr = _dr('#svg1');
Array(total = 4).fill().forEach((_,key) => {
let cx = 300 / total * key + 895,
cy = key < Math.floor(total / 2) ? 590 + key * 1 : 500 + (total - key) * 48,
delay = `${-1 * Math.random()}`;
dr.ellipse(cx , cy, 40, 40).set('class', 'ell').style(`--delay: ${delay}s`);
});
aud.onplaying = aud.onpause = () => mState();
var ells = document.querySelectorAll('.ell');
ells.forEach(ell => ell.onclick = () => aud.paused ? aud.play() : aud.pause());
mState = () => {
pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? vid.pause() : vid.play();
};
};
</script>
| 
