此情两难

醉美水芙蓉 发表于 2022-5-30 21:03

<div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-200px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow:
hidden;transform:rotate(0deg);background: url(http://pan.yinhuabbs.cn/view.php/ab4c0dac45fd31a7013f15e67180c145.jpg)0 0/100%100%; text-align: center;">
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/ff29823e2d06ee4219924080df57eaaa.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/2ed547e15c089c8c75527faa7d2c2dc6.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/ab949cc21f76c631fec539bbe7823b84.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/9416710a10b6b1dda274e6aeaec15453.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/39e03fbaaaabaf3629a70511fd46981f.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/25c1eb4a27cdc06e0cd9bd413760b108.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/8593960a5bb85b2a56d2d3e7c79525b7.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/bbc8d888769c52201f4eba6711dda3c5.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=222177825&.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
   <div class="btn">
      <img src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png" id="playpause"style="position:absolute;top:-70px;left:35px;width:140px;height:140px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);z-index:

600;"/>
   </div>
<div class="img_border" id="aplay"></div>
<div class="bs" style="width: 980px; height: 120px;z-index: 300;position: absolute;top:0px; left:0px;">
<divclass="lrc">
   <ul id="ullrc">
      </ul>
</div></div></div>
</div>
<style type="text/css">
.photo {width: 1000px;
height: 600px;
position: absolute;top:0px; left:0px;z-index: 300;
filter:contrast(120%)brightness(80%);-webkit-mask-image: radial-gradient(black 30% ,transparent 70%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {1% {
opacity: 0;
transform:translate(100%,0%)scale(0);}
5% {
opacity: 1;
transform:translate(100%,0%)scale(0);}
14% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
16% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
24% {
opacity: 0;
transform:translate(-100%,0%)scale(1);}
}

img:nth-child(8) {animation-delay: 42s;}
img:nth-child(7) {animation-delay: 36s;}
img:nth-child(6) {animation-delay: 30s;}
img:nth-child(5) {animation-delay: 24s;}
img:nth-child(4) {animation-delay: 18s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}
</style >
<style type="text/css">
.container{width: 1000px;height: 600px;
margin: 0;position: absolute;top:500px; left:0px;}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;}
.container .btn{
display: block;
margin: 0;}
.container .lrc{
width: 960px;
height: 120px;
overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
display: block;position: absolute;top:-10px; left:50px;
margin: 0 auto;}
.container .lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.container .lrc #ullrc li{
height: 70px;
line-height: 70px;
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;}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
font-size: 45px;
color: #ff0000;
font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:0px;transform: scale(1,1);transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;
z-index: 290;position: absolute;
top:-500px;
left: 0px;background: url(http://pan.yinhuabbs.cn/view.php/ab4c0dac45fd31a7013f15e67180c145.jpg)0 0/100%100%;
animation: rotating 0.05s linear infinite;}
@keyframes rotating{0%{
   background-position: 0% 0;transform: scale(1);filter:hue-rotate(0deg)contrast(110%)brightness(200%);
}
100%{
   background-position: 0 0%;transform: scale(1.3);filter:hue-rotate(360deg)contrast(110%)brightness(120%);
}
}
</style>
<style type="text/css">.bs{animation: slider0 0.26s linear infinite ;}
@keyframes slider0 {0%,100%{margin: 0px 0px;filter:hue-rotate(360deg)drop-shadow(0px 0px 12px #CD6600) drop-shadow(0px 0px 12px #CD6600)drop-shadow(0px 0px 12px #CD6600)

brightness(100%);}50%{margin: 0px 0px;filter:hue-rotate(0deg)drop-shadow(0px 0px 12px #000090)drop-shadow(0px 0px 12px #000090)drop-shadow(0px 0px 12px #000090)brightness(100%);}}
</style>
<script >var lrc = `秋裤大叔 - 此情两难
作词：高羽
作曲：陈伟
编曲：牛侠
录音：小业
混音：阿KEN
制作：冒牌音乐
发行公司：中交广际
制作人：陈伟
出品人：秋裤大叔
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 = 50;
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 = $("MusicPlayer").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
   if (lrcArray.seconds > time) {
         return index - 1;
   }
}
}
$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
      var aud = document.getElementById("MusicPlayer");
var img = document.getElementById("playpause");
img.onclick = function() {
if (aud.paused) {
aud.play();
} else {
aud.pause();
}
}
aud.addEventListener("play", function (e) {
img.src="http://image.hnol.net/c/2022-05/16/14/20220516140228811-5769293.gif";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png";
}, false);

</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>

红影发表于 2022-5-30 22:40

漂亮的动态效果和图片轮播，欣赏水芙蓉好帖{:4_187:}

千羽发表于 2022-5-30 21:08

欣赏学习水芙蓉的精彩制作，美女好漂亮{:4_187:}

东篱闲人 发表于 2022-5-30 21:12

动感炫酷，芙蓉好帖！{:5_116:}

小辣椒 发表于 2022-5-30 21:20

谢谢水芙蓉分享{:4_171:}

醉美水芙蓉 发表于 2022-5-30 21:24

千羽发表于 2022-5-30 21:08
欣赏学习水芙蓉的精彩制作，美女好漂亮

见过千羽朋友的音画作品！PS音画制作了得！

醉美水芙蓉 发表于 2022-5-30 21:24

东篱闲人发表于 2022-5-30 21:12
动感炫酷，芙蓉好帖！

感谢东篱老师支持！

醉美水芙蓉 发表于 2022-5-30 21:25

小辣椒发表于 2022-5-30 21:20
谢谢水芙蓉分享

谢谢小辣椒美女支持！

千羽发表于 2022-5-30 21:26

醉美水芙蓉发表于 2022-5-30 21:24
见过千羽朋友的音画作品！PS音画制作了得！

芙蓉这么说俺要惭愧了{:4_181:}

醉美水芙蓉 发表于 2022-5-31 06:57

红影发表于 2022-5-30 22:40
漂亮的动态效果和图片轮播，欣赏水芙蓉好帖

红影美女早上好！

岩新新 发表于 2022-5-31 08:56

欣赏精彩制作！

加林森 发表于 2022-5-31 09:47

水芙蓉制作出来的都是大美女，好看！{:4_199:}

红影发表于 2022-5-31 10:13

醉美水芙蓉发表于 2022-5-31 06:57
红影美女早上好！

问好水芙蓉，上午好{:4_187:}

醉美水芙蓉 发表于 2022-5-31 18:23

岩新新发表于 2022-5-31 08:56
欣赏精彩制作！

问好岩新老师！

醉美水芙蓉 发表于 2022-5-31 18:24

加林森发表于 2022-5-31 09:47
水芙蓉制作出来的都是大美女，好看！

问好队长晚上好！

加林森 发表于 2022-5-31 18:44

醉美水芙蓉发表于 2022-5-31 18:24
问好队长晚上好！

水芙蓉晚上好！{:4_204:}

页: [1]

花潮论坛's Archiver

此情两难