《群星 - 九张机》 送大家！
<style type="text/css">.paBox { /* 父框 */
margin: 10px auto;
width: 1024px;
height: 640px;
position: relative;
background: #000 url('https://pic.imgdb.cn/item/61ffb2622ab3f51d91cd4c29.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/9210.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-2-6 19:53 编辑
九张机歌词
歌手：叶炫清
九张机 - 叶炫清词：张富贵曲：周琦编曲：周琦缩混：王路遥笛子：叶炫清吉他：周琦光阴如梭一梭才去一梭痴情丝百转丝丝缠乱犹不知织一段 锦绣纹饰并连理双枝难寄托 这相思兜兜转转朝花夕拾却已迟寻寻觅觅醉生梦死又一世还记得 前生盟誓欲言竟无词恨对面 不相识我愿化作 望断天涯那一方青石篆刻心头 是你的名字轮回彩蝶 化茧自缚织就春蚕丝剪不断 共缠绵生生世世兜兜转转朝花夕拾却已迟寻寻觅觅醉生梦死又一世还记得 前生盟誓欲言竟无词恨对面 不相识我愿化作 望断天涯那一方青石篆刻心头 是你的名字轮回彩蝶 化茧自缚织就春蚕丝剪不断 共缠绵生生世世我愿化作 望断天涯那一方青石篆刻心头 是你的名字轮回彩蝶 化茧自缚织就春蚕丝剪不断 共缠绵生生世世剪不断 共缠绵生生世世
歌曲好听，制作漂亮。黑黑教的很多功能用上了，要是滚动文字也能实现纯css的就更好了{:4_187:} 文字走马灯，黑黑有个专门的帖子说明的。 红影 发表于 2022-2-6 20:10
歌曲好听，制作漂亮。黑黑教的很多功能用上了，要是滚动文字也能实现纯css的就更好了
我在慢慢摸索的。 红影 发表于 2022-2-6 20:10
文字走马灯，黑黑有个专门的帖子说明的。
是的是的，慢慢来，学习到一种算一种啊。 唯美 马黑黑 发表于 2022-2-6 20:34
唯美
谢谢老黑！都是你教我们的啊。{:4_191:} 队长，这个音乐我听到了{:4_199:} 红影 发表于 2022-2-6 20:10
歌曲好听，制作漂亮。黑黑教的很多功能用上了，要是滚动文字也能实现纯css的就更好了
发现队长没有看黑黑的教程 加林森 发表于 2022-2-6 20:25
是的是的，慢慢来，学习到一种算一种啊。
嗯嗯，现在也很不错了{:4_199:} 小辣椒 发表于 2022-2-6 21:19
发现队长没有看黑黑的教程
没事，大家都一点点来。 红影 发表于 2022-2-6 22:22
没事，大家都一点点来。
我自己感觉这个还不错的。 本帖最后由 加林森 于 2022-2-7 10:37 编辑
小辣椒 发表于 2022-2-6 21:18
队长，这个音乐我听到了
好的好的，这个播放器一不小心就会搞错的。 加林森 发表于 2022-2-7 08:34
我自己感觉这个还不错的。
是的，做的很漂亮{:4_199:} 红影 发表于 2022-2-7 15:01
是的，做的很漂亮
我才制作了一个出来，你帮着看看。 加林森 发表于 2022-2-7 15:10
我才制作了一个出来，你帮着看看。
哦哦，回复好了就去欣赏{:4_187:} 红影 发表于 2022-2-7 15:23
哦哦，回复好了就去欣赏
嗯嗯，谢谢！
页:
[1]