【月满花潮庆华诞】庆佳节·双节咏
本帖最后由 寒冬残荷 于 2025-10-1 12:10 编辑 <br /><br /><style>#mydiv { margin: 30px auto; padding: 20px 10px; width: 900px; height: 506px; border: 3px solid var(--fColor); color: var(--fColor); background: var(--bgMain); position: relative; pointer-events: none; --bgMain: linear-gradient(snow,lightgreen,snow); --bgTitle: lightgreen; --fColor: red; --btnWidth: 80px; --state: paused;
background: url('https://pic1.imgdb.cn/item/68dc848dc5157e1a884b9b9a.jpg') no-repeat center/cover; }
#mydiv::before, #mydiv::after { position: absolute; content: ''; }
#mydiv::after { width: var(--btnWidth); height: var(--btnWidth); background: conic-gradient(var(--fColor),var(--bgTitle),var(--fColor),var(--bgTitle)); border-radius: 50%; bottom: calc(var(--btnWidth) / -2); left: calc(50% - var(--btnWidth) / 2); cursor: pointer; pointer-events: auto; animation: rot 5s infinite linear var(--state);}
#mydiv p { font-size: 26px ; line-height: 1.0; color: #ffff00; text-align: center;}
.txtRight { position: absolute; text-align: center; right: 10px; bottom: 10px; }
.txtMid { text-align: center; }
#txtbt { text-align: center;padding: 20px 0; font-size: 42px ; line-height: 1.0; color: #ffff00; top:230px;position: absolute;width: 100%; }
@keyframes rot { to { transform: rotate(360deg); } }
#vid {position:absolute; z-index: 2;width:98%; height:98%; object-fit:cover; mix-blend-mode:soft-light;margin-top:-15px; left:10px;transform:rotateX(0deg); pointer-events:none;}
</style>
<div id="mydiv">
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/30/5b553a9c1b5bd.mp4" autoplay loop muted ></video>
<div id="txtbt">
庆佳节·双节咏<br><br>
<p>
庆佳节。庆佳节。天意恰、成双设。桂香漫处旗正烈，偏照取、今宵月。<br><br>
我思欢游南北彻。高铁疾、青山阅。醉了醒来民富悦，看玉宇、蟾宫掘。
</p></div>
<p><p class="txtRight">寒冬残荷<br>2025年10月01日</p>
</div>
<audio id="aud" src="https://cccimg.com/view.php/596d2851d67dd10613510348a0dab0e1.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
(function () {
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
文笔细腻 感谢寒冬残荷带来的精彩，辛苦了。 十一国庆金秋爽，
国泰民安盛世昌。
日丽风和菊香馨，
月明花艳灯辉煌。
歌舞升平庆华诞，
烟花爆竹耀星光。
四海繁荣华锦绣，
五洲中华傲东方。 偶然~ 发表于 2025-10-1 13:26
感谢寒冬残荷带来的精彩，辛苦了。
谢谢偶然版主的鼓励与支持！抄搬您的代码制作的{:5_106:}学习东西、随便乱玩的。 偶然~ 发表于 2025-10-1 13:26
文笔细腻
本想去其他老年论坛玩就得了，那里的大家水平差距小，不会不好意思，可是在两个老年论坛发帖，好多CSS属性和JS都限制使用。 这个词句好，还配了AI朗读，真好。欣赏寒冬残荷好帖{:4_199:} 文辞隽秀，彰显文采，自然流畅，词句入味，文笔洗练，结构精巧，韵味清秀，为您点赞！ 文辞隽秀，彰显文采，自然流畅，词句入味，文笔洗练，结构精巧，韵味清秀，为您点赞！{:4_178:}
页:
[1]