《心情不错》TO千羽 （学习马黑黑字体效果）
<style tpye="text/css">
#xq { position: relative; left:-204px;top:120px; width: 1024px; height: 684px; background:#333 url('https://pic.imgdb.cn/item/622dc0cf5baa1a80ab43cd0d.jpg') no-repeat center/cover; box-shadow: 4px 4px 5px #888;border-radius:12px;}
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
margin: auto;
width: 360px;
text-align: center;
font-size: 5rem;
font-weight: bold;
color: #EEEE00;
transform-origin: top;
animation: yao 0.8s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
.picBtn {
width: 120px;
height: 120px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('https://pic.imgdb.cn/item/622db6215baa1a80ab3dff55.gif') no-repeat;
cursor: pointer;
</style>
<div id="xq" >
<div id="baiBox" style="position: absolute; left:120px; top: 40px; ">心情不错</div>
<div style="position: absolute; left:120px; top: 150px; width:400px;text-align:center;">
<img alt="" src="http://image.hnol.net/c/2021-01/10/10/202101101019478794-5088534.gif"/>
<div style="position:absolute; width:160px; left:560px; top: 60px; text-align:center;">
<center >
<p ><font color="#ffffff" size="4" >
<div style="color:#ffffff;margin:0px;padding:10px;font-size:5px;font-family:微软雅黑;text-shadow:1px 1px 1px #000000;">
<marqueescrollamount="5" direction="left" >把一首轻松的歌儿送给羽儿，感谢你的好礼，祝福每一天《心情不错》 </marquee>
<p><audio id="music" src="http://www.kumeiwp.com/sub/filestores/2022/03/13/f088571586e027f5d98fc83817dd9f53.mp3" loop="loop" autoplay="autoplay" ></audio><br></p>
<div style="position:absolute; width:120px; left:110px; top: 250px; text-align:center;">
<button id="picBtn" class="picBtn"></button>
</div>
</div>
</div>
</div>
</div>
<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/622db6215baa1a80ab3dff55.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')";
})
</script></div>
<br><br><br><br><br><br><br><br> @千羽 谢谢羽儿好礼，影子学个字体效果，回个小礼。希望你每一个天都心情好好{:4_187:} @马黑黑 学了个摇摆的字体，谢谢黑黑{:4_187:} 把论坛表情做成了按钮，抠图没抠好，没抠清楚，做到帖子里才发现{:4_173:} 找的一个音乐好奇怪，在本地能播放，拿到论坛却没法播放，害得我以为代码出问题了，折腾好半天。好在重新上传倒是审核很快通过了。 不错不错，心情不错，大猫咪也很享受{:4_170:} 千羽收礼开森 长乐未央 听音模板好美影儿厉害{:4_171:} 马黑黑 发表于 2022-3-13 22:57
不错不错，心情不错，大猫咪也很享受
那个是论坛表情{:4_208:} 清儿幽幽 发表于 2022-3-14 00:24
长乐未央 听音模板好美影儿厉害
谢谢清儿，刚学的一个文字摇摆的效果{:4_173:} @加林森 我已经把那个论坛表情做成按钮了{:4_173:} 红影 发表于 2022-3-14 15:27
@加林森 我已经把那个论坛表情做成按钮了
红影，厉害了，把教程里的东西运用起来，这个播放器我还没有去制作的。{:4_199:} 加林森 发表于 2022-3-14 16:11
红影，厉害了，把教程里的东西运用起来，这个播放器我还没有去制作的。
这个动态表情做成按钮也挺有趣的呢。{:4_173:}
黑黑的这个摇摆字好看，那个文字集中营里有好多效果都可以用来作图呢，觉得都很好看。 红影 发表于 2022-3-14 16:13
这个动态表情做成按钮也挺有趣的呢。
黑黑的这个摇摆字好看，那个文字集中营里有好多效果都可 ...
就是，我也去试一试制作一个出来玩玩。{:4_189:} 红影 发表于 2022-3-14 15:26
那个是论坛表情
这是大猫咪的表情{:4_170:} 亲爱的，这个效果太棒了{:4_178:} 晚上电脑上来继续欣赏{:4_199:} 心情不错，羽儿收礼开心{:4_187:} 红影好制作，真棒，图片，色彩，歌曲都让人感觉很好， 看着舒服！ 厉害！
千羽小仙女收礼开心！
{:4_204:}{:4_199:} 红影 发表于 2022-3-13 22:48
@千羽 谢谢羽儿好礼，影子学个字体效果，回个小礼。希望你每一个天都心情好好
高高兴兴来收礼啦{:4_187:}