读书正当时
本帖最后由 杨帆 于 2026-6-14 16:41 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="referrer" content="never" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<title>读书正当时</title>
</head>
<body>
<style>
#papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%);position: relative; width: 1280px; height: 750px;background: url('https://pic1.imgdb.cn/item/687ba61258cb8da5c8c76f6c.jpg') no-repeat center/cover;background-blend-mode: color-burn;box-shadow: 2px 2px 6px #000; z-index: 1; overflow:hidden;border-radius:32px;--state:running;--deg: 1turn; }
.progress-wrap{position:absolute;left:50%;top:95%;transform:translateX(-50%);width:50%;z-index:10;}
.time-box{display:flex;justify-content:space-between;color:#FFD700;font-size:20px;margin-bottom:6px;}
.range{-webkit-appearance:none;width:100%;background:none;position:absolute;bottom:1%;z-index:15;}
.range::-webkit-slider-runnable-track{margin:30px auto;background:linear-gradient(90deg,lightgreen,lightgreen) no-repeat center/100% 2px;}
.range::-webkit-slider-thumb{-webkit-appearance:none;height:20px;width:20px;border-radius:50%;background:radial-gradient(lightgreen 30%,green 35%,darkgreen 100%);cursor:pointer;}
.range::-moz-range-track{background:linear-gradient(90deg,lightgreen,lightgreen) no-repeat center/100% 2px;}
.range::-moz-range-thumb{-webkit-appearance:none;height:20px;width:20px;border-radius:50%;background:radial-gradient(lightgreen 30%,green 35%,darkgreen 100%);cursor:pointer;}
.lrc{z-index:10;position:absolute;top:38%;left: calc(50%); transform: translateX(-50%); width:600px;height:250px;overflow:hidden;}
.lrc #ul{ letter-spacing: 3px; width:100%;padding:0;list-style:none;transition:0.3s all ease;margin:0;}
.lrc #ul li{ color:#E6E6FA;font:2.5rem/1.5 "STFangsong","Ma Shan Zheng","SimHei","华文行楷","华文新魏","Microsoft YaHei",Arial,"sans-serif";transition:.3s all ease;list-style-type:none;text-align:center;display:block;padding:0.3px 10px;height:50px;line-height:70px;margin:0 auto;cursor:pointer;}
.lrc #ul li.active{transform:scale(1.1);color:#FFD700;font-weight:300;}
#pa { position: absolute;top:180px; right: 50px; width: 460px; height: 460px; writing-mode: vertical-rl; text-orientation: upright;}
.text { margin: 10px;font: bold 45px 'Microsoft YaHei', sans-serif;color: #FFD700;text-shadow: 0 0 1px #000, 2px 2px 6px #000;display: inline-block;}
.ani { --color:#FF1493;animation: flash 1s linear alternate var(--state), circle 1.2s linear var(--state); }
@keyframes flash { to { color: var(--color); opacity: .7; }}
@keyframes circle {to { transform: rotate(360deg); }}
#Player { position: absolute; cursor: pointer; transition: 1.2s; animation: rot 3s linear infinite var(--state); z-index: 10; }
.dancer { position: absolute; cursor:pointer;z-index:1;}
@keyframes rot { to { transform: rotate(var(--deg)); } }
.vid{position: absolute; top: -10%;left: -10%;width: 120%; height: 120%; object-fit: cover; pointer-events: none; opacity: 0.9; mix-blend-mode: screen;z-index: 1; }
#vid1,#vid2 {position: absolute; width: 437px;height: 270px;border-radius: 50%;left: 2%;top: 5%;border: 3px solid #ddd;box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3) inset;opacity: .9; cursor: pointer;z-index:1;object-fit: cover; object-position: center;}
#vid2{mix-blend-mode: screen; transition:opacity .5s ease;animation:opa 10s infinite alternate linear var(--state);}
@keyframes opa{to{opacity:0;}}
#baiBox {position: absolute;width: 100%;height: auto;line-height: 1.5;left: 0;top: 6%;z-index: 8;overflow: hidden;white-space: nowrap;}
#baiBox .tit {position: relative;display: inline-block;font:bold 2.2em/1.2 STXingkai;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:#e91e63;letter-spacing: 4px;transition: all .5s ease;animation: scroll-left 28s 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%);}}
#xiaobo {z-index: 10;width: 320px;height: 162px;left: 2%;bottom: 2%;position: absolute;overflow: hidden;--state:running;}
#circle {z-index: 2;width: 160px;height: 160px;margin: 0px auto;position: absolute;border: 2px solid #333;background:#8E731B url('https://i.uik.cc/view.php/481b6d00f36ab4c8c4fe3e38221dee2c.png') no-repeat center/cover;border-radius: 8px;mask: radial-gradient(circle at 98% 50%,transparent 45px,red 0%);-webkit-mask: radial-gradient(circle at 98% 50%,transparent 45px,red 0%); }
#cp {z-index: -1;position: absolute;transition: all 1s;top: 4px;left: 106px;width: 150px; height: 150px;border: 2px solid #000;border-radius: 50%;background:url('https://pic1.imgdb.cn/item/69e5e442198dd6f8d6ac9407.png') no-repeat 0px 0px/cover;animation: rot 8s linear infinite var(--state); cursor: pointer;}
#bnt{ margin: 130px 15px ; width: 15px; height: 15px;position: relative; cursor: pointer; z-index: 15;transition: all 1s;}
#cndpt{ position: absolute; width: 100%; height: 100%;background:#eee;clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 100%; height: 100%; opacity:0; background:#eee;clip-path: polygon(75% 50%, 0 0, 0 100%)}
.img {position: absolute;top:5px; left:25px;object-fit: cover;z-index: 2;pointer-events: none;width:600px;height: 384px;animation: round 40s linear infinite var(--state);box-shadow: 0px 0px 0px 3px #fff; opacity: 0;}
.img:nth-of-type(6) {animation-delay: 40s;}
.img:nth-of-type(5) {animation-delay: 32s;}
.img:nth-of-type(4) {animation-delay: 24s;}
.img:nth-of-type(3) {animation-delay: 16s;}
.img:nth-of-type(2) {animation-delay: 8s;}
.img:nth-of-type(1) {animation-delay: 0s;}
@keyframes round{0% {-webkit-transform:rotate(0)scale(0.4)translate(-35%,0%);opacity:1}5% {-webkit-transform:rotate(0)scale(0.4)translate(-35%,0%);opacity:0.8}10% {-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);opacity:1}14% {-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);opacity:1}16% {-webkit-transform:rotate(0deg)scale(0.4)translate(-35%,0%);opacity:1}22% {-webkit-transform:rotate(0deg)scale(0.4)translate(-35%,0%);opacity:0}}
#fullscreen {position:absolute;top:1%;right:1%;font:normal 1.3em '楷体', 'Ma Shan Zheng';color:#fff;background: rgba(0,0,0,0.4);backdrop-filter: blur(4px);padding: 6px 14px;border-radius: 40px;cursor:pointer;z-index:98;transition:0.2s;}
#fullscreen:hover {background:#ffb347; color:#1e2a3a; transform: scale(0.96);}
</style>
<div id="papa">
<span id="fullscreen">⛶全屏欣赏</span>
<div id="pa"></div>
<div class="lrc">
<ul id="ul"></ul>
</div>
<div id="baiBox">
<div class="tit">
<span>每年“4·23”为世界读书日。2026年起，每年4月第四周为全国“全民阅读活动周”。读书正当时，让我们关注阅读，参与阅读，收获阅读……</span>
<span>每年“4·23”为世界读书日。2026年起，每年4月第四周为全国“全民阅读活动周”。读书正当时，让我们关注阅读，参与阅读，收获阅读……</span>
</div>
</div>
<div class="progress-wrap">
<div class="time-box">
<span id="current">00:00</span>
<span id="duration">00:00</span>
</div>
<input id="myrange" type="range" class="range" min="0" max="100" step="any" value="0" title="调节进度">
</div>
<img id="Player" class="dancer" src="https://pic1.imgdb.cn/item/686fd0eb58cb8da5c89ab521.png" alt="" style="width: 120px; height: 120px;right:2%;bottom:3%;">
<audio id="aud" src="https://www.joy127.com/url/148862.mp3" preload="auto" autoplay loop></audio>
<video class ="vid" src="https://yw83yw.oss-cn-hangzhou.aliyuncs.com/lvzhou/flash/MP4/DH04.mp4" autoplay loop preload="auto" playsinline muted></video>
<video id="vid1" src="http://cccimg.com/view.php/19711bc4094122cdc4d342946a5c2f8d.mp4" autoplay loop preload="auto" playsinline muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2405811/00/73/37/608ca8165fa3d.mp4" autoplay loop preload="auto" playsinline muted></video>
<div id='testImg'>
<img class="img" src="https://res.cenews.com.cn/data3/1/images/2025/1023/17611836954851012_1235x793.png" alt="">
<img class="img" src="https://pic1.imgdb.cn/item/69e9fb1d4f30acb4eeb0558f.jpg" alt="">
<img class="img" src="https://pic1.imgdb.cn/item/69e9ff3f4f30acb4eeb05e81.jpg" alt="">
<img class="img" src="https://pic1.imgdb.cn/item/69e9fb1d4f30acb4eeb0558f.jpg" alt="">
<img class="img" src="https://pic1.imgdb.cn/item/69e9ff3f4f30acb4eeb05e81.jpg" alt="">
<img class="img" src="https://res.cenews.com.cn/data3/1/images/2025/1023/17611836954851012_1235x793.png" alt="">
</div>
<div id="xiaobo">
<div id="circle"></div>
<div id="cp"></div>
<div id="bnt" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div>
</div>
</div>
<script>
(function(audioId){let lrc=`
读书好 - 小蓓蕾组合
读书好 读书好
读书不问迟和早
人不读书好像瞎子
看不到
知识无价学问是宝
读书好 读书好
读书好 读书好
读书不问迟和早
人不读书好像瞎子
看不到
知识无价学问是宝
读书好 读书好
读书好 读书好
读书不问迟和早
人不读书好像瞎子
看不到
知识无价学问是宝
读书好 读书好
读书好 读书好
读书不问迟和早
人不读书好像瞎子
看不到
知识无价学问是宝
读书好 读书好
`;
let lrcArr = lrc.split('\n');
let result = [];
const audio = document.getElementById(audioId);
const ul = document.querySelector("#ul");
const container = document.querySelector(".lrc");
const currentEl = document.getElementById('current');
const durationEl = document.getElementById('duration');
const myrange = document.getElementById('myrange');
for (let i = 0; i < lrcArr.length; i++) {
var lrcData = lrcArr.split(']');
if (lrcData.length < 2) continue;
var lrcTime = lrcData.substring(1);
var obj = {
time: parseTime(lrcTime),
word: lrcData.trim()
}
result.push(obj);
}
function parseTime(lrcTime) {
let lrcTimeArr = lrcTime.split(":");
return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
}
function getIndex() {
let time = audio.currentTime;
for (let i = 0; i < result.length; i++) {
if (result.time > time) {
return i - 1;
}
}
return result.length - 1;
}
function createElements() {
let fragment = document.createDocumentFragment();
for (let i = 0; i < result.length; i++) {
let li = document.createElement("li");
li.innerText = result.word;
li.addEventListener("click", function () {
audio.currentTime = result.time;
setOffset();
});
fragment.appendChild(li);
}
ul.appendChild(fragment);
}
createElements();
let containerHeight = container.clientHeight;
let liHeight = ul.children?.clientHeight || 50;
let minOffset = 0;
let maxOffset = ul.clientHeight - containerHeight;
function setOffset() {
const index = getIndex();
if (index < 0) return;
const liHeight = ul.children?.clientHeight || 50;
let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
offset = Math.max(minOffset, Math.min(offset, maxOffset));
ul.style.transform = `translateY(${-offset}px)`;
ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
if (index < ul.children.length) {
ul.children.classList.add('active');
}
}
audio.addEventListener("timeupdate", () => {
setOffset();
});
})('aud');
const papa = document.getElementById('papa');
const aud = document.getElementById('aud');
const Player = document.getElementById('Player');
const dancers = document.querySelectorAll('.dancer');
const vids = document.querySelectorAll('video');
const bnt = document.getElementById('bnt');
const currentEl = document.getElementById('current');
const durationEl = document.getElementById('duration');
const myrange = document.getElementById('myrange');
const txtAr = '读书正当时'.split('');
let spans = [];
txtAr.forEach( (t,k) => {
const s = document.createElement('span');
s.textContent = t;
s.className = k === 0 ? 'text ani' : 'text';
spans.push(s);
s.onanimationend = () => {
s.classList.remove('ani');
spans[(k+1) % txtAr.length].classList.add('ani');
};
pa.appendChild(s);
});
const text = document.querySelectorAll('.text');
function formatTime(seconds) {
if (isNaN(seconds)) return "00:00";
const min = Math.floor(seconds / 60);
const sec = Math.floor(seconds % 60);
return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
}
function formatTime(seconds) {
if (isNaN(seconds)) return "00:00";
const min = Math.floor(seconds / 60);
const sec = Math.floor(seconds % 60);
return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
}
function updateTime() {
currentEl.textContent = formatTime(aud.currentTime);
}
aud.addEventListener('loadedmetadata', () => {
durationEl.textContent = formatTime(aud.duration);
});
myrange.addEventListener('input', () => {
if (!aud.duration) return;
aud.currentTime = (myrange.value / 100) * aud.duration;
});
aud.addEventListener('timeupdate', () => {
if (!aud.duration) return;
myrange.value = (aud.currentTime / aud.duration) * 100;
});
aud.addEventListener("timeupdate", () => {
updateTime();
});
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
this.storeCanvas.remove();
this.storeCanvas = null;
}
this.style.opacity = '1';
};
HTMLImageElement.prototype.stop = function() {
if (this.storeCanvas) return;
const canvas = document.createElement('canvas');
const w = this.offsetWidth;
const h = this.offsetHeight;
canvas.width = w;
canvas.height = h;
const style = getComputedStyle(this);
canvas.style.cssText = `
position: absolute;
left: ${style.left};
top: ${style.top};
width: ${w}px;
height: ${h}px;
transform: ${style.transform};
z-index: ${style.zIndex};
border-radius: ${style.borderRadius};
-webkit-mask-image: ${style.webkitMaskImage};
mask-image: ${style.maskImage};
clip-path: ${style.clipPath || style.webkitClipPath || style.mozClipPath};
-webkit-clip-path: ${style.webkitClipPath || style.clipPath};
-moz-clip-path: ${style.mozClipPath || style.clipPath};
object-fit: ${style.objectFit};
object-position: ${style.objectPosition};
mix-blend-mode: ${style.mixBlendMode};
pointer-events: none;
`;
try {
const ctx = canvas.getContext('2d');
const ratioImg = this.naturalWidth / this.naturalHeight;
const ratioBox = w / h;
let drawW, drawH, offsetX = 0, offsetY = 0;
if (ratioImg > ratioBox) {
drawH = h;
drawW = h * ratioImg;
offsetX = -(drawW - w) / 2;
} else {
drawW = w;
drawH = w / ratioImg;
offsetY = -(drawH - h) / 2;
}
ctx.drawImage(this, offsetX, offsetY, drawW, drawH);
} catch (e) {}
this.parentNode.insertBefore(canvas, this);
this.style.opacity = '0';
this.storeCanvas = canvas;
};
}
function random(min,max){return Math.floor(Math.random()*(max-min+1))+min;}
function randomColor(){
const r=random(0,255).toString(16).padStart(2,'0');
const g=random(200,255).toString(16).padStart(2,'0');
const b=random(0,255).toString(16).padStart(2,'0');
return '#'+r+g+b;
};
Player.onclick = bnt.onclick = () => {
text.forEach(item => {
item.style.color = randomColor();
item.style.setProperty('--color', `hsl(${Math.floor(Math.random()*61) + 30}, 100%, 50%)`);
});
if (aud.paused) {
aud.play();
enopg.style.opacity = '0';
cndpt.style.opacity = '1';
cp.style.left = '83px';
xiaobo.style.setProperty('--state', 'running');bnt.title = '暂停';
circle.style.mask = 'radial-gradient(circle at 98% 50%,transparent 35px,red 0%)';
circle.style.webkitMask = 'radial-gradient(circle at 98% 50%,transparent 35px,red 0%)';
} else {
aud.pause();
enopg.style.opacity = '1';
cndpt.style.opacity = '0';
cp.style.left = '10px';
xiaobo.style.setProperty('--state', 'paused');bnt.title = '播放';
circle.style.mask = 'none';
circle.style.webkitMask = 'none';
}
};
constupdateState = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
Player.title = aud.paused ? '播放' : '暂停';
dancers.forEach(dancer => aud.paused ? dancer.stop() : dancer.play());
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
vid2.title = Player.title;
};
aud.onplaying = aud.onpause = () => updateState();
vid2.onclick = () => Player.click();
['contextmenu', 'dragstart', 'selectstart'].forEach(type =>
papa.addEventListener(type, e => e.preventDefault())
);
Player.onanimationiteration = () => {
Player.style.setProperty('filter', `hue-rotate(${60 + Math.random() * 240}deg)`);
};
let fsTimer;
const fullscreenBtn = document.getElementById('fullscreen');
fullscreenBtn.onclick = () => {
if (!document.fullscreenElement) {
papa.requestFullscreen().catch(console.log);
fullscreenBtn.innerText = '\u2716 退出全屏';
} else {
document.exitFullscreen();
fullscreenBtn.innerText = '\u26f6全屏欣赏';
}
};
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreenBtn.style.opacity = '1';
fsTimer = setTimeout(() => fullscreenBtn.style.opacity = '0', 2500);
});
</script>
</body>
</html> 本帖最后由 杨帆 于 2026-4-23 20:52 编辑
该贴代码来自马黑黑老师、亚伦老师分享作品，素材来自梦江南老师、魏淑芬老师分享作品，在此表示感谢~ 这个帖子好，宣传了正能量。
欣赏杨帆好帖{:4_199:} 欣赏扬帆佳作，宣传正能量，赞佩！{:4_204:}{:4_190:}
https://img1.oldkids.cn/upload/2021/12/01/blog_260844733_20211201053404192.gif
杨帆 发表于 2026-4-23 20:50
该贴代码来自马黑黑老师、亚伦老师分享作品，素材来自梦江南老师、魏淑芬老师分享作品，在此表示感谢~
不客气啊，能被杨帆用到也是梦江南幸运呢。{:4_204:} 欣赏杨帆正能量漂亮音画，点赞！{:4_199:} 欣赏杨帆正能量漂亮音画，点赞！{:4_199:} 欣赏杨帆正能量漂亮音画，点赞！{:4_199:} 红影 发表于 2026-4-23 22:45
这个帖子好，宣传了正能量。
欣赏杨帆好帖
谢谢影子支持与鼓励。让读书成为好玩儿的事，坚持读有价值的书{:4_187:} 霜染枫丹 发表于 2026-4-23 22:50
欣赏扬帆佳作，宣传正能量，赞佩！
谢谢枫丹老师支持与鼓励。让读书成为好玩儿的事，坚持读有价值的书{:4_187:} 也曾年轻 发表于 2026-4-24 09:25
谢谢老师支持与鼓励。让读书成为好玩儿的事，坚持读有价值的书{:4_190:} 本帖最后由 杨帆 于 2026-4-24 14:17 编辑
梦江南 发表于 2026-4-24 12:39
不客气啊，能被杨帆用到也是梦江南幸运呢。
谢谢江南老师支持与鼓励。“下载”和“阅读”是两个概念，读真正有价值的好书，让读书成为好玩儿的事{:4_204:} 杨帆 发表于 2026-4-24 14:11
谢谢江南老师支持与鼓励。“下载”和“阅读”是两个概念，读真正有价值的好书，让读书成为好玩儿的事{:4_ ...
哈哈，我的签名中就是一直在读书呢。{:4_189:} 梦江南 发表于 2026-4-24 14:46
哈哈，我的签名中就是一直在读书呢。
厉害~赞一个{:4_171:} 欣赏杨帆精彩的制作{:4_199:} 二个联动按钮，好听的儿歌{:4_205:} 感谢杨帆分享{:4_187:} 小辣椒 发表于 2026-4-24 23:10
感谢杨帆分享
谢谢小辣椒支持与鼓励。让读书成为好玩儿的事，坚持读有价值的书{:4_204:} 即时的正能量帖子！而且帖子制作的技术含量极高！{:4_190:}
页:
[1]
2