花潮：欢乐的海洋

杨帆发表于 2025-3-11 21:42

本帖最后由杨帆于 2025-9-20 19:14 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>花潮：欢乐的海洋</title>
</head>

<body>
<style>
   #papa {
         margin: 100px 0 30px calc(50% - 721px);
         width: 1280px;
         height: 740px;
         box-shadow: 4px 4px 8px rgba(0, 0, 0, .6);
         background: silver url('https://pic.imgdb.cn/item/675d3639d0e0a243d4e3d96b.jpg') no-repeat center/cover;
         border-radius: 32px;
         overflow: hidden;
         position: relative;
         z-index: 1;
   }

#papa::before { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://pic.imgdb.cn/item/675d3639d0e0a243d4e3d96b.jpg') no-repeat center/cover; animation: sway 4s linear infinite alternate var(--state);}

#papa:hover {background-blend-mode: darken; }

   @keyframes sway { to { transform: rotate(3deg); } }

   #fullscreen {
         opacity: 0;
         position: relative;
         z-index: 8;
         top: 40px;
         width: 42px;
         height: 42px;
         cursor: pointer;
         left: 10%;
   }

   #papa:hover #fullscreen {
         opacity: 1;
   }

   #全屏 {
         width: 42px;
         height: 42px;
         position: absolute;
         background: url('https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png') no-repeat center/cover;
         opacity: 1;
   }

   #退出 {
         width: 42px;
         height: 42px;
         position: absolute;
         opacity: 0;
         background: url('https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png') no-repeat center/cover;
         opacity: 1;
   }

   #vid1 {
         position: absolute;
         width: 728px;
         height: 450px;
         left: 5%;
         top: 18%;
         object-fit: cover;
         border: 3px solid #ccc;
         box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3) inset;
         border-radius: 50%;
         mix-blend-mode: unset;
         pointer-events: none;opacity: .85; transition: 1s;

   }

      #vid2,#vid3 {
         position: absolute;
         width: 100%;
         height: 100%;
         left: 0%;
         top: 0%;
         object-fit: cover;
         mix-blend-mode: screen;
         mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);
         -webkit-mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);
   pointer-events: none;

   }

   #player {
         position: absolute;
         margin: 20px 30px auto;
         width: 80px;
         height: 80px;
         cursor: pointer;
         pointer-events: auto;
         border-radius: 50%;
         opacity: 0;
         animation: rot 8s linear infinite var(--state);
   }

   #player:hover {
         transform: scale(1.2);
         transition: transform .4s;
         animation-play-state: paused;
         filter: drop-shadow(0 0 80px Gold);
   }

   @keyframes rot {
         to {
            transform: rotate(360deg);
         }
   }

   #papa:hover #player {
         opacity: 1;
   }

   #move {
         position: absolute;
         object-fit: cover;
         z-index: 2;
         top: 18%;
         right: 1%;
         background-size: cover;
         width: 450px;
         height: 450px;
         margin: 0 auto;

         clip-path: polygon(50% 0%,
               100% 25%,
               100% 75%,
               50% 100%,
               0% 75%,
               0% 25%);
         background-color: transparent;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
         display: flex;
         align-items: center;

   }

   .tit {
         position: relative;
         font: bold 1.8em SimKai;
         font-weight: 450;
         text-align: center;
         line-height: 65px;
         color: #ffcc00;
         pointer-events: auto;

   }

   #marquee {
         height: 100%;
         width: 100%;
         overflow: hidden;
         position: absolute;
         top: 40%;
         left: 50%;
         transform: translate(-50%, -50%);

   }

   #marquee>div {
         text-align: center;
         animation: marquee 35s linear infinite var(--state);
   }

   #marquee:hover>div {
         animation-play-state: paused;
   }

   #marquee p {
         height: 120px;
         margin: 0;
   }

   @keyframes marquee {
         0% {
            transform: translateY(0%);
         }

         100% {
            transform: translateY(-100%);
         }
   }

   #dt {
         position: absolute;
         top: 13%;
         left: 60%;
         WIDTH: 465px;
         height=350px;
         z-index: 1;
   }
</style>
<div id="papa">
   <span id="fullscreen" title="全屏/退出">
         <div id="全屏"></div>
         <div id="退出"></div>
   </span>
   <div id="dt">
         <img src="https://cccimg.com/view.php/b1033dcc31ae8760df0d34ee0eafff18.gif" id="Img" /> </div>
   <video id="vid1" src="https://video-qn.51miz.com/vcg/video/preview/00/00/68/69/51miz_V686945_NWMKWjmE7.mov" autoplay loop muted oncontextmenu="return false"></video>
   <video id="vid2" src="https://img.tukuppt.com/video_show/2414777/00/02/09/5b5050e458de0.mp4" autoplay loop muted></video>
   <video id="vid3" src="https://img.tukuppt.com/video_show/2418175/01/26/86/625cb56685d18.mp4" autoplay loop muted></video>
   <audio id="aud" src="http://music.163.com/song/media/outer/url?id=2095836258.mp3" autoplay loop></audio>
   <img id="player" src="https://638183.freep.cn/638183/small/2025/2501.webp" alt="" />
   <div id="move">
         <div id="marquee">
            <div class="tit">
               <h3>花潮：欢乐的海洋</h3><br />
               无论来自何方<br />
               无论年龄大小<br />
               无论彼此的城市远近<br />
               只要你进入花潮<br />
               就是花潮大家庭的一员<br />
               我们就是弥足珍贵的朋友<br /><br />
               朋友是一生修来的福份<br />
               友情是一世难求的缘份<br />
               不同的年龄产生不了距离<br />
               不同的性别影响不了友谊<br />
               我们有着共同的追求与志趣<br />
               一句句一串串一行行的字符<br />
               描绘出一幅幅壮美的画卷<br />
               迸发出一首首灵动的诗篇<br />
               凝练出一曲曲优美的旋律<br />
               弘扬真善美传播正能量<br />
               鞭挞假恶丑维护公平正义<br />
               天行健，君子以自强不息<br />
               地势坤，君子以厚德载物<br />
               提升正气，心怀善念，脚踏实地<br /><br />
               祝福花潮<br />
               与时俱进<br />
               蒸蒸日上<br />
               繁花似锦<br /><br />
               祝福朋友<br />
               平平安安<br />
               幸福永远<br />
               快乐天天<br />
               <br />
            </div>
         </div>
   </div>
</div>
<script>
   const marquee = document.getElementById('marquee');
   const contents = marquee.innerHTML;
   marquee.innerHTML = contents + contents;
   var mState = () => {
         papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
         player.title = aud.paused ? '播放' : '暂停';
         aud.paused ? (vid1.pause(), vid2.pause(), vid3.pause()):( vid1.play(),vid2.play(),vid3.play());
         Img.style.setProperty('opacity', aud.paused ? '0' : '.9');
   };
   aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
   player.onclick = () => aud.paused ? aud.play() : aud.pause();
   let fs = true;
   fullscreen.onclick = () => {
         fs ? (papa.requestFullscreen(), 全屏.style.opacity = '0', 退出.style.opacity = '1') : (document.exitFullscreen(), 全屏.style.opacity = '1', 退出.style.opacity = '0');
         fs = !fs;
   }
</script>
</body>

</html>

红影发表于 2025-3-11 21:56

感谢杨帆为花潮做的赞颂之语，制作又那么漂亮，太感谢了{:4_199:}{:4_187:}

红影发表于 2025-3-11 21:58

视频轮播也漂亮，播放器在鼠标滑过会自动浮现，滚动字也在鼠标触碰时能暂停，所有动态还能一键暂停，这个制作太棒了{:4_199:}{:4_199:}{:4_199:}

红影发表于 2025-3-11 22:00

唯一的小瑕疵是全屏无法出来，其他的都很好。
十分感谢杨帆带来的好帖，我们一起祝愿花潮越来越好{:4_187:}{:4_177:}

杨帆发表于 2025-3-11 22:29

本帖最后由杨帆于 2025-3-11 23:40 编辑

红影发表于 2025-3-11 21:56
感谢杨帆为花潮做的赞颂之语，制作又那么漂亮，太感谢了呵呵，有感而发，让你见笑了。
谢谢影子支持与鼓励{:4_187:}

杨帆发表于 2025-3-11 22:32

本帖最后由杨帆于 2025-3-12 03:37 编辑

红影发表于 2025-3-11 22:00
唯一的小瑕疵是全屏无法出来，其他的都很好。
十分感谢杨帆带来的好帖，我们一起祝愿花潮越来越好{:4_187: ...
已修复。共祝福——花潮越来越好{:4_191:}

梦油发表于 2025-3-12 09:16

花潮，是我们可爱的家，温馨的家。

红影发表于 2025-3-12 09:44

杨帆发表于 2025-3-11 22:29
呵呵，有感而发，让你见笑了。
谢谢影子支持与鼓励

谢谢杨帆的美好赞颂，我们一起欢聚在这方美好的心灵家园{:4_187:}

红影发表于 2025-3-12 09:45

杨帆发表于 2025-3-11 22:32
已修复。共祝福——花潮越来越好

嗯嗯，看到了，全屏效果更好{:4_199:}

红影发表于 2025-3-12 09:45

梦油发表于 2025-3-12 09:16
花潮，是我们可爱的家，温馨的家。

谢谢梦油{:4_187:}

梦油发表于 2025-3-12 10:51

红影发表于 2025-3-12 09:45
谢谢梦油

“栽树人”功不可没。

杨帆发表于 2025-3-12 12:33

梦油发表于 2025-3-12 09:16
花潮，是我们可爱的家，温馨的家。

是的，共祝福——花潮越来越好{:4_176:}

杨帆发表于 2025-3-12 12:38

红影发表于 2025-3-12 09:44
谢谢杨帆的美好赞颂，我们一起欢聚在这方美好的心灵家园

好，在这个温馨之家，滋养心灵、淬炼灵魂、丰盈生命{:4_187:}

流水光阴 发表于 2025-3-12 17:19

问好老师欣赏了

流水光阴 发表于 2025-3-12 17:20

没有看见背景？

流水光阴 发表于 2025-3-12 17:20

刷新几次背景出来了

老谟深虑 发表于 2025-3-12 18:53

欣赏老师的佳作，祝花潮论坛越办越好！

红影发表于 2025-3-12 19:10

梦油发表于 2025-3-12 10:51
“栽树人”功不可没。

大家都是维护树木生长的爱树人呢{:4_187:}

红影发表于 2025-3-12 19:12

杨帆发表于 2025-3-12 12:38
好，在这个温馨之家，滋养心灵、淬炼灵魂、丰盈生命

在这里有网友们友好互动，有新的知识可以学习，让上网更有乐趣{:4_187:}

小辣椒 发表于 2025-3-12 22:51

杨帆这个也是视频背景吧，手机看不到效果

页: [1] 2

花潮论坛's Archiver

花潮：欢乐的海洋