看完烟火再回去TO红影
<style type="text/css">
.fireBox {
margin: auto;
width: 500px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 4rem;
font-weight: bold;
color: #ff0000;
background: ;
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
animation: glow 1s linear infinite;
}
@keyframes glow {
from {
text-shadow:
0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;
}
to {
text-shadow:
0 0 10px #fefcc9,
10px -10px 15px #feec85,
-20px -20px 20px #ffae34,
20px -40px 25px #ec760c,
-20px -60px 30px #cd4606,
0 -80px 35px #973716,
10px -90px 40px #451b0e;
}
#paDiv {
margin: auto;
width: 220px;
display: flex;
align-items: center;
border: 1px solid olive;
border-radius: 8px 0px 8px 0px;
background: rgba(255, 255, 255, 0);
box-shadow: 1px 1px 2px #000;
}
#jindu {
position: relative;
width: 200px;
height: 8px;
line-height: 8px;
font-size: 10px;
color: #000;
text-align: center;
background: linear-gradient(90deg, olive, tan, gold) no-repeat;
background-size: 20px 0px;
}
#btn-ro {
width: 20px; height: 20px;
line-height: 20px; font-size: 12px;
background: linear-gradient(blue, silver, red);
outline:none;
color: white;
border-radius: 50%;
text-align: center;
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>
<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -320px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=800 background=https://pic.imgdb.cn/item/6234717d5baa1a80ab356ff8.jpg>
<DIVstyle="MARGIN: 5px; position: relative; LEFT:88px; width:50px;height:30px;TOP: 15px">
<div class="fireBox">烟火</div></DIV>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR>
<DIVstyle="position: relative; LEFT: -100px; TOP: -80px">
<div id="paDiv">
<div id="btn-ro">·</div>
<div id="jindu">
<div id="jd-go"></div>
</div>
</div>
</div>
<script language="javascript">
var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var tips = document.getElementById('au-tips');
var aud = document.createElement('audio');
aud.src ="http://music.163.com/song/media/outer/url?id=1902228820.mp3";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);
aud.play();
function tmMsg(){ //进度条
var jd = (100*aud.currentTime)/aud.duration;
jindu.innerHTML = Math.ceil(jd) + "%";
jindu.style.backgroundSize = jd+ "% 20px";
}
btn.onclick = function(){
aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}
</script> 大大的沙发~{:4_171:} 谁放炮仗？看把那女孩吓的。。。{:4_170:} 原来是纯css的烟火字呢，清舟厉害，这个字体真漂亮{:4_187:} 谢谢清舟，跟清舟一起看烟火，想想就好美啊{:4_179:} 红影 发表于 2022-3-18 21:16
谢谢清舟，跟清舟一起看烟火，想想就好美啊
不客气啊，心急着想做素材就找不好了 东篱闲人 发表于 2022-3-18 21:00
谁放炮仗？看把那女孩吓的。。。
不是你啊{:4_189:} 浅风儿 发表于 2022-3-18 20:55
大大的沙发~
谢谢风儿，问好 真漂亮 {:4_204:}清舟制作和创意都非常棒！图片和歌曲意境融合的棒棒滴！
红影收礼开心！
{:4_204:}{:4_199:} 大猫咪 发表于 2022-3-18 23:10
真漂亮 清舟制作和创意都非常棒！图片和歌曲意境融合的棒棒滴！
红影收礼开心！
猫好，想试这二个字体效果的 绿叶清舟 发表于 2022-3-18 21:27
不是你啊
师傅真淘气。。。。。{:4_189:} 绿叶清舟 发表于 2022-3-18 21:26
不客气啊，心急着想做素材就找不好了
这个烟火字在这里好美的，清舟厉害，只用了2个字，却那么完美地和其他文字融合在一起，调整起来很不容易的{:4_179:} 东篱闲人 发表于 2022-3-19 10:05
师傅真淘气。。。。。
不是你调皮啊{:4_189:} 绿叶清舟 发表于 2022-3-19 10:20
不是你调皮啊
俺淳朴。{:4_181:} 东篱闲人 发表于 2022-3-19 19:07
俺淳朴。
淳朴和调皮不矛盾啊{:4_189:} 绿叶清舟 发表于 2022-3-19 19:12
淳朴和调皮不矛盾啊
还老实，还木讷呢。。。{:5_111:} 东篱闲人 发表于 2022-3-19 19:15
还老实，还木讷呢。。。
这是美德啊 绿叶清舟 发表于 2022-3-19 19:17
这是美德啊
嗯嗯，就是美德多，也不知道咋回事。。。{:5_117:} 东篱闲人 发表于 2022-3-19 19:19
嗯嗯，就是美德多，也不知道咋回事。。。
遗传的吧{:4_189:}
页:
[1]