《奇迹》 -- 女子十二乐坊（音乐欣赏）
本帖最后由 加林森 于 2022-4-19 11:02 编辑 <br /><br /><style type="text/css">/* 帖子容器 */
#tzDiv {
position: relative;
left: -302px;
width: 1200px;
height: 600px;
top: 80px;
background: #eee url('https://pic.imgdb.cn/item/625e20d5239250f7c5c2141d.jpg') no-repeat center/cover;
opacity: 0.8;
}
/* 音乐控制按钮 */
.picBtn {
position: absolute;
width: 100px;
height: 100px;
left: 160px;
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: 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">奇迹- 女子十二乐坊
</div>
</div>
<button id="picBtn" class="picBtn"></button>
<audio id="music" src="http://www.kumeiwp.com/sub/filestores/2022/04/18/926de0024cc08480e88f96a7c0110ae9.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('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>
<br><br><br><br><br>
本帖最后由 加林森 于 2022-4-19 12:24 编辑 <br /><br />
<style>
.wrap {
--fz: 16px; /* 字体大小 */
--grid: 26px; /* 方格高宽 */
--bg: #d6ecf0;
margin: auto;
width: calc(var(--grid) * 21 - (var(--grid) - var(--fz)) / 2); /* 宽度 20格 */
border-style: solid;
border-color: var(--bg);
border-width: 40px 20px 40px 40px;
}
.fge {
width: 100%;
min-height: calc(var(--grid) * 10); /* 最少高度 10格*/
padding-left: calc((var(--grid) - var(--fz)) / 2);
background: var(--bg);
background-image: linear-gradient(transparent calc(var(--grid) - 1px), red var(--grid)), linear-gradient(90deg, transparent calc(var(--grid) - 1px), red var(--grid));
background-size: var(--grid) var(--grid);
border-style: solid;
border-width: 1px 0 0 1px;
border-color: red;
font: normal var(--fz) / var(--grid) Sans-serif;
letter-spacing: calc(var(--grid) - var(--fz));
word-wrap: break-word;
word-break: break-all;
white-space: normal;
position: relative;
}
.fge::before { /* 遮盖最右边方格 */
content: '';
position: absolute;
width: var(--grid);
height: calc(100% + 1px);
right: 0;
top: -1px;
background: var(--bg);
}
.fge p, .fge div { margin: 0; padding: 0; }
</style>
<div class="wrap">
<div class="fge">
<p>《奇迹》 -- 女子十二乐坊（音乐欣赏）</p>
<p> 国内地一队女子民乐组合「女子十二乐坊」横扫亚洲本乐坛，</p>
<p> 她们利用二胡、琵琶、笛等中国乐器，演奏出融合了拉丁、爵士等西方流行音乐元素的乐章，加上创新的站立演奏方式，成功开辟出一片天空。首张在当地推出的《BeautifulEngery》，在日本的Oricon大碟榜的占据No.1位置，劲卖150万张！ “女子十二乐坊”，一支由13个平均年龄不到24岁的靓丽女孩组成(其中一人为二胡替补队员)的中国民乐团体，以古典中融入拉丁、爵士和摇滚的流行乐队姿态，在日本红得一发不可收。 成立于2001年6月的乐坊在国内奋斗了两年，除了得到媒体短暂而猎奇的关注以外，曾寂寂然一直处于游离状态；2003年在制作人王晓京的带领下转战日本市场，经过成功包装一举成为日本家喻户晓的明星！性感着装、站立表演，激情四溢的奔放演出代替了正襟危坐、含蓄内敛的传统民乐演奏。她们的首次亮相就征服了疯狂的日本乐迷，不仅演出爆棚，唱片发行更是创造了世界华人乐坛的新奇迹。第一张专辑《美丽能量》早已突破200万张，连获20个金奖和10个白金奖；第二张专辑《奇迹》在数周内就售出170万张，高居排行榜榜首！随之而来的是二胡在当地大面积脱销。</p>
<p> 《奇迹》音乐介绍</p>
<p>……</p>
<p> 加林森编制</p>
</div>
</div>
@马黑黑 以前我曾追女子十二乐坊，追到新加坡 马黑黑 发表于 2022-4-19 12:26
以前我曾追女子十二乐坊，追到新加坡
你怎么厉害啊。 加林森 发表于 2022-4-19 12:37
你怎么厉害啊。
咱也是追星一族
那会儿，我的女友是女子十二乐坊的投资人之一 马黑黑 发表于 2022-4-19 12:38
咱也是追星一族
那会儿，我的女友是女子十二乐坊的投资人之一
哦，那就难怪了。必须支持的。 加林森 发表于 2022-4-19 12:40
哦，那就难怪了。必须支持的。
可不嘛 马黑黑 发表于 2022-4-19 12:41
可不嘛
理解的理解的。 加林森 发表于 2022-4-19 12:42
理解的理解的。
蟹蟹理解 马黑黑 发表于 2022-4-19 12:44
蟹蟹理解
又要我抓走哇。{:4_189:} 女子十二乐坊是一个十分受欢迎的一个乐队，我十分欣赏她们的演出。 梦油 发表于 2022-4-19 13:31
女子十二乐坊是一个十分受欢迎的一个乐队，我十分欣赏她们的演出。
梦油也喜欢啊，挺好的。 加林森 发表于 2022-4-19 13:34
梦油也喜欢啊，挺好的。
我喜欢老歌、红歌，所以，我对女子十二乐坊的演出也很喜欢。 这个乐队也是听说过，来欣赏队长的美贴{:4_187:} 马黑黑 发表于 2022-4-19 12:38
咱也是追星一族
那会儿，我的女友是女子十二乐坊的投资人之一
这个厉害了，很有眼光呢{:4_187:} 梦油 发表于 2022-4-19 14:27
我喜欢老歌、红歌，所以，我对女子十二乐坊的演出也很喜欢。
好的好的，空了我去找找红歌出来。 红影 发表于 2022-4-19 15:14
这个乐队也是听说过，来欣赏队长的美贴
谢谢红影支持！{:4_204:} 加林森 发表于 2022-4-19 17:33
好的好的，空了我去找找红歌出来。
谢谢你 梦油 发表于 2022-4-19 17:51
谢谢你
不客气啊
页:
[1]
2