红影 发表于 2022-1-20 10:52

心是莲花开（旋转按钮学习）

<style type="text/css">

.btn-ro {
      width: 10px; height: 10px;
      background: LightCyan;
      border: 18px solid;
      border-color: RoyalBlue CornflowerBlue;
      border-radius: 50%;
      box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25);
      cursor: pointer;
      animation: rol linear 2s infinite;
}

.btn-ro:hover { opacity: 0.8; }
.btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>

<img alt="心是莲花开" title="心是莲花开" src="https://pic.imgdb.cn/item/61e8c6ec2ab3f51d91f27396.jpg" />
<audio id="ymusic" src="https://www.80wp.com/wj/47875/dc513c8f68b6c24b4a286e90ca1b1dfd.mp3" autoplay="autoplay" loop="loop"></audio>
<div id="btn-ro" class="btn-ro" style="position:relative;top:-205px;left:376px;"></div>

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

红影 发表于 2022-1-20 10:55

用刚学的旋转按钮，学做个帖子。请黑黑老师批作业{:4_173:}

马黑黑 发表于 2022-1-20 11:05

( ^_^ )不错嘛

光盘颜色与帖子色系协调，它孩霸占了莲子的位置，很巧妙。

队长 @加林森 可以来学习学习

加林森 发表于 2022-1-20 11:28

马黑黑 发表于 2022-1-20 11:05
( ^_^ )不错嘛

光盘颜色与帖子色系协调，它孩霸占了莲子的位置，很巧妙。


来了来了

加林森 发表于 2022-1-20 11:29

红影的作业很不错的嘛。{:4_199:}

友昕 发表于 2022-1-20 11:55

好美！心似莲花开

马黑黑 发表于 2022-1-20 11:55

加林森 发表于 2022-1-20 11:28
来了来了

学习学习

加林森 发表于 2022-1-20 11:59

马黑黑 发表于 2022-1-20 11:55
学习学习

必须得学习。

马黑黑 发表于 2022-1-20 12:07

加林森 发表于 2022-1-20 11:59
必须得学习。

{:4_181:}

加林森 发表于 2022-1-20 12:17

马黑黑 发表于 2022-1-20 12:07


老黑，我去吃午饭了哈。

马黑黑 发表于 2022-1-20 12:30

加林森 发表于 2022-1-20 12:17
老黑，我去吃午饭了哈。

吃好喝好玩好

红影 发表于 2022-1-20 13:05

马黑黑 发表于 2022-1-20 11:05
( ^_^ )不错嘛

光盘颜色与帖子色系协调，它孩霸占了莲子的位置，很巧妙。


谢谢黑黑，你的这个旋转按钮很漂亮{:4_187:}

红影 发表于 2022-1-20 13:06

加林森 发表于 2022-1-20 11:29
红影的作业很不错的嘛。
谢谢队长，看到黑黑的新教学，赶紧去跟着学习并用作业来加深印象了{:4_173:}

红影 发表于 2022-1-20 13:08

友昕 发表于 2022-1-20 11:55
好美！心似莲花开

谢谢友昕鼓励，刚学的一个玩法{:4_173:}

马黑黑 发表于 2022-1-20 16:45

红影 发表于 2022-1-20 13:05
谢谢黑黑，你的这个旋转按钮很漂亮

按钮只是辅助功能的东东

加林森 发表于 2022-1-20 16:59

红影 发表于 2022-1-20 13:06
谢谢队长，看到黑黑的新教学，赶紧去跟着学习并用作业来加深印象了

我也要去制作一个出来看看。

红影 发表于 2022-1-20 21:24

马黑黑 发表于 2022-1-20 16:45
按钮只是辅助功能的东东

能跟着做出来很开心的。{:4_187:}

红影 发表于 2022-1-20 21:24

加林森 发表于 2022-1-20 16:59
我也要去制作一个出来看看。

看到队长的了，图片和音乐都选得很好呢{:4_187:}

马黑黑 发表于 2022-1-20 21:29

红影 发表于 2022-1-20 21:24
看到队长的了，图片和音乐都选得很好呢

队长就是不太对要领，常出错{:4_170:}

红影 发表于 2022-1-20 22:44

马黑黑 发表于 2022-1-20 21:29
队长就是不太对要领，常出错

唉，刚出先过去帮他修改那个帖子，折腾半天，都不知道那些提醒回复过，这下我的提醒乱了，肯定很多提醒要遗漏了{:4_173:}
页: [1] 2
查看完整版本: 心是莲花开（旋转按钮学习）