爱情紧箍咒

醉美水芙蓉 发表于 2022-6-10 22:05

本帖最后由醉美水芙蓉于 2022-6-10 22:04 编辑 <br /><br /><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(https://s1.ax1x.com/2022/06/10/X6vGoF.jpg)0 0/100%100%; text-align: center;">
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/fd4a9b89a939aedd51b50b5b8f91a6e4.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/3fd3685dc30d76e7ce4f01dcae16a992.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/2830c5e25bd0f187bef24bdde57d2f34.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/b30257f83a3f3938ed4da1918fb7cd93.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/a062ebc308bdfdbda31e8644c9b73a05.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/7d40cc25e5ad0ddb40f62ef62a86299f.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/6edb7c9c8c361a448a07e28c5a26c204.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/6df20f222a7809f6f2f51e324ebd592a.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=221806881&.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
   <div class="btn">
      <img src="http://image.hnol.net/c/2022-06/10/05/202206100542026531-5769293.png" id="playpause"style="position:absolute;top:-100px;left:35px;width:135px;height:193px;border-radius:0%;z-index: 600;"/>
   </div>
<div class="img_border" id="aplay"></div>
<div class="bs" style="width: 1200px; 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(0%,0%)scale(0);}
10% {
opacity: 1;
transform:translate(0%,0%)scale(1);}

20% {
opacity: 0.5;
transform:translate(0%,0%)scale(2);}
22% {
opacity: 0;
transform:translate(0%,0%)scale(2);}
}

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: 160px;
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:-80px; 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: 50px;
line-height: 50px;
font-family:华文隶书;
font-size: 30px;
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: 40px;
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: 1200px; height: 600px;
z-index: 290;position: absolute;
top:-500px;opacity: 1;
left: 0px;background: url(http://image.hnol.net/c/2022-06/08/11/202206081117513191-5769293.jpg)0 0/100% 100%;
animation: rotating 0.01s linear infinite;}
@keyframes rotating{0%{
   background-position: 0% 0;transform: scale(1,1);filter:hue-rotate(0deg)contrast(110%)brightness(200%);
}
100%{
   background-position: 0 0%;transform: scale(1.5,1.5);filter:hue-rotate(360deg)contrast(110%)brightness(120%);
}
}
</style>
<style type="text/css">.bs{animation: slider0 0.026s 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 = `爱情紧箍咒 (DJ默涵合唱版) - 海鸟飞鱼
词：王婷
曲：聂小慧
制作人：米奇
OP：星汉马文化
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 = 50, lrc_ul_height = 160;
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-06/10/05/202206100539101371-5769293.gif";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://image.hnol.net/c/2022-06/10/05/202206100542026531-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-6-10 22:21

杀了个花{:4_189:}

闲言不语 发表于 2022-6-10 22:22

这节奏适合小青年跳踢死狗{:4_172:}

闲言不语 发表于 2022-6-10 22:22

这么多美女动画，制作很辛苦吧{:4_189:}

加林森 发表于 2022-6-10 22:35

那个猫猫好玩。水芙蓉辛苦了。制作漂亮。都果大美女啊。

醉美水芙蓉 发表于 2022-6-11 07:03

闲言不语发表于 2022-6-10 22:21
杀了个花

感谢不语老师欣赏支持！

醉美水芙蓉 发表于 2022-6-11 07:04

加林森发表于 2022-6-10 22:35
那个猫猫好玩。水芙蓉辛苦了。制作漂亮。都果大美女啊。

感谢队长欣赏支持！

马黑黑 发表于 2022-6-11 07:47

这制作棒棒哒
歌声也挺好，略微沙哑的嗓音有磁性

红影发表于 2022-6-11 08:09

好听又好看，水芙蓉的帖子真漂亮{:4_187:}

加林森 发表于 2022-6-11 08:49

醉美水芙蓉发表于 2022-6-11 07:04
感谢队长欣赏支持！

{:4_190:}上午好！

醉美水芙蓉 发表于 2022-6-11 16:54

马黑黑发表于 2022-6-11 07:47
这制作棒棒哒
歌声也挺好，略微沙哑的嗓音有磁性

谢谢黑黑老师光临点评！

醉美水芙蓉 发表于 2022-6-11 16:54

红影发表于 2022-6-11 08:09
好听又好看，水芙蓉的帖子真漂亮

谢谢红影美女支持！

小辣椒 发表于 2022-6-11 17:05

欣赏水芙蓉的精彩制作{:4_178:}

醉美水芙蓉 发表于 2022-6-11 18:03

小辣椒发表于 2022-6-11 17:05
欣赏水芙蓉的精彩制作

谢谢小辣椒加分鼓励！

马黑黑 发表于 2022-6-11 18:30

醉美水芙蓉发表于 2022-6-11 16:54
谢谢黑黑老师光临点评！

{:5_108:}

页: [1]

花潮论坛's Archiver

爱情紧箍咒