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

我也做一个加大转盘效果的试试

<style type="text/css">
.paBox { /* 父框 */
      margin: 10px auto;
      width: 1024px;
      height: 640px;
      position: relative;
      background: #000 url('https://pic.imgdb.cn/item/6200d2992ab3f51d91cbdc2f.jpg') no-repeat;
      left: -200px;
      top: 150px
}
/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
      content: "";
      position: absolute;
      width: 500px; height: 2px;
      background: silver;
      left: 540px; top: 80px;
      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); } }
/*旋转按钮*/
.roBox40 {
      margin: 10px;
      position: relative;
      width: 40px; height: 40px;
      line-height: 40px; font-size: 14px;
      background: linear-gradient(Teal,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;
}
.roBox40:hover { opacity: 0.8; }
.roBox40:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>

<div class="paBox">
      <div class="soBox"></div>
      <p style="position: absolute; left:50px; top:100px; color: #e12325;"><marqueescrollamount="2" direction="left" ><font face="微软雅黑"><font size="4">我也做一个加大转盘效果的试试</font></marquee></p>
      <!-- 按钮 -->
      <div id="roBox" class="roBox40" style="left:15%;top:82%;">●</div>
</div>

<audio id="ymusic" src="https://s1.ananas.chaoxing.com/audio/51/fa/f9/7f0266c2e878786a584908ec167c0a86/audio.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><br><br><br>

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

越做越精致~~学得也快~~{:5_116:}

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

杨柳青 发表于 2022-2-7 19:31
越做越精致~~学得也快~~

必须的，是不是！{:4_189:}

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

加林森 发表于 2022-2-7 19:41
必须的，是不是！

应该是的吧~~

加林森 发表于 2022-2-7 20:02

杨柳青 发表于 2022-2-7 19:44
应该是的吧~~

对头

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

大转盘，是说那个按钮么？

加林森 发表于 2022-2-7 20:30

红影 发表于 2022-2-7 20:28
大转盘，是说那个按钮么？

是的啊

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

加林森 发表于 2022-2-7 20:02
对头

{:4_174:}

加林森 发表于 2022-2-7 22:54

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


皮痒了？

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

加林森 发表于 2022-2-7 22:54
皮痒了？

{:4_172:}

加林森 发表于 2022-2-8 08:58

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


早晨好

红影 发表于 2022-2-8 12:58

加林森 发表于 2022-2-7 20:30
是的啊

这个大小倒也正好呢，不觉得太大。

加林森 发表于 2022-2-8 13:21

红影 发表于 2022-2-8 12:58
这个大小倒也正好呢，不觉得太大。

嗯嗯，是的。

杨柳青 发表于 2022-2-8 21:24

加林森 发表于 2022-2-8 08:58
早晨好

真早~~~~{:5_106:}

加林森 发表于 2022-2-8 22:11

杨柳青 发表于 2022-2-8 21:24
真早~~~~

是啊

小辣椒 发表于 2022-2-8 22:25

队长也是厉害了，发了这么多的同样的按钮，是反复学习吧，队长辛苦了。{:4_187:}

加林森 发表于 2022-2-8 22:33

小辣椒 发表于 2022-2-8 22:25
队长也是厉害了，发了这么多的同样的按钮，是反复学习吧，队长辛苦了。

是的是的，加强记忆。{:4_189:}
页: [1]
查看完整版本: 我也做一个加大转盘效果的试试