论坛 › 欢乐水吧 › 《亲爱的你怎么不在我身边》-- 李梦瑶

加林森 发表于 2022-5-9 19:25

《亲爱的你怎么不在我身边》-- 李梦瑶

<style type="text/css">
.paBox { /* 父框 */
      margin: 10px auto;
      width: 1000px;
      height: 562px;
      position: relative;
      background: #000 url('https://pic.imgdb.cn/item/6278eb920947543129554309.jpg') no-repeat;
      left: -210px;
}
/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
      content: "";
      position: absolute;
      width: 500px; height: 2px;
      background: silver;
      left: 300px; top: 230px;
      opacity: 0.1;
      transform-origin: center center;
}
/* 父框和 .soBox 的伪元素各自的动画样式 */
.paBox::before { animation: fly 2s linear infinite alternate;}
.paBox::after { height: 4px; animation: fly 5s linear infinite;}
.soBox::before { animation: fly 3s linear infinite;}
.soBox::after { height: 5px; animation: fly 1s linear infinite alternate;}

@keyframes fly { 100% { transform: rotate(360deg); } }
/*旋转按钮*/
.roBox32 {
      margin: 10px;
      position: relative;
      width: 32px; height: 32px;
      line-height: 32px; font-size: 12px;
      background: linear-gradient(blue,gray,red);
      outline:none;
      color: white;
      border-radius: 50%;
      text-align: center;
      box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25);
      cursor: pointer;
      animation: rol linear 2s infinite;
}
.roBox32:hover { opacity: 0.8; }
.roBox32:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>

<div class="paBox">
      <div class="soBox"></div>
      <p style="position: absolute; left:240px; top:480px; color:#FFA500;"><marqueescrollamount="3" direction="left" >亲爱的你怎么不在我身边-李梦瑶</marquee></p>
      <!-- 按钮 -->
      <div id="roBox" class="roBox32" style="left:10%;top:88%;">●</div>
</div>

<audio id="ymusic" src="http://www.kumeiwp.com/sub/filestores/2022/05/08/49da79018d84bfbadf58c9ffdd888de1.mp3" autoplay="autoplay" loop="loop"></audio>

<script language="javascript">
var mu = document.getElementById('ymusic');      
var roBtn = document.getElementById('roBox');
mu.autoplay ? roBtn.style.animationPlayState="running" : roBtn.style.animationPlayState="paused";
mu.addEventListener("ended", function(){ roBtn.style.animationPlayState="paused"; })
roBtn.onclick = function(){ mu.paused ? (mu.play(), roBtn.style.animationPlayState="running") : (mu.pause(), roBtn.style.animationPlayState="paused"); }
</script>

加林森 发表于 2022-5-9 19:26

本帖最后由 加林森 于 2022-5-9 19:27 编辑

亲爱的你怎么不在我身边-李梦瑶
词：邬裕康

曲：郭子

这里的空气很新鲜

这里的小吃很特别

这里的latte

不像水

这里的夜景很有感觉

在一万英尺的天边

在有港口view的房间

在讨价还价的商店

在凌晨喧闹的三四点

可是亲爱的你怎么不在我身边

我们有多少时间能浪费

电话再甜美传真再安慰

也不足以应付不能拥抱你的遥远

我的亲爱的你怎么不在我身边

一个人过一天像过一年

海的那一边乌云一整片

我很想为了你快乐一点

可是亲爱的你怎么不在身边

在一万英尺的天边

在有港口view的房间

在讨价还价的商店

在凌晨喧闹的三四点

可是亲爱的你怎么不在我身边

我们有多少时间能浪费

电话再甜美传真再安慰

也不足以应付不能拥抱你的遥远

我的亲爱的你怎么不在我身边

一个人过一天像过一年

海的那一边乌云一整片

我很想为了你快乐一点

可是亲爱的你怎么不在身边

千羽 发表于 2022-5-9 19:30

队长这图好美，几个元素都用的精彩，那小小的播放器漂亮{:4_187:}

加林森 发表于 2022-5-9 19:43

千羽 发表于 2022-5-9 19:30
队长这图好美，几个元素都用的精彩，那小小的播放器漂亮

千羽晚上好。{:4_204:}我在回顾原来的制作，重新制作出来的。{:4_189:}

醉美水芙蓉 发表于 2022-5-9 20:45

加林森 发表于 2022-5-9 20:49

醉美水芙蓉 发表于 2022-5-9 20:45
进来欣赏老师佳作！

谢谢水芙蓉的支持！{:4_204:}

梦油 发表于 2022-5-9 21:22

加林森朋友晚上好！你制作的真漂亮，那小播放器虽小，但起到了画龙点睛的作用。

加林森 发表于 2022-5-9 21:31

梦油 发表于 2022-5-9 21:22
加林森朋友晚上好！你制作的真漂亮，那小播放器虽小，但起到了画龙点睛的作用。

一个小光蝶制作的。

红影 发表于 2022-5-9 21:41

真漂亮。欣赏队长好帖{:4_187:}

加林森 发表于 2022-5-9 21:46

红影 发表于 2022-5-9 21:41
真漂亮。欣赏队长好帖

谢谢红影支持！{:4_204:}

红影 发表于 2022-5-10 10:25

加林森 发表于 2022-5-9 21:46
谢谢红影支持！

队长温故而知新，真棒{:4_187:}

梦油 发表于 2022-5-10 10:36

加林森 发表于 2022-5-9 21:31
一个小光蝶制作的。

制作的很好。

加林森 发表于 2022-5-10 10:50

梦油 发表于 2022-5-10 10:36
制作的很好。

是的。

加林森 发表于 2022-5-10 10:50

红影 发表于 2022-5-10 10:25
队长温故而知新，真棒

就是怕忘记了哦。{:4_204:}

梦油 发表于 2022-5-10 13:41

加林森 发表于 2022-5-10 10:50
是的。

我相信，你的制作会越来越好，水平会越来越高。

加林森 发表于 2022-5-10 13:48

跟到学习会不断地提高的。

红影 发表于 2022-5-11 10:06

加林森 发表于 2022-5-10 10:50
就是怕忘记了哦。

看看之前的那些代码，觉得很亲切的感觉{:4_204:}

加林森 发表于 2022-5-11 11:07

红影 发表于 2022-5-11 10:06
看看之前的那些代码，觉得很亲切的感觉

是的，只有去努力制作后才知道这里面的辛苦。

查看完整版本: 《亲爱的你怎么不在我身边》-- 李梦瑶