今天大年初一祝新年快乐！

冬天的雨 发表于 2024-2-10 11:32

本帖最后由冬天的雨于 2024-2-17 21:16 编辑 <br /><br /><style>
#papa {
   margin: 150px 0 0 calc(50% - 781px);
   width: 1400px;
   height: 798px;
   background:
            url('https://pic.imgdb.cn/item/65c5c27a9f345e8d030315d1.jpg') no-repeat center/cover,
            url('https://pic.imgdb.cn/item/65c5c2a19f345e8d03036817.gif') repeat-x 0 100%;
   background-blend-mode: color-burn;
   box-shadow: 3px 3px 20px #000;
   position: relative;
   display: grid;
   place-items: center;
   z-index: 1;
}
#papa::after {
   position: absolute;
   content: '';
   inset: 0;
   background: rgba(0,0,0,.5);
   opacity: 0;
   pointer-events: none;
   animation: flash .1s infinite alternate var(--state);
}
.btnplay {
   position: absolute;
   cursor: pointer;
   animation: rot 5s linear infinite var(--state);

top: 120px;
   left: 650px;
   width: 200px;

}
.btnplay:nth-of-type(2) {
   top: 420px;
   left: 1230px;
   width: 80px;
   filter: invert(.8);
   animation-delay: -.6s;
}
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes flash { to { opacity: .5; } }

</style>

<div id="papa">

   <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1477578256" loop autoplay></audio>
      <img class="btnplay" src="https://638183.freep.cn/638183/small/4yc.png" alt="" title="播放/暂停" />
   <img class="btnplay" src="https://638183.freep.cn/638183/small/4yc.png" alt="" title="播放/暂停" />
</div>

<script>
var btns = document.querySelectorAll('.btnplay');
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
btns.forEach(btn => onclick = () => aud.paused ? aud.play() : aud.pause());
</script>

冬天的雨 发表于 2024-2-10 11:32

祝花潮论坛的兄弟姐妹们新年快乐！

冬天的雨 发表于 2024-2-10 11:33

一起舞起来，欢乐的跳起来{:4_170:}

冬天的雨 发表于 2024-2-10 11:35

感谢马老师的源码分享，马老师我这个帖很奇怪，随便点击写个字音乐就会停止，然后再点一下音乐来了{:4_172:}

@马黑黑

红影发表于 2024-2-10 11:41

非常热闹欢腾，欣赏都冬小雨好帖，借帖祝大家新春快乐{:4_177:}

冬天的雨 发表于 2024-2-10 11:44

红影发表于 2024-2-10 11:41
非常热闹欢腾，欣赏都冬小雨好帖，借帖祝大家新春快乐

美女新年快乐{:4_187:}

亦是金 发表于 2024-2-10 12:42

谢谢冬雨的贺帖！跳起来，舞起来！祝大家新春快乐！{:4_187:}

亦是金 发表于 2024-2-10 12:46

冬雨牛！随便点击网页的任何位置都能控制歌曲的开始和停止！{:4_199:}

马黑黑 发表于 2024-2-10 13:19

冬天的雨发表于 2024-2-10 11:35
感谢马老师的源码分享，马老师我这个帖很奇怪，随便点击写个字音乐就会停止，然后再点一下音乐来了{:4_172: ...

btns.forEach(btn => onclick = () => aud.paused ? aud.play() : aud.pause());

改为

btns.forEach(btn => btn.onclick = () => aud.paused ? aud.play() : aud.pause());

梦油发表于 2024-2-10 13:55

打油朋友过年好！

樵歌发表于 2024-2-10 17:01

牵起小手跳起来，龙年好运喜开怀。亲亲热热一家人，脸儿灿烂百花开。

樵歌发表于 2024-2-10 17:02

小冬雨新年好{:4_185:}

醉美水芙蓉 发表于 2024-2-10 17:11

红影发表于 2024-2-10 20:50

冬天的雨发表于 2024-2-10 11:44
美女新年快乐

谢谢冬小雨，大家一起过年快乐{:4_187:}

千羽发表于 2024-2-10 20:54

这欢腾的动态效果提升了欢乐氛围，冬雨棒棒哒{:4_187:}

无尘发表于 2024-2-10 23:03

冬雨新年快乐

冬天的雨 发表于 2024-2-17 21:06

亦是金发表于 2024-2-10 12:42
谢谢冬雨的贺帖！跳起来，舞起来！祝大家新春快乐！

问好亦是金老师，给你拜晚年了{:4_187:}

冬天的雨 发表于 2024-2-17 21:07

无尘发表于 2024-2-10 23:03
冬雨新年快乐

啊~~~看见和尚了，冬雨给你拜晚年了{:4_187:}

冬天的雨 发表于 2024-2-17 21:08

千羽发表于 2024-2-10 20:54
这欢腾的动态效果提升了欢乐氛围，冬雨棒棒哒

千羽晚上好，冬雨给你拜晚年了{:4_187:}

冬天的雨 发表于 2024-2-17 21:08

红影发表于 2024-2-10 20:50
谢谢冬小雨，大家一起过年快乐

美女好久没有碰到了，冬雨给你拜个晚年{:4_187:}

页: [1] 2

花潮论坛's Archiver

今天大年初一 祝新年快乐！

今天大年初一祝新年快乐！