《昨夜星辰昨夜酒》(DJheap九天版) (Remix)
本帖最后由 加林森 于 2022-1-30 12:32 编辑 <br /><br /><style type="text/css">.paBox { /* 父框 */
margin: 10px auto;
width: 1024px;
height: 640px;
position: relative;
background: #000 url('https://pic.imgdb.cn/item/61f3b5f52ab3f51d91f7382b.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" >昨夜星辰昨夜酒(DJheap九天版) (Remix) 一首很喜欢的老歌送给大家</marquee></p>
<!-- 按钮 -->
<div id="roBox" class="roBox32" style="left:10%;top:88%;">●</div>
</div>
<audio id="ymusic" src="https://www.joy127.com/url/88319.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>
@马黑黑 我这个音乐怎么没有出来呢？{:5_102:} 加林森 发表于 2022-1-28 12:48
@马黑黑 我这个音乐怎么没有出来呢？
代码有太多错误，严重的地方是 CSS 代码收尾符放的不对地方，它应该是放在CSS代码结束之后 图片很漂亮，让光柱闪烁在酒杯边，很美{:4_187:} 马黑黑 发表于 2022-1-28 14:10
代码有太多错误，严重的地方是 CSS 代码收尾符放的不对地方，它应该是放在CSS代码结束之后
好的，知道了，我去修改。谢谢老黑！{:4_190:} 红影 发表于 2022-1-28 14:24
图片很漂亮，让光柱闪烁在酒杯边，很美
谢谢红影。我这就去修改。 加林森 发表于 2022-1-28 15:59
谢谢红影。我这就去修改。
嗯，好像音乐和滚动字没出来。 红影 发表于 2022-1-28 16:19
嗯，好像音乐和滚动字没出来。
就是啊，我也不知道怎么了啊？有点晕了。{:5_113:} 本帖最后由 马黑黑 于 2022-1-28 17:00 编辑
加林森 发表于 2022-1-28 16:26
就是啊，我也不知道怎么了啊？有点晕了。
你的代码缺失太多。我弄了一下，你再调整按钮、滚动文字的位置等：
<style type="text/css">
.paBox { /* 父框 */
margin: 10px auto;
width: 1024px;
height: 640px;
position: relative;
background: #000 url('https://pic.imgdb.cn/item/61f370482ab3f51d91b0807a.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/88321.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-1-28 16:59
你的代码缺失太多。我弄了一下，你再调整按钮、滚动文字的位置等：
谢谢老黑。{:4_190:} 马黑黑 发表于 2022-1-28 14:10
代码有太多错误，严重的地方是 CSS 代码收尾符放的不对地方，它应该是放在CSS代码结束之后
我现在全部换了，老黑帮助我看看。 加林森 发表于 2022-1-28 17:26
我现在全部换了，老黑帮助我看看。
音乐还是没出来呀 马黑黑 发表于 2022-1-28 17:58
音乐还是没出来呀
有的啊，我这里一打开就出来了。 加林森 发表于 2022-1-28 17:59
有的啊，我这里一打开就出来了。
没有音乐。 红影 发表于 2022-1-28 19:35
没有音乐。
我用手机看都有音乐的。 加林森 发表于 2022-1-28 19:40
我用手机看都有音乐的。
你自己能听到？我这里没声音。 红影 发表于 2022-1-28 19:45
你自己能听到？我这里没声音。
换个浏览器试一试啊。 加林森 发表于 2022-1-28 19:47
换个浏览器试一试啊。
MP3地址的歌曲根本不需要换浏览器，应该是什么地方有问题了。 加林森 发表于 2022-1-28 17:59
有的啊，我这里一打开就出来了。
我知道了。你用的是酷狗音乐，你是有权限的，我们没有，所以听不到 本帖最后由 马黑黑 于 2022-1-28 20:10 编辑
队长的mp3地址：
fsios.hw.kugou.com/202201282007/ac831ade900f5ba3273b7981fc34c6df/KGTX/CLTX001/44b34ccea82e2531d5150f9d66b70be8.mp3
页:
[1]
2