论坛 › 欢乐水吧 › 借问瘟君欲何往 纸船明烛照天烧

杨帆 发表于 2025-8-30 22:20

借问瘟君欲何往 纸船明烛照天烧

本帖最后由 杨帆 于 2025-8-31 22:44 编辑 <br /><br /><style>       
        #pa { margin: 30px 0; left: calc(50% ); transform: translateX(-50%); display: grid; place-items: center; z-index: 1; position: relative; width:560px;height: 560px;background: url('https://638183.freep.cn/638183/small/texture/wdrop.webp') no-repeat center/cover,repeating-linear-gradient(45deg, rgba(249,251,228,.35) 0 1px, transparent 2px 38px),repeating-linear-gradient(135deg, rgba(249,251,228,.35) 0 1px, transparent 2px 38px);border-radius: 5%;overflow: hidden; --state: running; --player-size: 10%;background-blend-mode: var(--mode);--mode:hue;--opacity:0; }               
        .player { position: absolute; width:var(--player-size); animation: rot 8s linear infinite var(--state); border-radius: 50%; transition: transform 0.3s ease;cursor: pointer; opacity: .8; z-index: 2;}       
    .player:hover { animation-play-state: paused;filter: invert(1); }
@keyframes rot { to { transform: rotate(360deg); } }
.player:nth-of-type(1) {left: 5%; top: 5%; }
.player:nth-of-type(2) { right:5%; top: 5%; }
.player:nth-of-type(3) { left: 5%; bottom: 5%; }
.player:nth-of-type(4) { right: 5%; bottom: 5%; }
   #dancer { position: absolute; width:100%; height:100%;top:0%; left:0%;mix-blend-mode:screen;z-index:1;opacity:var(--opacity);}   
   .star { position: absolute;transition: all 0.5s ease;transform-origin: center; }       
        #star1 { width: 300px; height: 300px; top: 20px; left: 110px; opacity: .6;animation: rot 8s linear infinite var(--state);}
        #star2 { width: 200px; height: 200px; top: 280px; left: 330px; opacity: .7; animation: scale 1.5s ease 1s infinitevar(--state); }       
        #star3 { width: 100px; height: 100px; top: 300px; left: 50px; opacity: .8; animation: complex 5s ease-in-out 0.5s infinitevar(--state); }
        @keyframes rot {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}
        @keyframes scale {0%, 100% { transform: scale(0.9); }50% { transform: scale(1.3); }}               
        @keyframes complex {0% { transform: rotate(0deg) scale(1); background: red;}25% { transform: rotate(90deg) scale(1.5);background: orange;}50% { transform: rotate(180deg) scale(2); background: yellow;}75% { transform: rotate(270deg) scale(1.5);background: green;}100% { transform: rotate(360deg) scale(1); background: blue;}}
</style>
<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=16967718" autoplay loop></audio>
       <img class="player" src="https://638183.freep.cn/638183/small/dcjm.webp" alt="" />
      <img class="player" src="https://638183.freep.cn/638183/t23/btn/dou.png" alt="" />
         <img class="player" src="https://638183.freep.cn/638183/small/2025/bl01.png" alt="" />
          <img class="player" src="https://638183.freep.cn/638183/t22/btn/g4.png" alt="" />
      <img id="star1" class="star" src="https://pic.imgdb.cn/item/65a377bd871b83018ac3682a.gif" alt="" />
       <img id="star2" class="star" src="https://pic.imgdb.cn/item/65a377bd871b83018ac3682a.gif" alt="" />
       <img id="star3" class="star" src="https://pic.imgdb.cn/item/65a377bd871b83018ac3682a.gif" alt="" />      
       <img id="dancer" src="https://wimg.588ku.com/gif620/21/07/01/b37f63e2cba7adc9f12b9decc5d52d0b.gif" alt="" />
</div>
<script >
var pa = document.getElementById('pa');
var players = pa.querySelectorAll('.player');
var dancer = document.getElementById('dancer');
var stars = document.querySelectorAll('.star');
var aud = document.getElementById('aud');
var mState = () => {
        pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');       
        players.forEach(player => player.title = aud.paused ? '播放' : '暂停');
        pa.style.setProperty('--opacity', aud.paused ?'1' : '0');
        pa.style.setProperty('--mode', aud.paused ?'normal' : 'hue');
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>
<script type="module">
    star1.style.setProperty('clip-path', `path('${createStartPath(10, 150, 50)}')`);
        star2.style.setProperty('clip-path', `path('${createStartPath(8, 100, 5)}')`);
        star3.style.setProperty('clip-path', `path('${createStartPath(12, 50, .5)}')`);       
        function createStartPath(lines, r1, r2=0) {
                var a = 360 / lines, path = 'M', bx1, by1, bx2, by2;
                Array.from({length: lines}).forEach((_,k) => {
                        var a1 = a * k,
                                a2 = a1 - a / 2,
                                x1 = (r1 + r1 * Math.cos(Math.PI / 180 * a1)).toFixed(2),
                                y1 = (r1 + r1 * Math.sin(Math.PI / 180 * a1)).toFixed(2),
                                x2 = (r1 + r2 * Math.cos(Math.PI / 180 * a2)).toFixed(2),
                                y2 = (r1 +r2 * Math.sin(Math.PI / 180 * a2)).toFixed(2);
                        if (k === 0) {
                                bx1 = x1;
                                by1 = y1;
                                bx2 = x2;
                                by2 = y2;
                                path += `${x1} ${y1} `;
                        } else {
                                path += `Q${x2} ${y2},${x1} ${y1} `;
                        }
                        if (k === lines - 1) path += `Q${bx2} ${by2},${bx1} ${by1}`;
                });
                return path;}
</script>

红影 发表于 2025-8-30 22:52

很奇妙的制作，四周的按钮都能暂停呢，赞同后出现了火苗的视频。
欣赏杨帆好帖，很奇妙{:4_199:}

杨帆 发表于 2025-8-30 22:57

红影 发表于 2025-8-30 22:52
很奇妙的制作，四周的按钮都能暂停呢，赞同后出现了火苗的视频。
欣赏杨帆好帖，很奇妙

呵呵，鼓捣着玩呢，谢谢影子鼓励~{:4_204:}

红影 发表于 2025-8-30 23:11

杨帆 发表于 2025-8-30 22:57
呵呵，鼓捣着玩呢，谢谢影子鼓励~

鼓捣得非常好呢{:4_187:}

梦江南 发表于 2025-8-31 10:07

有两个小播，都能一键暂停，出来火焰。很有创意！{:4_187:}

梦江南 发表于 2025-8-31 10:08

谢谢杨帆带来的精彩。欣赏点赞！{:4_199:}

杨帆 发表于 2025-8-31 10:10

梦江南 发表于 2025-8-31 10:07
有两个小播，都能一键暂停，出来火焰。很有创意！

问好江南，谢谢鼓励，共4个小播呦{:4_190:}

梦江南 发表于 2025-8-31 10:24

杨帆 发表于 2025-8-31 10:10
问好江南，谢谢鼓励，共4个小播呦

呦，没看到上面还有2个。{:4_173:}

查看完整版本: 借问瘟君欲何往 纸船明烛照天烧