朵拉 发表于 2024-10-27 16:50

春庭雪（学习马黑黑月背效果）

本帖最后由 朵拉 于 2024-10-27 22:58 编辑 <br /><br /><style>
#pa { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/671df898d29ded1a8c0e9c8a.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); z-index: 1; position: relative; }
.ell { fill: transparent; stroke: skyblue; stroke-width: 8; filter: opacity(.5) drop-shadow(10px 0 12px navy); cursor: pointer; animation: bigger .2s var(--delay) alternate infinite var(--state); }
.ell:hover { stroke-width: 12; }
#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); }
@keyframes bigger { to { rx: 60; ry: 30; } }
</style>

<div id="pa">
      <audio id="aud" src="https://www.kumeiwp.com/wj/34550/2022/04/13/980c6a052d6f0e741edc915dc1d2efa5.mp3" autoplay="" loop=""></audio>
      
      <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/31/09/62d0f6b234ec0.mp4" autoplay loop muted></video>
      <svg id="svg1" width="100%" height="100%"></svg>
</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 = 9).fill().forEach((_,key) => {
                let cx = 1024 / total * key + 55,
                        cy = key < Math.floor(total / 2) ? 430 + key * 30 : 400 + (total - key) * 30,
                        delay = `${-1 * Math.random()}`;
                dr.ellipse(cx , cy, 40, 60).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>

朵拉 发表于 2024-10-27 16:50

@马黑黑
老师好，学生交作业，请指正哈{:4_190:}

醉美水芙蓉 发表于 2024-10-27 17:38

红影 发表于 2024-10-27 19:54

漂亮，欣赏朵宝好帖{:4_187:}

小辣椒 发表于 2024-10-27 20:00

欣赏朵拉的精彩制作{:4_171:}

小辣椒 发表于 2024-10-27 20:01

朵拉是好学生的，每次作业完成的最快了{:4_199:}

马黑黑 发表于 2024-10-27 21:07

{:4_199:}

梦油 发表于 2024-10-27 21:12

欣赏佳作，问候朵拉。
页: [1]
查看完整版本: 春庭雪（学习马黑黑月背效果）