《我在云水间》王紫菲
本帖最后由 焱鑫磊 于 2023-5-27 22:54 编辑 <br /><br /><style>#papa { margin: 100px -280px ; width: 1166px; height: 642px; background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/87e58a27cbd1e63c340d92b8b2e7d7d1.jpg)0px 0px/100% 100%;;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#papa::before { position: absolute; content: '《我在云水间》王紫菲'; left: 30px; top: 15px; font: bold 2.4em sans-serif; color: #ff0000; text-shadow: 2px 2px 3px #000000; z-index: 6;}
#mplayer { --ww: 360px; --hh: 120px; --bg:#ff0000; --state: paused; --zx: 0.6; margin: auto; position: absolute; width: var(--ww); height: var(--hh); display: flex; justify-content: center; align-items: flex-end; cursor: pointer; z-indez: 1; -webkit-box-reflect:below 0px;}
.mLine { position: relative; margin: 0 0px 0 1px; width: 5px; height: 10px; background: #FF0000; clip-path: polygon(50% 0,0 100%, 100% 100%);}
#dt { position: absolute; left: 950px; bottom: 130px; width: 120px; height: 120px; background: url('https://pic.imgdb.cn/item/63979dcdb1fccdcd3655f9ee.png')0 0/100% 100%; cursor: pointer; z-index: -1; animation: rot linear 30s infinite; transform: rotateX(0deg) rotateY(0deg) rotate(0deg);}@keyframes rot {0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(20deg)scale(0.2);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg)scale(2);left: 30px;}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(260deg)scale(0.2);top:30px;}
}
#img_border{display:inline-block;width:100px;height:100px;position: absolute;top:530px; left:530px;z-index: 30;border-radius:0%; transition: .3s all ease;animation:rotating 10s linear infinite;filter:drop-shadow(#ffffff 0px 0 1px)}
@keyframes rotating{
0%{transform: rotate(-360deg);}
100%{transform: rotate(0deg);}
}
.photo {width: 1164px; height: 640px;
position: absolute;z-index: -2;border:2px solid #ffffff;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation-name: round ;animation-duration: 48s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes round {
0%,18% {
opacity: 0;
}
10%, 15% {
opacity: 1;
}
}
img:nth-child(1) {background:url(https://img.fy6b.com/2023/05/26/c62491df0cb84.jpg)0 0/100% 100%;
animation-delay: 42s;
}
img:nth-child(2) {background:url(https://img.fy6b.com/2023/05/26/d223f8752e635.jpg)0 0/100% 100%;
animation-delay: 36s;
}
img:nth-child(3) {background:url(https://img.fy6b.com/2023/05/26/adb7e64e99c9c.jpg)0 0/100% 100%;
animation-delay: 30s;
}
img:nth-child(4) {background:url(https://img.fy6b.com/2023/05/26/ac1c367bd30b6.jpg)0 0/100% 100%;
animation-delay: 24s;
}
img:nth-child(5) {background:url(https://img.fy6b.com/2023/05/26/1e25fcdecb6e1.jpg)0 0/100% 100%;
animation-delay: 18s;
}
img:nth-child(6) {background:url(https://img.fy6b.com/2023/05/26/4a2bfe7afe324.jpg)0 0/100% 100%;
animation-delay: 12s;
}
img:nth-child(7) {background:url(https://img.fy6b.com/2023/05/26/cad240fcce761.jpg)0 0/100% 100%;
animation-delay: 6s;
}
img:nth-child(8) {background:url(https://img.fy6b.com/2023/05/26/c3caf2be4d6c5.jpg)0 0/100% 100%;
animation-delay: 0s;
}
.stop img:nth-child(1) {
animation-delay: 42s;animation-play-state: paused;
}
.stop img:nth-child(2){
animation-delay: 36s;animation-play-state: paused;
}
.stopimg:nth-child(3){
animation-delay: 30s;animation-play-state: paused;
}
.stop img:nth-child(4){
animation-delay: 24s;animation-play-state: paused;
}
.stop img:nth-child(5){
animation-delay: 18s;animation-play-state: paused;
}
.stop img:nth-child(6){
animation-delay: 12s;animation-play-state: paused;
}
.stop img:nth-child(7) {
animation-delay: 6s;animation-play-state: paused;
}
.stop img:nth-child(8) {
animation-delay: 0s;animation-play-state: paused;
}
</style>
<div id="papa" title="《我在云水间》王紫菲">
<div id="testImg"title="《我在云水间》王紫菲"><div id="texiao"><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><imgclass='photo '></div></div>
<div id="lrc" data-lrc="HCPlayer"></div><div id="mplayer"></div>
<div id="dt" ></div>
<div class="bg">
<div id="" style="width: 1164px; height: 160px;position: absolute;top:420px; left:120px;z-index: 10;"title="《我在云水间》王紫菲">
<divclass="lrc">
<ul id="ullrc">
</ul>
</div></div>
<div type="button" id="btn"> <div id="img_border" style="width: 100px; height: 100px;mask: radial-gradient(transparent 5px,#red 0);-webkit-mask: radial-gradient(transparent 5px,red 0);background:url(https://pan.365.tf/uploads/xmhy/gp.png)0 0/100% 100%;border-radius:0%;" title="播放/暂停"></div></div>
</div>
</div>
<audio id="aud" src="https://mp3.wf/uploap/file/20230527223732.mp3" loop autoplay></audio>
<script>
(function() {
//插件代码
(function(mkPlayer) {let defaults = {player_css: 'bottom: 15px; left: 50%; transform: translate(-50%)',playerCode: `<style></style>`,};let playCode = (user_config) => {let
data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag =
true;let getCssVal = (e,v) => getComputedStyle(e).getPropertyValue(v);let total = Math.ceil(mplayer.offsetWidth / 6), zx = getCssVal(mplayer,'--zx').replace(/[^\d\.]/ig,'') ||
0.25;if(zx > 4) zx = 4;let mid = total % 2 === 0 ? total / 2 - 1 : Math.floor(total / 2);for(j=0; j<total; j++) {let k = j <= mid ? (mid - j) * 2 : (j - mid) * 2 - 1;let el =
document.createElement('span');el.className = 'mLine';el.style.cssText= `bottom: ${k*zx}px;background: linear-gradient(0deg, #ccfccc 0%,#00Ff00 100%);--ballcolor: linear-gradient(180deg, #FFf000 0%,#22F606 100%);`;
mplayer.appendChild(el);}let lines = document.querySelectorAll('.mLine');function update() {lines.forEach((item,key) => item.style.height = Math.floor(Math.random() *
(mplayer.offsetHeight - 20))+'px');}aud.addEventListener('timeupdate', () => {update();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {if (mKey
=== j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () =>
calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), mplayer.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state',
'running'),mplayer.style.setProperty('--state', 'running'));};mkPlayer.HCPlayer = playCode;})(this);
//参数配置
HCPlayer({
player_css: '--ww: 1164px; --hh: 120px; --zx: 0.3; bottom: 128px; left: 0px;',
});
})();
</script>
<style>
.bg{width: 1px;height: 1px;
margin: 0;position: absolute;top:0px; left:0px;z-index: 10;}
#aud{
width: 250px;
display: block;
margin: 0 auto;}
.btn{
display: block;
margin: 0;}
.lrc{
width: 960px;
height: 120px;
overflow: hidden;
display: block;position: absolute;top:70px; left:-20px;
margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:华文隶书;
font-size: 0px;
color: #000078;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 45px;color: #ff0000;
text-align:center;
transform: translate(0%,0%);
font-weight: normal;-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(45deg, #F32121 32%,#00ff00 43%,#FEFFFF 52%,#F32121 62%,#F32121 75%);
background-position: -1200px 0;
filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0)brightness(200%);
-webkit-animation:loop 3s linear 1.5;
}
@-webkit-keyframes loop{
0%{background-position: -1200px 0;}
100%{background-position: -0 0;}
}
</style>
<script >var lrc = `《我在云水间》王紫菲
词/曲：唐孟冲
LRC歌词制作：焱鑫磊
云在水上飞水在云中走
纤纤玉素手悠悠上兰舟
轻弹一曲潇湘水云
琴声绕画船郎君放歌喉
你的船歌温暖我胸口
缠绵在心间甜蜜沾满袖
你的橹桨摇落我离愁
带我看芙蓉牵手登琼楼
我在云水间和你同钓一江雪
我在云水间与你共喝一杯酒
酒弄琴弦撩起那份情
情恋潇湘岸一生为你守候
云在水上飞水在云中走
纤纤玉素手悠悠上兰舟
轻弹一曲潇湘水云
琴声绕画船郎君放歌喉
你的船歌温暖我胸口
缠绵在心间甜蜜沾满袖
你的橹桨摇落我离愁
带我看芙蓉牵手登琼楼
我在云水间和你同钓一江雪
我在云水间与你共喝一杯酒
酒弄琴弦撩起那份情
情恋潇湘岸一生为你守候
朗诵：还记得吗
我两相爱的地方是在水云缭绕的萍岛上
那天 你牵着我的手是那样的温馨醉人
从你的手指流淌出
你对我真挚的爱
我在云水间和你同钓一江雪
我在云水间与你共喝一杯酒
酒弄琴弦撩起那份情
情恋潇湘岸一生为你守候
我在云水间和你同钓一江雪
我在云水间与你共喝一杯酒
酒弄琴弦撩起那份情
情恋潇湘岸一生为你守候
情恋潇湘岸一生为你守候
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 70, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
dt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>dt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dt.style.animationPlayState = 'paused');
img_border.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');
var image = document.getElementById("testImg"),
button = document.getElementById("btn");
if (image.classList && image && button) {
button.onclick = function() {
if (this.value == '.') {
image.classList.remove('stop');
this.value = '*';
} else {
image.classList.add('stop');
this.value = '.';
}
};
}
</script>
应该能当作html的元素之一的吧。我也没试过，不清楚{:4_173:} 这帖子很漂亮，欣赏焱鑫磊好帖{:4_187:} 不知道为什么，音乐听不到 小辣椒 发表于 2023-5-27 13:18
不知道为什么，音乐听不到
音乐上传到https://pan.111t.net/时好时坏。 焱鑫磊 发表于 2023-5-27 13:26
音乐上传到https://pan.111t.net/时好时坏。
你这个音乐什么时候上传的 小辣椒 发表于 2023-5-27 13:30
你这个音乐什么时候上传的
最近上传。 焱鑫磊 发表于 2023-5-27 13:31
最近上传。
音乐你自己可以听到吗 小辣椒 发表于 2023-5-27 13:30
你这个音乐什么时候上传的
此网站极不稳定。我大多花钱在“酷我音乐”下载，而后上传使用。“酷我音乐”下载绝对没问题，上传的网站我使用过无数。都不理想。现在网易云又不好用了。郁闷！ 焱鑫磊 发表于 2023-5-27 13:36
此网站极不稳定。我大多花钱在“酷我音乐”下载，而后上传使用。“酷我音乐”下载绝对没问题，上传的网站 ...
这个不是免费网站，是那的站长一直在测试用的 小辣椒 发表于 2023-5-27 13:35
音乐你自己可以听到吗
能听到。 焱鑫磊 发表于 2023-5-27 13:36
此网站极不稳定。我大多花钱在“酷我音乐”下载，而后上传使用。“酷我音乐”下载绝对没问题，上传的网站 ...
你上次上传127可以吧，最近那边还是稳定的 小辣椒 发表于 2023-5-27 13:38
这个不是免费网站，是那的站长一直在测试用的
原来如此。谢谢告知！{:4_187:} 你这个帖代码有问题，论坛界面小图变形了
我手机看是这样的，不晓得你们电脑是不是这样 小辣椒 发表于 2023-5-27 13:40
你上次上传127可以吧，最近那边还是稳定的
小辣椒：https://www.joy127.com/ 也不能用。郁闷呀！ 焱鑫磊 发表于 2023-5-27 13:50
小辣椒：https://www.joy127.com/ 也不能用。郁闷呀！
遇到问题请加QQ群 124498348反馈 127的 焱鑫磊 发表于 2023-5-27 13:41
原来如此。谢谢告知！
刚问了站长，现在一直是好的，没有问题的 现在我电脑上来测试，音乐可以听到的，但播放器按钮无效的 好美的制作，欣赏点赞！{:4_187:} 太会玩了，赞一个。
页:
[1]