论坛 › 音乐沙龙 › 一念执着

绿叶清舟 发表于 2023-2-24 10:41

一念执着

<style>
.mama33 { position: relative; left: -253px; width: 1100px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/63f75bfcf144a01007a8b6fd.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
#mplayer {
      position: absolute; /* 绝对定位方式 */
      width: 200px;/* 宽度 */
      height: px;/* 高度 */
      left: 60px; /* 定位 ：左边值 */
      top: px; /* 定位 ：右边值 */
      background: ;/* 背景色 */
      cursor: pointer; /*鼠标指针样式 ：手型 */
      animation: spin 8s linear infinite;/* 运行动画 */
      animation-play-state: var(--state);/* 动画运行状态 ：通过变量接受JS控制 */
      animation: fly 20s infinite;
}

.waiDiv { position: absolute;
      left: -10px;
      top: 222px;width:10%; min-height: 50px; padding:20px 0; background: .25; mix-blend-mode: hard-light;}
.water {
   margin: auto;
width: 10px;
height: 15px;
box-sizing: border-box;
border-radius: 30% 70% 70% 30% / 30% 35% 65% 70%;
box-shadow: inset 1px 2px 3px rgba(0,0,0,.5),1px 1px 2px rgba(0,0,0,.3),1px 1px 3px rgba(0,0,0,.5),inset -1px -1px 5px rgba(255,255,254,.83);
animation: wmv 1s linear infinite;
animation: wmv 4s 0s linear infinite;
}
@keyframes wmv{
20% { border-radius: 30% 70% 53% 47% / 28% 44% 56% 72%; }
40% { border-radius: 30% 70% 39% 61% / 34% 39% 61% 66%; }
60% { border-radius: 25% 75% 45% 55% / 40% 55% 45% 60%;}
80% { border-radius: 28% 72% 31% 69% / 32% 39% 61% 68%;}
0%, 100% {
      top: 7%;
      opacity: 0;
    }
    32.5% {
      opacity: 1;
    }
    75%{
      top: 4%;
      opacity: 0;
    }
}



</style>
<div class="mama33">
      <div id="mplayer" class="waiDiv">
<div class="water"></div>
      </div>      

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=101818.mp3" autoplay="autoplay" loop="loop"></audio>


<script>

let mState = () => {
      aud.paused ? papa.style.setProperty('--state', 'paused') : papa.style.setProperty('--state', 'running');
};

mplayer.addEventListener('click', () => {
      aud.paused ? aud.play() : aud.pause();
});

aud.addEventListener('play', () => mState());

aud.addEventListener('pause', () => mState());
</script>

红影 发表于 2023-2-24 11:22

我这里的网听不了音乐，不过看画面和浓烈的情感，欣赏清舟漂亮的制作{:4_199:}

醉美水芙蓉 发表于 2023-2-24 11:45

樵歌 发表于 2023-2-24 12:45

唱得个缠绵悱恻，哭得个泪眼欲滴。{:4_172:}

马黑黑 发表于 2023-2-24 12:58

心心念念

小九 发表于 2023-2-24 13:17

溶图很自然{:4_187:} 我要向你多学习学习{:4_187:}

海笑 发表于 2023-2-24 15:10

欣赏老师佳作！

梦油 发表于 2023-2-24 15:43

欣赏清舟朋友的精美制作。问候清舟朋友。

绿叶清舟 发表于 2023-2-24 19:48

梦油 发表于 2023-2-24 15:43
欣赏清舟朋友的精美制作。问候清舟朋友。

谢谢欣赏{:4_173:}晚上好

绿叶清舟 发表于 2023-2-24 19:48

海笑 发表于 2023-2-24 15:10
欣赏老师佳作！

谢谢海笑

绿叶清舟 发表于 2023-2-24 19:50

小九 发表于 2023-2-24 13:17
溶图很自然 我要向你多学习学习

借底层颜色有时吃图很好的

绿叶清舟 发表于 2023-2-24 19:50

马黑黑 发表于 2023-2-24 12:58
心心念念

念啥来着

绿叶清舟 发表于 2023-2-24 19:51

樵歌 发表于 2023-2-24 12:45
唱得个缠绵悱恻，哭得个泪眼欲滴。

没有唏利哗啦就好{:4_189:}

庶民 发表于 2023-2-24 20:11

都这样有才，制作的好美。

马黑黑 发表于 2023-2-24 20:26

绿叶清舟 发表于 2023-2-24 19:50
念啥来着

念词

梦油 发表于 2023-2-24 20:34

绿叶清舟 发表于 2023-2-24 19:48
谢谢欣赏晚上好

晚上好，清舟朋友。

绿叶清舟 发表于 2023-2-24 21:06

庶民 发表于 2023-2-24 20:11
都这样有才，制作的好美。

谢谢庶民，晚上好

绿叶清舟 发表于 2023-2-24 21:11

马黑黑 发表于 2023-2-24 20:26
念词

不是经啊{:4_189:}

小辣椒 发表于 2023-2-24 21:13

哇瑟~~清舟你这个制作太棒了{:4_178:}

小辣椒 发表于 2023-2-24 21:13

小辣椒这些不会的，欣赏加学习{:4_204:}

查看完整版本: 一念执着