加林森 发表于 2022-2-12 10:43

帖赠小辣椒【古城新韵】跟到学习制作的。

本帖最后由 加林森 于 2022-2-13 23:12 编辑 <br /><br /><style type="text/css">
.paBox { /* 父框 */
      margin: 10px auto;
      width: 1024px;
      height: 640px;
      position: relative;
      background: #000 url('https://pic.imgdb.cn/item/620717c82ab3f51d9123af57.jpg') no-repeat;
      left: -240px;
      top: 150px
}
/* 父框和 .soBox 的伪元素共同样式 */
//.paBox::before, .paBox::after, .soBox::before, .soBox::after {
      //content: "";
      //position: absolute;
      //width: 300px; height: 2px;
      //background: BlueViolet;
      //left: 550px; top: 120px;
      //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); } }
/*旋转按钮*/
.roBox74 {
      margin: 10px;
      position: relative;
      width: 50px; height: 50px;
      line-height: 50px; font-size: 14px;
      background: linear-gradient(Red,Pink,Indigo);
      outline:none;
      color: Indigo;
      border-radius: 50%;
      text-align: center;
      box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.45);
      cursor: pointer;
      animation: rol linear 2s infinite;
}
.roBox74:hover { opacity: 0.8; }
.roBox74:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>

<div class="paBox">
      <div class="soBox"></div>
      <p style="position: absolute; left:750px; top:500px; color: #ae0101;"><marqueescrollamount="4" direction="left" ><b><font face="微软雅黑" size="3">帖赠小辣椒【古城新韵】</font></marquee></p>
      <!-- 按钮 -->
      <div id="roBox" class="roBox74" style="left:74.8%;top:55.9%;">●</div>
</div>

<audio id="ymusic" src="https://www.joy127.com/url/88624.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>
<br><br><br><br><br><br><br><br><br><br><br>

加林森 发表于 2022-2-12 10:46

根据小辣椒制作的大转盘播放器，试着制作一个出来。望小辣椒不嫌弃。@小辣椒

红影 发表于 2022-2-12 11:43

漂亮。队长自己也可以去配置转盘颜色的{:4_187:}

马黑黑 发表于 2022-2-12 11:51

很漂亮

加林森 发表于 2022-2-12 12:02

红影 发表于 2022-2-12 11:43
漂亮。队长自己也可以去配置转盘颜色的

谢谢红影支持。{:4_187:}现在我还不敢乱动，我在找唱这歌曲人的照片。

加林森 发表于 2022-2-12 12:03

马黑黑 发表于 2022-2-12 11:51
很漂亮

谢谢老黑。我怎么把这个丫头的图片安装到大转盘里呢？有点烧脑。

红影 发表于 2022-2-12 14:10

加林森 发表于 2022-2-12 12:02
谢谢红影支持。现在我还不敢乱动，我在找唱这歌曲人的照片。

不知道为什么，我总觉得这个转盘的黑点不居中，转动的时候尤其有这样的感觉{:4_173:}

樵歌 发表于 2022-2-12 14:56

能干漂亮好看动听。{:4_187:}

加林森 发表于 2022-2-12 16:44

樵歌 发表于 2022-2-12 14:56
能干漂亮好看动听。

谢谢樵歌。{:4_191:}

加林森 发表于 2022-2-12 16:46

红影 发表于 2022-2-12 14:10
不知道为什么，我总觉得这个转盘的黑点不居中，转动的时候尤其有这样的感觉

我这里很正常的，还是透明的。

红影 发表于 2022-2-12 18:30

加林森 发表于 2022-2-12 16:46
我这里很正常的，还是透明的。

是视觉误差，可能是颜色引起的。

加林森 发表于 2022-2-12 18:38

红影 发表于 2022-2-12 18:30
是视觉误差，可能是颜色引起的。

嗯嗯

樵歌 发表于 2022-2-12 19:54

加林森 发表于 2022-2-12 16:44
谢谢樵歌。

干杯。{:4_176:}

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

{:4_176:}樵歌 发表于 2022-2-12 19:54
干杯。
好的。干杯！{:4_176:}

小辣椒 发表于 2022-2-12 20:57

播放器按钮没有了，队长就在这里继续修改

加林森 发表于 2022-2-12 21:00

小辣椒 发表于 2022-2-12 20:57
播放器按钮没有了，队长就在这里继续修改

好的好的

樵歌 发表于 2022-2-14 13:03

加林森 发表于 2022-2-12 19:55
好的。干杯！

节日快乐哈。{:4_204:}

加林森 发表于 2022-2-14 16:46

樵歌 发表于 2022-2-14 13:03
节日快乐哈。

我们都一起快乐吧。

加林森 发表于 2022-2-14 16:47

小辣椒 发表于 2022-2-12 20:57
播放器按钮没有了，队长就在这里继续修改

我调出来了，你来看看。{:4_190:}
页: [1]
查看完整版本: 帖赠小辣椒【古城新韵】跟到学习制作的。