祝福小九生日快乐！
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1506767">
<br /><style type="text/css">
#xq/* 父框盒子 */
{ position: relative;width: 770px; height:714px; background-image: url('https://image.scol.com.cn/data/attachment/forum/202203/15/1647353526309.jpeg'); box-shadow: 4px 4px 5px #888; background-size: 770px 714px; border-radius:12px; background-position: 770px 0; }
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
/* 动画 */
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
/* 播放器按钮 */
.picBtn {
width: 60px;
height: 80px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('http://bbs.shiandci.net/static/image/common/%E6%B1%9F%E5%9F%8E%E5%AD%90.gif') no-repeat;
cursor: pointer;
}
/* 轱辘诗 */
.hxBox { position: absolute; left:220px; top:260px; width: 180px; height: 160px; font-family: '楷体','微软雅黑'; font-size: 24px;transform-origin: 50 50; animation: go 24s linear infinite;}
@keyframes go { to { transform: rotate(-360deg);} }
.hxBox path { fill: none; }
.hxBox svg { display: block; overflow: visible; }
</style>
<div id="xq" >
<div id="baiBox" style="position: absolute; left:580px; top:80px; ">四月芳菲胜从前<br><br>小九笑靥比蜜甜<br><br>
生日快乐同祝贺<br><br>幸福一年又一年</div>
<div class="hxBox">
<svg viewBox="0 0 100 100">
<path d="M 0, 50 a 50, 50 0 1, 1 0, 1 z" id="yuan" />
<text stroke="#ff3300">
<textPath xlink:href="#yuan">
</textPath>
</text>
</svg>
</div>
<!-- 控制按钮应是父盒子的第一代子元素 -->
<div style="position:absolute; width:50px;left: 600px; top:calc(100% - 120px); text-align:center;">
<button id="picBtn" class="picBtn"></button>
</div>
</div>
<!-- 因为播放器不要界面，无需放在帖子父盒子内 -->
<audio id="music" autoplay="autoplay" loop="loop" src="https://www.joy127.com/url/89374.mp3" ></audio>
<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
mu.paused ? (mu.play(), btn.style.background="url('http://bbs.shiandci.net/static/image/common/%E6%B1%9F%E5%9F%8E%E5%AD%90.gif')") : (mu.pause(), btn.style.background="url('http://bbs.shiandci.net/static/image/common/%E6%B1%9F%E5%9F%8E%E5%AD%90.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('http://bbs.shiandci.net/static/image/common/%E6%B1%9F%E5%9F%8E%E5%AD%90.gif')";
});
</script>
<style>
.mvBox {
position: relative;
width: 600px;
height: 600px;
left:320px;
top:-500px;
color:#FF4500;
line-height: 18px;
font-size: 18px;
animation: mq linear 30s infinite;
}
@keyframes mq {
from { transform: translateX(200px); }
to { transform: translateX(0); }
}
.balloon {
width: 150px;
height: 150px;
background: radial-gradient(circle at 10% 20%, rgba(0,128,0,.5), rgba(0,96,48,.8));
border-radius: 100% 100% 60% 100%;
transform: rotate(45deg);
position: relative;
left: calc(50% - 50px);
top: 30px;
animation: up 5s linear infinite;
}
.balloon::before, .balloon::after { content: ''; position: absolute; }
.balloon::before {
width: 1px;
height:100px;
background: rgba(0,0,0,.7);
left: 100%;
top: 100%;
transform: rotate(-45deg) translate(35px,-12px);
}
.balloon::after {
background: rgba(0,128,0,.85);
width: 10px;
height: 10px;
border-radius: 10%;
top: 100%;
left: 100%;
transform: rotate(-45deg) translate(0,-28px);
}
.wyyPlay {
position: absolute;
width: 130px;
height: 86px;
left: 20px;
top: 20px;
clip-path: circle(33px at 43px 43px);
border: 0;
opacity: .4;
}
@keyframes up {
to { top: -1200px; }
}
.box { width: 50px; height: 50px; border: 1px solid; }
</style>
<div id="outBox">
<script language="javascript">
let bln = document.getElementById('outBox');
let bArr = ['b0', 'b1', 'b2', 'b3', 'b4'];
for(j=0; j<5; j++) {
let bBb = document.createElement('div');
bBb.id = "b" + j;
bBb.setAttribute('class','balloon');
bBb.style.left = `${j*180-100}px`;
chgColor(bBb);
bln.appendChild(bBb);
}
function chgColor(obj){
let c1 = `#${Math.random().toString(16).substr(-6)}`;
let c2 = `#${Math.random().toString(16).substr(-6)}`;
obj.style.background =`linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}
setInterval(function(){
for (j=0; j<5; j++) {
chgColor(document.getElementById(bArr));
}
}, 500);
</script>
</style>
<br><br><br><br><br>
</td></tr></table> {:5_106:}四月的乡间小路
生日快乐，幸福吉祥 {:4_187:}{:4_204:}{:4_177:} 我也不知道为啥帖子底部空出那么多，改来改去还是改不了，业务能力有待提高{:5_106:}
也可能是乡间小路都拓宽了，成乡间大路了 哇氺哥学习的真快 {:4_187:} 制作真棒！
听着这么温柔的歌声，小九走在这样的乡间小路上心情一定很美！
和氺哥一起祝福小九生日快乐，幸福吉祥
{:4_204:}{:4_191:}{:4_177:}{:5_166:} 还第一次见氺哥制作帖呢，很用心的祝福，还自己唱歌，小声音忒甜，真棒！
{:4_204:}{:4_199:} 大猫咪 发表于 2022-4-1 19:05
哇氺哥学习的真快制作真棒！
听着这么温柔的歌声，小九走在这样的乡间小路上心情一定很美 ...
下午一有空就学习，感觉很有收获 {:4_169:}
歌以前录的上传在网易，换了播放器直接用不了，重新下载再上传，手忙脚乱的 {:5_106:}
大猫咪 发表于 2022-4-1 19:07
还第一次见氺哥制作帖呢，很用心的祝福，还自己唱歌，小声音忒甜，真棒！
气球底部留白太多了还没学会怎么弄
谢谢猫儿鼓励 {:4_179:} 来看你 发表于 2022-4-1 19:10
下午一有空就学习，感觉很有收获
歌以前录的上传在网易，换了播放器直接用不了，重新下载再 ...
嗯嗯 继续加油， 猫看好氺哥{:4_189:} 大猫咪 发表于 2022-4-1 19:12
嗯嗯 继续加油， 猫看好氺哥
好，继续努力，争取不断进步 {:5_106:} 来看你 发表于 2022-4-1 19:17
好，继续努力，争取不断进步
嗯嗯 一起学习 一起进步 {:4_204:}{:4_179:} 很经典的老歌，看看唱得很好听！很应景四月天啊这歌！ 谢谢看看！{:4_183:}{:4_171:} 大猫咪 发表于 2022-4-1 19:24
嗯嗯 一起学习 一起进步
猫咪也快乐哈{:4_191:} 来看你 发表于 2022-4-1 19:12
气球底部留白太多了还没学会怎么弄
谢谢猫儿鼓励
比我灵活多了，我对代码很迟钝{:4_199:}
很欢快的曲子 大猫咪 发表于 2022-4-1 19:05
哇氺哥学习的真快制作真棒！
听着这么温柔的歌声，小九走在这样的乡间小路上心情一定很美 ...
{:4_187:}{:4_171:} 谢谢猫咪 水哥也做成了气球飞飞呢，还有这么美的翻唱。这个贺帖太棒了。借水哥好帖同祝九儿生日快乐{:4_187:} 小九 发表于 2022-4-1 19:37
比我灵活多了，我对代码很迟钝
很欢快的曲子
我重新加了个高亮色，生日帖子全部红色吧，也喜庆{:4_187:} 看看厉害啊{:4_204:}九生日快乐{:5_166:} 先祝福小九生日快乐，平安喜乐{:5_166:}{:4_187:} 看看唱得真好听，陶醉一会儿……{:4_206:} 看看做的图真好，感觉技术娴熟呢，{:4_187:}
页:
[1]
2