加林森 发表于 2022-2-6 21:11

《卫兰 - 街灯晚餐(Hyman Remix)2K20》 送大家！

本帖最后由 加林森 于 2022-2-8 17:35 编辑 <br /><br /><style type="text/css">
.paBox { /* 父框 */
      margin: 10px auto;
      width: 1024px;
      height: 640px;
      position: relative;
      background: #000 url('https://pic.imgdb.cn/item/61ffc68a2ab3f51d91e03b12.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:580px; color:#e12325;"><marqueescrollamount="3" direction="left" >《卫兰 - 街灯晚餐(Hyman Remix)2K20</marquee></p>
      <!-- 按钮 -->
      <div id="roBox" class="roBox32" style="left:10%;top:88%;">●</div>
</div>

<audio id="ymusic" src="https://www.joy127.com/url/8006.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-2-7 22:43

杨柳青 发表于 2022-2-7 22:41


又不懂？

红影 发表于 2022-2-6 22:07

又做成功一个，队长真棒{:4_199:}

加林森 发表于 2022-2-7 08:38

红影 发表于 2022-2-6 22:07
又做成功一个，队长真棒

嗯嗯，这张是制作大的了。

大猫咪 发表于 2022-2-7 12:43

制作真漂亮队长，赞~~~~~~~~~~

{:4_204:}{:4_176:}

加林森 发表于 2022-2-7 12:45

大猫咪 发表于 2022-2-7 12:43
制作真漂亮队长，赞~~~~~~~~~~

谢谢猫猫。{:4_204:}{:4_190:}

红影 发表于 2022-2-7 12:48

加林森 发表于 2022-2-7 08:38
嗯嗯，这张是制作大的了。

这个转动光柱看起来还是同一段上有不同颜色的，真神奇{:4_187:}

加林森 发表于 2022-2-7 12:51

红影 发表于 2022-2-7 12:48
这个转动光柱看起来还是同一段上有不同颜色的，真神奇

就是，挺好的。

红影 发表于 2022-2-7 15:02

加林森 发表于 2022-2-7 12:51
就是，挺好的。

看起来在不同的背景下，这个代码效果也不一样呢。

加林森 发表于 2022-2-7 15:08

红影 发表于 2022-2-7 15:02
看起来在不同的背景下，这个代码效果也不一样呢。

就是，每个效果都不一样的。

红影 发表于 2022-2-7 15:21

加林森 发表于 2022-2-7 15:08
就是，每个效果都不一样的。

可能放在错落有致的背景里，就会因为透明度的设置而让那些光棒变色的吧。

加林森 发表于 2022-2-7 15:35

红影 发表于 2022-2-7 15:21
可能放在错落有致的背景里，就会因为透明度的设置而让那些光棒变色的吧。

应该是的，在阳光下又不一样的。都会发生变化的。

红影 发表于 2022-2-7 16:28

加林森 发表于 2022-2-7 15:35
应该是的，在阳光下又不一样的。都会发生变化的。

真的挺神奇的呢。

加林森 发表于 2022-2-7 17:25

红影 发表于 2022-2-7 16:28
真的挺神奇的呢。

就是，我也做一个加大转盘效果的试试。

杨柳青 发表于 2022-2-7 19:30

肚子里有墨水的就是与众不同哈~~{:5_116:}

加林森 发表于 2022-2-7 19:55

杨柳青 发表于 2022-2-7 19:30
肚子里有墨水的就是与众不同哈~~

小家伙，你玩我啊。

杨柳青 发表于 2022-2-7 22:41

加林森 发表于 2022-2-7 19:55
小家伙，你玩我啊。

{:5_115:}

杨柳青 发表于 2022-2-7 23:07

加林森 发表于 2022-2-7 22:43
又不懂？

不知道啊~~{:5_105:}

加林森 发表于 2022-2-8 09:01

杨柳青 发表于 2022-2-7 23:07
不知道啊~~

哼哼

大猫咪 发表于 2022-2-8 11:00

制作真漂亮队长！ 必须点赞！ 中午好！


{:4_204:}{:4_199:}
页: [1] 2
查看完整版本: 《卫兰 - 街灯晚餐(Hyman Remix)2K20》 送大家！