宁静 发表于 2023-4-8 21:12

舞动的裙子


<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>

宁静 发表于 2023-4-8 21:13

鼠标滑过画面播放器出来，点击停止裙子舞动

楚心兰 发表于 2023-4-8 21:39

真奇妙啊

楚心兰 发表于 2023-4-8 21:40

周末愉快！宁静。

沉默 发表于 2023-4-8 21:42

裙子有点大{:9001:}

沉默 发表于 2023-4-8 21:43

特别后面大的出奇

沉默 发表于 2023-4-8 21:45

飘起来有点。。。。漂亮的{:9022:}

宁静 发表于 2023-4-8 21:54

楚心兰 发表于 2023-4-8 21:39
真奇妙啊

心兰晚上好{:10_402:}

宁静 发表于 2023-4-8 21:55

楚心兰 发表于 2023-4-8 21:40
周末愉快！宁静。

心兰周末快乐~~

宁静 发表于 2023-4-8 21:55

沉默 发表于 2023-4-8 21:42
裙子有点大

漂亮吧{:9007:}
页: [1] 2 3 4
查看完整版本: 舞动的裙子