《爱在草原》 呼斯楞
本帖最后由 加林森 于 2022-1-30 11:57 编辑 <br /><br /><style type="text/css">.paBox { /* 父框 */
margin: 10px auto;
width: 1024px;
height: 640px;
position: relative;
background: #000 url('https://pic.imgdb.cn/item/61f4d0eb2ab3f51d910310cf.jpg') no-repeat;
left: -210px;
}
/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
content: "";
position: absolute;
width: 600px; height: 2px;
background: silver;
left: 160px; 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:300px; top:500px; color: #fff;"><marqueescrollamount="3" direction="left" >《爱在草原》呼斯楞演唱 一首很喜欢的老歌送给大家</marquee></p>
<!-- 按钮 -->
<div id="roBox" class="roBox32" style="left:10%;top:88%;">●</div>
</div>
<audio id="ymusic" src="https://www.joy127.com/url/88437.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>
我喜欢这磁性浑厚的声音！ 那两人要动起来就好看了。 队长做出css闪光的效果了，真漂亮，还用了无图按钮，这个做得真好{:4_187:} 那个按钮好像点上去没用啊，无法控制音乐暂停呢{:4_173:} 樵歌 发表于 2022-1-29 14:34
我喜欢这磁性浑厚的声音！
我也喜欢的声线。 樵歌 发表于 2022-1-29 14:35
那两人要动起来就好看了。
我没有制作动图的。 红影 发表于 2022-1-29 14:45
队长做出css闪光的效果了，真漂亮，还用了无图按钮，这个做得真好
嗯嗯，学到制作。 红影 发表于 2022-1-29 14:46
那个按钮好像点上去没用啊，无法控制音乐暂停呢
就是啊，我本来有的，不知道怎么就停不下来了。有点烧脑。{:4_189:} 加林森 发表于 2022-1-29 16:13
就是啊，我本来有的，不知道怎么就停不下来了。有点烧脑。
可能哪个名称的对应有误。哪个JS引用的名称一点不能差的。 红影 发表于 2022-1-29 20:29
可能哪个名称的对应有误。哪个JS引用的名称一点不能差的。
这个只有老黑来帮忙了。 加林森 发表于 2022-1-29 20:38
这个只有老黑来帮忙了。
不过这个能听，就行了。比那个听不到的好。 红影 发表于 2022-1-29 21:03
不过这个能听，就行了。比那个听不到的好。
嗯嗯，我得跟老黑制作的那个美女帖学习了。{:4_170:} 加林森 发表于 2022-1-29 21:14
嗯嗯，我得跟老黑制作的那个美女帖学习了。
我也想学那个呢，挺好玩的。 红影 发表于 2022-1-29 21:43
我也想学那个呢，挺好玩的。
我已经会了。你应该也没有问题的啊。 @加林森
队长，你的这个帖子，音乐无法控制，我查看了一下，有一句JS语句出现大小写问题，你应该修改一下：
var mu = document.getElementByid('ymusic');
红色那个字母要大写。JS对大小写非常敏感。 加林森 发表于 2022-1-29 21:46
我已经会了。你应该也没有问题的啊。
直接套用肯定没问题，我在想怎么改改来加深印象。 @红影 管管，你也可以看一看16楼 马黑黑 发表于 2022-1-29 22:13
@加林森
队长，你的这个帖子，音乐无法控制，我查看了一下，有一句JS语句出现大小写问题，你应该修改一 ...
好的好的，我马上去修改。 加林森 发表于 2022-1-29 22:16
好的好的，我马上去修改。
{:5_108:}