<思归> - 小新 (纯音乐）
本帖最后由 加林森 于 2022-3-28 20:58 编辑 <br /><br /><style type="text/css">/* 帖子容器 */
#tzDiv {
position: relative;
left: -40px;
width: 800px;
height: 1200px;
top: 80px;
background: #eee url('https://pic.imgdb.cn/item/62419eda27f86abb2aa899e0.jpg') no-repeat center/cover;
opacity: 0.8;
}
/* 音乐控制按钮 */
.picBtn {
position: absolute;
width: 100px;
height: 100px;
left: 180px;
bottom: 60px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('https://pic.imgdb.cn/item/622a00ea5baa1a80ab412ada.gif') no-repeat;
cursor: pointer;
}
/* 文本时钟 */
#textClock {
position: absolute;
top: 180px;
right: 200px;
width: 300px;
height: 30px;
font: 20px / 30px Sans-Serif;
text-align: center;
}
/* 走马灯父框 */
.txtFly {
position: absolute;
width: 260px;
height: 30px;
right: 100px;
bottom: 100px;
overflow: hidden;
}
/* 走马灯文本 */
.txtFly div {
position: absolute;
left: 260px;
font: normal 18px /20px Sans-Serif;
word-break: keep-all;
white-space:nowrap;
}
/* 变色文本 */
.txtBg {
position: absolute;
top: 100px;
right: 100px;
font-size: 4rem;
color: transparent;
width: 500px;
height: 100px;
line-height: 100px;
text-align: center;
background-image: linear-gradient(90deg, green, olive, transparent, tomato, green);
background-size: 500px 100px;
background-position: 500px 0;
border: 1px solid;
background-clip: text;
-webkit-background-clip: text;
animation: chgc 2s linear infinite;
}
/* 文本变色动画 */
@keyframes chgc {
from { background-position: -500px 0; }
to { background-position: 0 0; }
}
</style>
<div id="tzDiv">
<div class="txtBg">思归</div>
<div id="textClock"></div>
<div class="txtFly">
<div id="ziFly">思归 - 小新 纯音乐，请欣赏 </div>
</div>
<button id="picBtn" class="picBtn"></button>
<audio id="music" src="http://music.163.com/song/media/outer/url?id=1914211561.mp3"&auto=1&height=32"><br><br><br>loop="loop" autoplay="autoplay" ></audio>
</div>
<script language="javascript">
fly(); //运行走马灯
showTime(); //显示时间
setInterval(showTime, 1000); //运行时钟
//文本时钟函数
function showTime(){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var day = now.getDay();
var hour = now.getHours();
if(hour < 10) hour = "0" + hour;
var minute = now.getMinutes();
if(minute < 10) minute = "0" + minute;
var second = now.getSeconds();
if(second < 10) second = "0" + second;
document.getElementById("textClock").innerHTML = year + "年" + month + "月" + date + "日 星期" + toHz(day) + "" + hour + ":" + minute + ":" + second;
}
function toHz(num) { var hz = "日一二三四五六九"; return(hz.charAt(num)); }
//音乐控制代码
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/622a00ea5baa1a80ab412ada.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/622a01115baa1a80ab414665.png')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://pic.imgdb.cn/item/622a01115baa1a80ab414665.png')";
});
//创建走马灯
function fly() {
var ziFly = document.getElementById('ziFly');
var width = ziFly.clientWidth;
var style = document.createElement('style');
style.type = 'text/css';
var flyStr = '@keyframes fly {to { left: -' + width + 'px; } }';
style.innerHTML = flyStr;
ziFly.appendChild(style);
ziFly.style.animation = 'fly 40s linear infinite';
}
</script> 竖版大图，漂亮！{:5_116:} 没声音吗？{:5_115:} 东篱闲人 发表于 2022-3-28 20:45
竖版大图，漂亮！
谢谢老兄支持！ 东篱闲人 发表于 2022-3-28 20:45
没声音吗？
你点一下小美女就有了。{:4_189:} 加林森 发表于 2022-3-28 20:46
谢谢老兄支持！
{:4_187:} 加林森 发表于 2022-3-28 20:46
你点一下小美女就有了。
动作虽不雅，但是真灵。。。。{:4_170:} 东篱闲人 发表于 2022-3-28 20:47
喝水水{:4_176:} 东篱闲人 发表于 2022-3-28 20:48
动作虽不雅，但是真灵。。。。
现在有了吧。{:4_189:} 加林森 发表于 2022-3-28 20:49
现在有了吧。
你很有创意！{:5_106:} 这个竖版的倒是漂亮，很美的制作，队长这个帖子好{:4_187:} 东篱闲人 发表于 2022-3-28 20:52
你很有创意！
必须的嘛，玩就玩过创意的吧。谢谢老兄支持啊！ 加林森 发表于 2022-3-28 20:56
必须的嘛，玩就玩过创意的吧。谢谢老兄支持啊！
听音乐还得先点小女孩。。。。{:5_116:} 东篱闲人 发表于 2022-3-28 20:57
听音乐还得先点小女孩。。。。
这就是讲究一下嘛。{:4_189:} 红影 发表于 2022-3-28 20:55
这个竖版的倒是漂亮，很美的制作，队长这个帖子好
谢谢红影支持。我就是在想怎么才能更加漂亮来展现音画的。 制作好美，队长挺会选图的{:4_187:} 小妞按钮很可爱，音乐也好听{:4_187:} 千羽 发表于 2022-3-28 21:31
制作好美，队长挺会选图的
谢谢千羽支持。好玩就行。 千羽 发表于 2022-3-28 21:32
小妞按钮很可爱，音乐也好听
嗯嗯，是的，纯音乐好听。{:4_190:} 队长这制作真漂亮，音画融合的真棒！赞！ 晚上好！
{:4_204:}{:4_179:}