杨帆 发表于 2026-9-11 19:53

《毛选》金句50条

本帖最后由 杨帆 于 2026-9-11 20:50 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>《毛选》金句50条</title>
</head>
<body>
<style>
.pa{position:relative;display:grid;place-items:center;margin: 80px 0px;width: 1280px;height: 760px;left: calc(50% - 81px);transform: translateX(-50%);--bg1:url('https://pic1.imgdb.cn/i/034MrGIgPD0oJ8Jmvg1usX.webp') no-repeat center/cover;--bg2:url('https://pic1.imgdb.cn/i/034Mr9H99IVQ5H0BbT8Enz.jpg') no-repeat center/cover;box-shadow:3px 3px 6px gray;overflow:hidden;z-index:1;background:var(--bg1),var(--bg2);--state:running;--clipPath: '';}
#btnFs{position:absolute;left:calc(100% - 130px);top:25px;padding:6px 12px;background:green;color:white;border:2px solid white;border-radius:8px;cursor:pointer;z-index:10;font:normal 1.3em 楷体;text-shadow:0 0 3px #000;}
#btnFs:hover{background:#218838;font-style:italic;scale:1.05;translate:-1px 1px;}
#tip{position:absolute; left:6%; top: 50%;transform: translateY(-50%);writing-mode: vertical-rl; text-orientation: upright;height:100%;white-space: pre-wrap;font:3.5em 华文新魏;font-weight:800;color:#FFA500;text-align:center;z-index:2;}   
.subtitle{position:absolute;left:12%;top: 50%;transform: translateY(-50%);writing-mode: vertical-rl; text-orientation: upright;height:100%;white-space: pre-wrap;color:#836FFF;font-size:36px;text-align:center;z-index:2;}
#player{position:absolute;z-index:20;right:3%;bottom:3%;width:120px;height:120px;transition: 1.2s; background:#ff5588; clip-path: var(--clipPath);pointer-events:auto;cursor: pointer;animation:rot 8s infinite alternate-reverse var(--state);}
#player:hover{filter: invert(1);}
@keyframes rot{to{transform:rotate(360deg);}}
#bg-carousel{position:absolute;top:2%;left:50%;transform:translateX(-50%);width:540px;height:720px;z-index:0;}
:fullscreen #bg-carousel{position:absolute;top:10%;left:50%;transform:translateX(-50%);width:590px;height:770px;z-index:0;}
.bg-slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;pointer-events:none;transition:opacity 1.8s ease-in-out;will-change:opacity;}
.bg-slide.active{opacity:1;}
.bg-slide.paused{transition:none;}
.vid{position:absolute;top:-10%;left:-10%;width:120%;height:120%;object-fit:cover;mix-blend-mode:screen;opacity:0.1;z-index:1;pointer-events:none;}
#boxa{position: absolute; left:50%; top: -5%;width:660px; height:700px; mask: url('https://638183.freep.cn/638183/t23/btn/y5j.png') no-repeat 45% 25% / 100% 100%;-webkit-mask: url('https://638183.freep.cn/638183/t23/btn/y5j.png') no-repeat 45% 25% / 100% 100%;}
:fullscreen #boxa{position: absolute; left:55%; top: 5%;width:770px; height:800px; mask: url('https://638183.freep.cn/638183/t23/btn/y5j.png') no-repeat 45% 25% / 100% 100%;-webkit-mask: url('https://638183.freep.cn/638183/t23/btn/y5j.png') no-repeat 45% 25% / 100% 100%;}
#pic { position: absolute;left:58%; top: 23%;width: 100%; height: 100%;filter:contrast(120%) saturate(150%) brightness(150%);-webkit-mask-image: radial-gradient(black 58% ,transparent 80%);opacity: 1; }
</style>
<div class="pa" id="pa">
<span id="btnFs">全屏欣赏</span>
<div id="player" title="播放/暂停"></div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=132675.mp3" autoplay loop preload="auto" playsinline></audio>
<video class ="vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/15/5e1c06cdf1cd6.mp4" autoplay loop preload="auto" playsinline muted></video>
   <div id="boxa"> <img id="pic" src="https://pic1.imgdb.cn/i/034MlJACX9HLWtvTV9qf5c.jpg" alt="" /></div>
<pid="tip">《毛选》金句50条</p>
<p class="subtitle">&#x2728;句句都是人生指南&#x2728;</p>
<div id="bg-carousel">
<div class="bg-slide active" style="background-image: url('https://pic1.imgdb.cn/i/034MJNMM8mfokWPJSJqysA.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://pic1.imgdb.cn/i/034MJNMCaSouapyzm1xwSO.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://pic1.imgdb.cn/i/034MJNNlBmWZ7LNeAm17lo.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://pic1.imgdb.cn/i/034MJNNFtzmpFJGg1Q7iEo.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://pic1.imgdb.cn/i/034MJU8JH9oh1CoOH6DOfn.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://pic1.imgdb.cn/i/034MJU7oT69fQUB1UodSmv.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://pic1.imgdb.cn/i/034MJU8MadJgMFVL8fmImM.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://pic1.imgdb.cn/i/034MJU8NMqW4rmYuyuvnLn.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://pic1.imgdb.cn/i/034MJU6n0asVLqEH1SfMY9.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://pic1.imgdb.cn/i/034MJYvUfeLkZrC7LfKnzS.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://pic1.imgdb.cn/i/034MJYtmo8EzzxvsOINTke.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://pic1.imgdb.cn/i/034MJYvYZKR8QnYFBcwyjB.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://pic1.imgdb.cn/i/034MJYtqu5jB0R6yG3CTvB.jpg');"></div>
</div></div>
<script>
let rosePath = (ww, num) => {
    let points = 300;
    let x0 = y0 = r = ww / 2, pathAr = [];
    for (let i = 0; i <= points; i++) {
      let angle = i * 2 * Math.PI / points;
      let x = x0 - r * Math.cos(angle) * Math.sin(num * angle);
      let y = y0 - r * Math.sin(angle) * Math.sin(num * angle);
      pathAr.push(x + 'px ' + y + 'px');
    }
    return `polygon(${pathAr.join(', ')})`;
};
const vid = document.querySelector('.vid');
const pa = document.getElementById('pa');
pa.style.setProperty('--clipPath', rosePath(120, 4));
(function() {
            const slides = document.querySelectorAll('.bg-slide');
            let currentIndex = 0;
            const totalSlides = slides.length;
            let slideInterval = null;
            let isCarouselPaused = false;
            function showSlide(index) {
                slides.forEach((slide, i) => {
                  slide.classList.toggle('active', i === index);
                });
            }
            function nextSlide() {
                if (isCarouselPaused) return;
                currentIndex = (currentIndex + 1) % totalSlides;
                showSlide(currentIndex);
            }
            function startCarousel() {
                if (slideInterval) {
                  clearInterval(slideInterval);
                  slideInterval = null;
                }
                slides.forEach((slide, i) => {
                  slide.classList.toggle('active', i === currentIndex);
                });
                slideInterval = setInterval(nextSlide, 26000);
                isCarouselPaused = false;
            }
            function pauseCarousel() {
                isCarouselPaused = true;
                if (slideInterval) {
                  clearInterval(slideInterval);
                  slideInterval = null;
                }
                slides.forEach(slide => {
                  slide.classList.add('paused');
                });
            }
            function resumeCarousel() {
                isCarouselPaused = false;
                slides.forEach(slide => {
                  slide.classList.remove('paused');
                });
                if (slideInterval) {
                  clearInterval(slideInterval);
                  slideInterval = null;
                }
                slideInterval = setInterval(nextSlide, 15000);
            }
            window.bgCarousel = {
                start: startCarousel,
                pause: pauseCarousel,
                resume: resumeCarousel,
                isPaused: function() { return isCarouselPaused; }
            };
            startCarousel();         
      })();
player.onclick=()=>{
aud.paused?aud.play():aud.pause();
};
const mState=()=>{
aud.paused?bgCarousel.pause(): bgCarousel.resume();
aud.paused?vid.pause(): vid.play();
pa.style.setProperty('--state',aud.paused?'paused':'running');
pa.style.setProperty('--bg2',aud.paused?'':'none');
pa.style.setProperty('--bg1',aud.paused?'none':'');
};
aud.addEventListener('canplay',mState);
aud.addEventListener('playing',mState);
aud.addEventListener('pause',mState);
let fs=true;let fsTimer;
btnFs.onclick=()=>{fs?(btnFs.innerText='退出全屏',pa.requestFullscreen()):(btnFs.innerText='全屏欣赏',document.exitFullscreen());fs=!fs;};
pa.addEventListener('mousemove',()=>{clearTimeout(fsTimer);btnFs.style.opacity='1';fsTimer=setTimeout(()=>{btnFs.style.opacity='0';},3000);});
['contextmenu', 'dragstart','selectstart'].forEach(type =>
document.getElementById('pa').addEventListener(type, e => e.preventDefault()));
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
    if (!aud.paused) aud.pause();
} else {
    if (aud.paused && !aud.ended) aud.play().catch(()=>{});
}
});
</script>
</body>
</html>

红影 发表于 2026-9-11 21:48

这帖子内容带着点飘渺，制作很漂亮。
欣赏扬帆好帖{:4_199:}

杨帆 发表于 2026-9-11 23:39

红影 发表于 2026-9-11 21:48
这帖子内容带着点飘渺，制作很漂亮。
欣赏扬帆好帖

“飘渺”如何理解呢？谢谢影子鼓励{:4_204:}

红影 发表于 2026-9-12 06:51

杨帆 发表于 2026-9-11 23:39
“飘渺”如何理解呢？谢谢影子鼓励

我是说制作效果，其实更喜欢的是内容{:4_173:}

杨帆 发表于 2026-9-12 08:53

红影 发表于 2026-9-12 06:51
我是说制作效果，其实更喜欢的是内容

问好影子，谢谢喜欢，谢谢鼓励{:4_187:}

梦江南 发表于 2026-9-12 10:05

构思独特，内容精彩，制作精美，欣赏点赞！{:4_187:}

梦江南 发表于 2026-9-12 10:06

谢谢杨帆带来的 《毛选》金句50条。问好！

杨帆 发表于 2026-9-12 11:04

本帖最后由 杨帆 于 2026-9-12 11:08 编辑

梦江南 发表于 2026-9-12 10:05
构思独特，内容精彩，制作精美，欣赏点赞！
我受益颇深，深有体会，这些金句乃人生指南，谢谢江南鼓励{:4_204:}

霜染枫丹 发表于 2026-9-12 20:20

问好杨帆！这些毛主席语录是当年我们几乎每天都会背诵的内容，现在看到有种亲切感，制作的漂亮。{:4_204:}{:4_190:}

杨帆 发表于 2026-9-13 13:59

霜染枫丹 发表于 2026-9-12 20:20
问好杨帆！这些毛主席语录是当年我们几乎每天都会背诵的内容，现在看到有种亲切感，制作的漂亮。{ ...

是，以此做到知行合一可少走弯路，谢谢枫丹老师鼓励{:4_204:}

小辣椒 发表于 2026-9-13 14:00

杨帆运用了图片转换效果

小辣椒 发表于 2026-9-13 14:07

杨帆这个制作很漂亮，还可以更加漂亮一点，直接把文字图片用png，把白的背景去了，就文字变化，画面效果更加好

小辣椒 发表于 2026-9-13 14:07

欣赏杨帆漂亮的制作{:4_187:}

杨帆 发表于 2026-9-13 18:58

小辣椒 发表于 2026-9-13 14:07
杨帆这个制作很漂亮，还可以更加漂亮一点，直接把文字图片用png，把白的背景去了，就文字变化，画面效果更 ...

很好的建议，请小辣椒有空时指导一下，该如何把文字图片转换成透明图呢，谢谢鼓励{:4_204:}

小辣椒 发表于 2026-9-15 21:16

杨帆 发表于 2026-9-13 18:58
很好的建议，请小辣椒有空时指导一下，该如何把文字图片转换成透明图呢，谢谢鼓励

杨帆就是用免费软件抠图啊，背景白的去了，留文字就可以，只是你背景要看看和字体颜色的对不对，否则同样的颜色会看不清文字，不过你可以ps修改文字颜色

杨帆 发表于 2026-9-15 21:21

小辣椒 发表于 2026-9-15 21:16
杨帆就是用免费软件抠图啊，背景白的去了，留文字就可以，只是你背景要看看和字体颜色的对不对，否则同样 ...

是，不过要让抠图效果理想也不太容易呢，谢谢小辣椒{:4_204:}
页: [1]
查看完整版本: 《毛选》金句50条