《 花季》 -- 可米小子
本帖最后由 加林森 于 2022-3-25 17:52 编辑 <br /><br /><style type="text/css">
/* 帖子容器 */
#tzDiv {
position: relative;
left: -214px;
width: 1024px;
height: 600px;
top: 80px;
background: #eee url('https://pic.imgdb.cn/item/623d823127f86abb2a31a54d.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('http://image.hnol.net/c/2022-02/23/01/2022022301050291-5087368.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: 80px;
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">花季 - 可米小子 (钧璨)眼前飘过几朵白色蒲公英
耳边仿佛有了下雪的诗意BABY
(少宗)榕树底下开了一株白茉莉
听你说着花语隐藏的秘密LOVELY
(三人)没你的花季没有你的世界里
(传一)孤寂...闻不到香气
(三人)有你的花季爱情开在花田里
(庭伟)甜蜜...全部都给你
(东靖)有阳光雨水和空气
混合着泥土的气息埋一棵种子给你
(合)陪你去看花季色彩满天满地
你爱的我会努力学习聊成话题</div>
</div>
<button id="picBtn" class="picBtn"></button>
<audio id="music" src="http://www.kumeiwp.com/sub/filestores/2022/03/25/32390b75567565a649946a2ffb69f270.mp3" 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('http://image.hnol.net/c/2022-02/23/01/2022022301050291-5087368.gif')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-02/23/01/2022022301050291-5087368.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('http://image.hnol.net/c/2022-02/23/01/2022022301050291-5087368.gif')";
});
//创建走马灯
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> 本帖最后由 加林森 于 2022-3-25 17:56 编辑
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.pp00.com%2Fmmbiz_jpg%2FzlrHiaWN66fpysIKRzZWQZIsicnohrnicgZ4vGRCqeNhiaA4l9JgC5S96ogWmPn8O0iaeGPhMTtdhib8H7AiacTIxbCWg%2F640%3Fwx_fmt%3Djpeg&refer=http%3A%2F%2Fimg1.pp00.com&app=2002&size=f9999,10000
可米小子 - 花季
(钧璨)眼前飘过几朵白色蒲公英
耳边仿佛有了下雪的诗意BABY
(少宗)榕树底下开了一株白茉莉
听你说着花语隐藏的秘密LOVELY
(三人)没你的花季没有你的世界里
(传一)孤寂...闻不到香气
(三人)有你的花季爱情开在花田里
(庭伟)甜蜜...全部都给你
(东靖)有阳光雨水和空气
混合着泥土的气息埋一棵种子给你
(合)陪你去看花季色彩满天满地
你爱的我会努力学习聊成话题
陪你去看花季闭上眼睛呼吸
一直到落花下成雨抱着你
(传一)你像玫瑰站在透明的水瓶
让我变成陪衬你的满天星QUEEN
(庭伟)为爱灌溉从现在开始不休息
就像拥有仙人掌的生命力MYDREAM
(三人)没你的花季没有你的世界里
(东靖)孤寂...闻不到香气
(三人)有你的花季爱情开在花田里
(少宗)甜蜜...全部都给你
(钧璨)有阳光雨水和空气
混合着泥土的气息埋一棵种子给你
(合)陪你去看花季色彩满天满地
你爱的我会努力学习聊成话题
陪你去看花季闭上眼睛呼吸
一直到落花下成雨抱着你
(合)陪你去看花季色彩满天满地
你爱的我会努力学习聊成话题
陪你去看花季闭上眼睛呼吸
一直到落花下成雨抱着你
欣赏队长新帖。好听{:4_204:} 队长高产的，这歌第一次听的{:4_199:} 红影 发表于 2022-3-25 20:14
欣赏队长新帖。好听
谢谢红影支持。{:4_187:} 绿叶清舟 发表于 2022-3-25 21:27
队长高产的，这歌第一次听的
好听吧。清舟晚上好。{:4_204:} 加林森 发表于 2022-3-25 22:45
谢谢红影支持。
图片里的人物不够漂亮呢{:4_173:} 红影 发表于 2022-3-25 22:54
图片里的人物不够漂亮呢
台湾人啊，他是小虎队的成员之一的。 红影 发表于 2022-3-25 22:54
图片里的人物不够漂亮呢
这个是原图片的、 这歌好听，第一次欣赏 队长好分享，周末快乐 {:4_179:}{:4_204:} 大猫咪 发表于 2022-3-26 12:44
这歌好听，第一次欣赏 队长好分享，周末快乐
猫猫下午好。我就是听着比较好听才制作出来的。{:4_204:}{:4_190:}{:4_179:} 加林森 发表于 2022-3-26 13:51
猫猫下午好。我就是听着比较好听才制作出来的。
队长来了 {:4_179:} 下午好，是非常好听 {:4_190:} 大猫咪 发表于 2022-3-26 13:58
队长来了下午好，是非常好听
嗯嗯，我现在去医院守老母亲去了，晚上见。 加林森 发表于 2022-3-26 14:04
嗯嗯，我现在去医院守老母亲去了，晚上见。
好的队长快去 辛苦了 {:4_187:}{:4_190:} 加林森 发表于 2022-3-25 23:57
台湾人啊，他是小虎队的成员之一的。
小虎队我记得是三个男生啊，这图片是女生呢。{:4_173:} 加林森 发表于 2022-3-25 22:45
好听吧。清舟晚上好。
很好听了，队长周末好 绿叶清舟 发表于 2022-3-26 16:00
很好听了，队长周末好
嗯嗯。周末快乐！ 红影 发表于 2022-3-26 14:21
小虎队我记得是三个男生啊，这图片是女生呢。
这张照片就是他们的原唱的图片的。 大猫咪 发表于 2022-3-26 14:08
好的队长快去 辛苦了
猫猫下午好，我回来了。 加林森 发表于 2022-3-26 17:33
猫猫下午好，我回来了。
队长晚上好{:4_187:}{:4_179:}
页:
[1]
2