舞动的裙子TO：樵哥哥
<style>
#papa {
margin: 80px 0 0 calc(50% - 303px);
width: 680px;
height: 852px;
background: url('https://wj.zp68.com/lxx/yunhua/2023/04/02/038.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#vid { display: none; }
#canv {
position: absolute;
display: block;
opacity: 1;
animation: opa 20s infinite alternate linear;
}
#mplayer {
position: absolute;
left: calc(50% - 15px);
bottom: 5px;
width: 30px;
height: 30px;
border: 2px solid Snow;
border-radius: 50%;
opacity: 0;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: Snow;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 10px;
border-width: 10px 12px;
border-color: transparent transparent transparent Snow;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 20px;
border-width: 0 4px 0 4px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }
.txtBg {
position: absolute;
left: -60px;
top: 50px;
font-size: 3.0rem;
color: transparent;
width: 500px;
height: 100px;
line-height: 100px;
text-align: center;
background-image: linear-gradient(90deg,green, olive, tomato, green);
background-size: 500px 100px;
background-position: 500px 0;
border: 1px solid;
background-clip: text;
-webkit-background-clip: text;
animation: chgc 2s linear infinite;
}
</style>
<div id="papa">
<canvas id="canv"></canvas>
<div class="txtBg">舞动的裙子</div>
<div id="mplayer"></div>
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2022/08/30/Want.mp3" loop autoplay></audio>
<video id="vid" src="https://zgsy-1254134120.cos.ap-guangzhou.myqcloud.com/cq.mp4"loop autoplay muted></video>
<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh, 0, 0, ww + 100, hh + 100);if(!vid.paused) {requestAnimationFrame(loop);return;}};
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>
@樵歌
樵哥哥，鼠标滑过界面播放器出来，点击停止音乐和舞动的裙子。再点击播放器打开效果出来 沙发留给师兄。@樵歌快来收礼{:4_187:} @走过岁月
岁月，不知道为什么你发的素材图片我和视频就是不能合一起，我干脆缩小了图图，加亮了颜色。 这舞动的裙子像云霞一样美丽。听着美美的音乐欣赏舞动的裙子，感觉真好{:4_187:} 红影 发表于 2023-4-4 21:36
这舞动的裙子像云霞一样美丽。听着美美的音乐欣赏舞动的裙子，感觉真好
哈哈~~亲爱的，这个舞动的裙子是不是特别的漂亮。。。。。
岁月做的美臀藏在里面{:4_170:}@走过岁月 很漂亮的大长裙，播放器也隐藏的巧妙{:4_187:} 樵歌老师，快来收礼啦{:4_187:} 本帖最后由 千羽 于 2023-4-5 21:41 编辑
小辣椒 发表于 2023-4-4 21:46
哈哈~~亲爱的，这个舞动的裙子是不是特别的漂亮。。。。。
岁月做的美臀藏在里面@走过岁月
哈哈，那个大大的鼓包就是了{:4_173:} 千羽 发表于 2023-4-4 22:06
哈哈，那个大大的包包就是了
千羽，你最聪明{:4_179:} 千羽 发表于 2023-4-4 22:04
很漂亮的大长裙，播放器也隐藏的巧妙
千羽好~~我现在是匆匆忙忙看看就下的，
{:4_185:} 小辣椒 发表于 2023-4-4 22:12
千羽，你最聪明
不是聪明啊，大长裙用的好{:4_179:} 小辣椒 发表于 2023-4-4 22:13
千羽好~~我现在是匆匆忙忙看看就下的，
好吧，需要我来掩护吗？{:4_203:} 千羽 发表于 2023-4-4 22:15
不是聪明啊，大长裙用的好
是岁月的功劳{:4_196:} 小辣椒 发表于 2023-4-4 22:15
是岁月的功劳
这个嘛，我相信{:4_189:} 千羽 发表于 2023-4-4 22:15
好吧，需要我来掩护吗？
我也是好晕，怎么春天到了会这么懒散了 小辣椒 发表于 2023-4-4 22:17
我也是好晕，怎么春天到了会这么懒散了
小辣椒，俗话说：春困秋乏，正常的{:4_181:} 千羽 发表于 2023-4-4 22:18
小辣椒，俗话说：春困秋乏，正常的
我就是想睡觉，晕乎乎的 小辣椒 发表于 2023-4-4 22:19
我就是想睡觉，晕乎乎的
那就快去呼呼吧，晚安好梦哈{:4_173:} 小辣椒 发表于 2023-4-4 21:46
哈哈~~亲爱的，这个舞动的裙子是不是特别的漂亮。。。。。
岁月做的美臀藏在里面@走过岁月
是啊，这个动态很柔美，特别漂亮{:4_187:}