《共度好时光》贺快乐生辰（2024年中秋）
<style>#tz { margin: 80px 0 30px calc(50% - 721px); width: 1280px; height: 700px; background: url('https://pic.imgdb.cn/item/66e6bbbfd9c307b7e9a115af.jpg') no-repeat center/cover; border: thick groove gray; position: relative; --state: running; --scale: 1; overflow: hidden;}
#tz:fullscreen #hsvg, #pic { --scale: 1.2;}
#pic { position: absolute; left: calc(50% - 158px); bottom: calc(50% - 370px);width: 450px; height: 540px; transform: scale(0.1); animation: hy 10s forwards; var(--state);}
#pic1 { position: absolute;width: 100%; height: 100%;opacity: .15; mix-blend-mode: screen; animation: hy1 0.6s linear infinite alternate; var(--state);}
#pic2 { position: absolute;opacity: .95; left:10px; top: 20px; }
#hsvg { position: absolute; left: calc(50% - 90px); top: calc(50% - 270px); border-radius: 50%; filter: drop-shadow(0 0 8px green); cursor: pointer; animation: rot 30s linear infinite var(--state); }
#vid { position: absolute; width: 100%; height: calc(100% + 120px); bottom: 0; opacity: 0.55;object-fit: cover; pointer-events: none; mix-blend-mode: screen; }
#tit {
position: absolute;
top:0px;
right: 5%;
background-image:url('https://pic.imgdb.cn/item/65a377bd871b83018ac3682a.gif');
background-size:cover;
width:80px; height:720px;
font: bold 2.4em sans-serif;
text-align:center;
line-height:50px;
color:transparent;writing-mode:vertical-rl;
-webkit-background-clip:text;
}
#hsvg:hover { --state: paused; }
@keyframes rot { from { transform: rotate(0deg) scale(var(--scale)); } to { transform: rotate(360deg) scale(var(--scale)); } }
@keyframes hy {to { transform: scale(1.0); } }
@keyframes hy1 {to { opacity: 0.35; } }
</style>
<div id="tz">
<div id="tit">祝快乐生日和中秋双喜临门</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2605196738" autoplay loop></audio>
<img id="pic" alt=""src="https://pic.imgdb.cn/item/66e6d728d9c307b7e9c5dab3.png" />
<img id="pic1" alt=""src="https://pic.imgdb.cn/item/66e6dd1ad9c307b7e9d1b09a.jpg" />
<img id="pic2" alt=""src="https://pic.imgdb.cn/item/66e6df1ad9c307b7e9d47e6b.gif" />
<svg id="hsvg" width="320" height="320" viewBox="0 0 320 320" fill="none" stroke="plum" stroke-linecap="round"></svg>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/20/12/61dd233fbdfdf_10s_big.mp4" autoplay loop muted></video>
</div>
<script>
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: '#tz', css: 'bottom: 20px; left: 52%; --fsBg: #eeeeee90; --color: #336699;'});
drawPolygon = (total) => {
var pathstr = '<defs>', usestr = '';
Array(total).fill(0).forEach((id,idx) => {
id = idx + 1;
var bstr = idx === 0 ? '0s' : `p1.begin+${idx}s`;
var color = '#' + Math.random().toString(16).substring(2,8) + '9d';
pathstr += `
<path id="r${id}" stroke="${color}">
<animate id="p${id}" attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="12s" repeatCount="indefinite" begin="${bstr}"/>
<animate attributeName="stroke-width" values="0;4;4;4;0" dur="12s" repeatCount="indefinite" begin="${bstr}"/>
</path>`;
Array(total).fill(0).forEach((u,k) => {
u = k + 1;
var angle = id % 2 === 0 ? 360 / total * k + 360 / total / 2 : 360 / total * k;
usestr += `<use xlink:href="#r${id}" transform="rotate(${angle} 160 160)"/>`;
});
});
pathstr += '</defs>';
return pathstr + usestr;
};
hsvg.innerHTML = drawPolygon(12);
mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), hsvg.pauseAnimations(), vid.pause()) : (tz.style.setProperty('--state', 'running'), hsvg.unpauseAnimations(), vid.play());
aud.onplaying = aud.onpause = () => mState();
hsvg.onclick = (e) => aud.paused ? aud.play() : aud.pause();
</script> https://pic.imgdb.cn/item/61492c802ab3f51d914104b0.gif
https://pic.imgdb.cn/item/61492ca22ab3f51d9141300d.gif
https://pic.imgdb.cn/item/61492c952ab3f51d9141201f.gif 学习代码做个帖子，虽然做不好，但心意满满。生日快乐@快乐
又是一年中秋节，也是快乐的好日子，祝福生日和节日双喜临门{:4_204:}{:4_177:} @马黑黑 不知道为什么直接使用--state不起作用，设置了mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), hsvg.pauseAnimations(), vid.pause()) : (tz.style.setProperty('--state', 'running'), hsvg.unpauseAnimations(), vid.play());应该是加入视频控制了，貌似也没作用{:4_173:} 红影 发表于 2024-9-16 11:08
@马黑黑 不知道为什么直接使用--state不起作用，设置了mState = () => aud.paused ? (tz.style.setProperty ...
video标签：
<video class="vid" src=。。。
根据代码结构，class 应使用 id 寿星是 ？ 马黑黑 发表于 2024-9-16 11:19
video标签：
修改了一下，果然可以了{:4_205:}谢谢黑黑{:4_187:} 起个网名好难 发表于 2024-9-16 12:05
寿星是 ？
就叫快乐啊{:4_173:} 快乐、快乐，生日快乐！ 红影 发表于 2024-9-16 12:23
修改了一下，果然可以了谢谢黑黑
弄那么久的HTML，应该知道元素id或class标识在JS的操作。一般来说，但一个元素，用id最省事，在js里直接使用该id操作它；多个元素时，用class，在js里通过
var vids = document.querySelectorAll('.vid')
之类的方式读取到其操作标识，然后使用大致像下面的方式去处理：
vids.forEach(vid => {
//....
}); 好美的生日快乐！{:4_178:} 祝福快乐生日快乐！中秋节快乐！{:4_177:}{:4_177:} 祝快乐老师生日快乐！中秋快乐！
图图做的非常漂亮，很开心，带来好心情{:4_176:}{:4_204:}{:4_208:} 红影 发表于 2024-9-16 11:02
大家都来吃蛋糕{:4_177:}{:4_177:}{:4_177:} 红影 发表于 2024-9-16 11:04
多谢影子，日子真快，又是一年中秋，快乐祝影子和花坛的朋友们中秋快乐！花好月圆。{:4_179:}{:4_179:}{:4_179:} 梦油 发表于 2024-9-16 12:56
快乐、快乐，生日快乐！
谢谢朋友，节日快乐！{:4_176:} 小辣椒 发表于 2024-9-16 14:57
祝福快乐生日快乐！中秋节快乐！
谢谢小辣椒，也祝你中秋快乐！{:4_204:}{:4_204:}{:4_204:} 梦江南 发表于 2024-9-16 17:46
祝快乐老师生日快乐！中秋快乐！
谢谢朋友，中秋快乐！{:4_176:}{:4_176:}{:4_176:}