《赢在江湖》TO绿叶清舟（发光字学习）
<style type="text/css">/* 外框盒子 */
#xq { position: relative; left:-304px; top:120px; width: 1200px; height: 676px; background-image: url('https://pic.imgdb.cn/item/62351fb95baa1a80ab28d487.jpg'); box-shadow: 4px 4px 5px #888; background-size: 1200px 675px; border-radius:12px; background-position: 1200px 0;animation: mv 28s linear infinite; }
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
/* 闪光字 */
.jh {
margin: auto;
width: 600px;
height: 200px;
line-height: 200px;
font-size:70px;
font-weight: bold;
letter-spacing: 2px;
text-align: center;
color: #663300;
animation: glow 1s linear infinite;
}
@keyframes glow {
from {
text-shadow:
text-shadow:
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ffff66,
0 0 70px #ffff66,
0 0 80px #ffff66,
0 0 100px #ffff66,
0 0 150px #ffff66;
}
to {
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #ffff66,
0 0 35px #ffff66,
0 0 40px #ffff66,
0 0 50px #ffff66,
0 0 75px #ffff66;
}
}
/* 播放按钮 */
#clkBtn { width: 100px; height: 100px; border-radius: 50%; background: rgba(0, 0, 0, .6); cursor: pointer;
position: relative; }
#clkBtn::before { content: ''; position: absolute; left: 5px; top: 5px; background: rgba(0, 0, 0, .2);
width: 88px; height: 88px; border: 1px solid #555; border-radius: 50%; }
#zhizhen { position: absolute; left: 50px; top: 50px; width: 2px; height: 44px; background: red;
transform-origin: 0 0; animation: go 3s linear infinite; }
@keyframes go { to { transform: rotate(360deg);} }
</style>
<div id="xq" >
<div class="jh" style="position: absolute; left:260px; top: 160px;">赢在江湖</div>
<div style="position: absolute; left:890px; top: 40px; width:150px;">
<img alt="" src="https://pic.imgdb.cn/item/6234a3f25baa1a80aba88c21.gif"/></div>
<div id="clkBtn" style="left: 100px; top: calc(100% - 180px);">
<div id="zhizhen"></div>
</div>
<audio id="music" autoplay="autoplay" loop="loop" src="http://www.kumeiwp.com/sub/filestores/2022/03/18/57c9a31ba1775b6ada5ef0b4313ccb75.mp3" ></audio>
</div>
<script language="javascript">
var aud = document.getElementById('music');
var btn = document.getElementById('clkBtn');
var zz = document.getElementById('zhizhen');
btn.onclick = function(){ aud.paused ? (aud.play(), zz.style.animationPlayState = "running") : (aud.pause
(), zz.style.animationPlayState = "paused"); }
aud.addEventListener("ended", function(){ zz.style.animationPlayState = "running"; });
</script>
<br><br><br><br><br><br><br><br> 清舟，东篱大哥让我们做青红帮帮主，咱们就索性就江湖闯荡，玩场大的{:4_173:}@绿叶清舟@东篱闲人 黑黑，我知道怎么做滚动图了，把一张图图裁成两半，把端头接起来，消除解封处的差异，再发出来就是连续的图图了@马黑黑 红影这个制作好漂亮，这么大的图片我怎么就不行呢？ 看到清舟做了火焰字，我也赶紧学了另一个，做了个闪光文字@绿叶清舟 {:4_187:} 加林森 发表于 2022-3-19 10:32
红影这个制作好漂亮，这么大的图片我怎么就不行呢？
这个图不算大啊，我只是把两边接起来了而已。 红影 发表于 2022-3-19 11:07
这个图不算大啊，我只是把两边接起来了而已。
你这个应该是1024*600吧，老黑的滚动教程只有790*430，不对称啊。 红影 发表于 2022-3-19 10:31
黑黑，我知道怎么做滚动图了，把一张图图裁成两半，把端头接起来，消除解封处的差异，再发出来就是连续的图 ...
聪明！本来我想提醒大家这么去做的，但我想，总会有人思考的出来。果然。 这个帖子不错的。友情提示：飞禽也可以考虑让它飞，它都煽动翅膀了 红影 发表于 2022-3-19 10:30
清舟，东篱大哥让我们做青红帮帮主，咱们就索性就江湖闯荡，玩场大的@绿叶清舟@东篱闲人
来了，谢谢影，咱们携手一起闯了{:4_179:} 制作太漂亮了{:4_204:} 绿叶清舟 发表于 2022-3-19 12:28
制作太漂亮了
美得不要不要的 红影 发表于 2022-3-19 10:30
清舟，东篱大哥让我们做青红帮帮主，咱们就索性就江湖闯荡，玩场大的@绿叶清舟@东篱闲人
准备先砍谁？{:5_117:} 马黑黑 发表于 2022-3-19 18:25
美得不要不要的
干嘛不要啊{:4_189:} 加林森 发表于 2022-3-19 11:12
你这个应该是1024*600吧，老黑的滚动教程只有790*430，不对称啊。
底图随便多大啊，语句都是一样的呢。 马黑黑 发表于 2022-3-19 11:17
聪明！本来我想提醒大家这么去做的，但我想，总会有人思考的出来。果然。
今天才想明白，我也够笨的了{:4_173:} 马黑黑 发表于 2022-3-19 11:18
这个帖子不错的。友情提示：飞禽也可以考虑让它飞，它都煽动翅膀了
底图都动了，可以当是它飞了，否则一直从一端到一端地飞，它也够累的{:4_173:} 绿叶清舟 发表于 2022-3-19 12:27
来了，谢谢影，咱们携手一起闯了
应该谢谢你的看烟火呢，被你提醒，也想起来做个发光的字，咱们争取把黑黑分享文字效果都拿来玩玩{:4_173:} 绿叶清舟 发表于 2022-3-19 12:28
制作太漂亮了
踏遍千山万水，咱们一起去闯江湖了{:4_173:} 东篱闲人 发表于 2022-3-19 19:06
准备先砍谁？
谁不服就砍谁{:4_170:}