卜算子 咏梅
本帖最后由 杨帆 于 2026-2-3 21:43 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>卜算子·咏梅</title>
</head>
<body>
<style>
#papa {margin: 130px 0 20px calc(50% - 781px);background: url('https://pic1.imgdb.cn/item/698192ef4f83a817d7f7f506.jpg') no-repeat 50% 60%/100% 100%;width: 1400px;height: 800px;box-shadow: 3px 3px 6px gray;overflow: hidden;position: relative;z-index:1;user-select: none;--state:running;}
#oBlk{width:400px;height:300px;overflow:hidden;position: absolute;margin-top:50px;margin-left:30px;border-radius:50%;box-shadow:4px 4px 10px black;z-index:3;}
#imghold{z-index:1;font-size: 0;width:9600px;height:600px;position:absolute;Left:0px;animation:mup 50s linear infinite var(--state),opa 10s infinite alternate linear var(--state);transition:opacity .5s ease;}
#imghold:hover{animation-play-state: paused;}
@keyframes mup {to {left: calc(-9600px + 800px);}}
#imghold img{vertical-align: top;}
#vid1 {position: absolute;left:0px;top:-90px;width: 100%;height:130%;mix-blend-mode:screen;opacity: 0.8;object-fit: cover;}
#mydiv {position: absolute;bottom:25%;right:10%;z-index:10;width: 80px;height:80px;display: grid;place-items: center;border: 1px solid rgba(100, 50, 30, 0.2);animation: rot 5s linear infinite var(--state);transition:opacity 0.3s, background 0.3s, border 0.3s;cursor: pointer;pointer-events: auto;}
#mydiv:hover{border-color: rgba(160, 82, 45, 0.3);animation-play-state:paused !important;}
#mydiv > span {position: absolute;width: 60%;height:60%;background: linear-gradient(75deg, #F5F5F5 10%, #E63946, #C1121F, #6B0F1A, #3D070B);border-radius: 50% 0 60% 20%;transform: rotate(var(--deg)) translate(18px, -55%);}
#mydiv > span:nth-of-type(1) {--deg: 0deg;}
#mydiv > span:nth-of-type(2) {--deg: 72deg;}
#mydiv > span:nth-of-type(3) {--deg: 144deg;}
#mydiv > span:nth-of-type(4) {--deg: 216deg;}
#mydiv > span:nth-of-type(5) {--deg: 288deg;}
#mydiv:hover > span {opacity: 0.9;}
@keyframes rot {to {transform: rotate(1turn);}}
@keyframes opa{to{opacity:0;}}
.dancer {position: absolute;z-index:2;}
#fullscreen{position:absolute;top:50px;right:30px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;z-index:10;}
#fullscreen:hover{font-style:italic;}
#baiBox {position: absolute;width: 100%;height: auto;line-height: 1.5;left: 0;bottom: 1%;z-index: 8;overflow: hidden;white-space: nowrap;}
#baiBox .tit {position: relative;display: inline-block;font:bold 1.8em/1.5 SimSun;filter:drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);color:#C41E3A;letter-spacing: 4px;transition: all .5s ease;animation: scroll-left 25s linear infinite var(--state);}
#baiBox:hover .tit {filter: hue-rotate(0deg);transform:scale(1.2);animation-play-state: paused!important;}
@keyframes scroll-left {0% {transform: translateX(0%);}100% {transform: translateX(-50%);}}
</style>
<div id="papa">
<img class="dancer" src="https://pic1.imgdb.cn/item/698192ef4f83a817d7f7f505.png" alt="" style="left:0px; top:0px; width: 100%;height:100%;">
<div id="mydiv">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<span id="fullscreen">全屏欣赏</span>
<div id="baiBox">
<div class="tit">
<span> ❀《卜算子·咏梅》是毛泽东读陆游同题词，反其意而作。写梅花的美丽、积极、坚贞，不是愁而是笑，不是孤傲而是具有新时代革命者的操守与傲骨……</span>
<span> ❀《卜算子·咏梅》是毛泽东读陆游同题词，反其意而作。写梅花的美丽、积极、坚贞，不是愁而是笑，不是孤傲而是具有新时代革命者的操守与傲骨……</span>
</div>
</div>
<div id="oBlk">
<div id='imghold'>
<img src="https://pic1.imgdb.cn/item/6980b1bf2d787daf035154c3.jpg" style="width:800px;">
<img src="https://pic1.imgdb.cn/item/6980b1bf2d787daf035154c4.jpg" style="width:800px;">
<img src="https://pic1.imgdb.cn/item/6980b1be2d787daf035154c2.jpg" style="width:800px;">
<img src="https://pic1.imgdb.cn/item/6980b1bd2d787daf035154c0.jpg" style="width:800px;">
<img src="https://pic1.imgdb.cn/item/6980b1be2d787daf035154c1.jpg" style="width:800px;">
<img src="https://pic1.imgdb.cn/item/6980b1bf2d787daf035154c6.jpg" style="width:800px;">
<img src="https://pic1.imgdb.cn/item/6980b22a2d787daf035154f0.jpg" style="width:800px;">
<img src="https://pic1.imgdb.cn/item/69818d0f4f83a817d7f7f2e6.jpg" style="width:800px;">
<img src="https://pic1.imgdb.cn/item/69818d0f4f83a817d7f7f2e8.jpg" style="width:800px;">
<img src="https://pic1.imgdb.cn/item/69818d0f4f83a817d7f7f2e9.jpg" style="width:800px;">
<img src="https://pic1.imgdb.cn/item/69818d0f4f83a817d7f7f2e7.jpg" style="width:800px;">
<img src="https://pic1.imgdb.cn/item/6980b1bf2d787daf035154c3.jpg" style="width:800px;">
<video id="vid1" src="https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b86e6c5bf.mp4" autoplay loop muted></video>
</div>
<audio id="aud" src="https://upfile.mp3.wf/view.php/2563e71f444cf7575307382c84b50c56.mp3" loop autoplay></audio>
</div>
<script>
const papa = document.getElementById('papa');
const vids = document.querySelectorAll(', .vid');
const aud = document.getElementById('aud');
const mdiv = document.getElementById('mdiv');
var mState = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
mydiv.title = aud.paused ? '播放' : '暂停';
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
let fs = true;let fsTimer;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());fs = !fs;};
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => {
fullscreen.style.opacity = '0';
}, 3000);
});
document.addEventListener('fullscreenchange', () => {
fs = !document.fullscreenElement;fullscreen.innerText = fs ? '全屏欣赏' : '退出全屏';});
</script>
</body>
</html>
伟人的诗《“咏梅》气派宏伟，无人能比。 问好杨帆，谢谢带来精彩分享。立春安康！{:4_187:} 梦江南 发表于 2026-2-4 08:07
问好杨帆，谢谢带来精彩分享。立春安康！
问好江南，谢谢鼓励，立春安康{:4_204:} 欣赏梦江南佳作，祝立春快乐！！
{:4_190:}{:4_204:}
很美妙大气。欣赏扬帆好帖{:4_199:} 霜染枫丹 发表于 2026-2-4 19:07
欣赏梦江南佳作，祝立春快乐！！
问好枫丹，谢谢鼓励，立春安康{:4_204:} 红影 发表于 2026-2-4 20:01
很美妙大气。欣赏扬帆好帖
问好影子，谢谢鼓励，立春安康{:4_204:}
页:
[1]