送亲 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! Archiver

翁奕童苑 发表于 2022-8-31 22:03

送亲

本帖最后由翁奕童苑于 2022-8-31 22:03 编辑 <br /><br /><p></p>

<div style="z-index: 127;width: 960px; height: 600px; margin-top:20px; margin-left:-180px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #880000; overflow: hidden;transform:rotate(0deg);background:url(https://www.z4a.net/images/2022/07/11/1525a61d-5c2a-4c5f-a1c0-28496efcfb8e-0-813dc209-6a46-4376-b9f9-04b06f595cc6.jpg)0 0/100%100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000);text-align: center;">
<div class="HT">
<divclass="photos" id="testImg">
<img src="https://www.z4a.net/images/2022/07/11/12af87f66ef8be3aa.jpg" />
<img src="https://www.z4a.net/images/2022/07/11/2488f8e7f82f717b5.jpg" />
<img src="https://www.z4a.net/images/2022/07/11/46e99dba41340dba1.jpg" />
<img src="https://www.z4a.net/images/2022/07/11/5ada578c9955f326c.jpg" />
<img src="https://www.z4a.net/images/2022/07/11/6506f2de489448af2.jpg" />
<img src="https://www.z4a.net/images/2022/07/11/77020937856a63c87.jpg" />
<img src="https://www.z4a.net/images/2022/07/11/3949b74e8d787ee5e.jpg" />
<img src="https://www.z4a.net/images/2022/07/11/8850e251b8921de19.jpg" /></div>

<audio autoplay=""id="MusicPlayer"src="https://www.qqmc.com/up/kwlink.php?id=78712269" loop="" ></audio>
<div class="img_border" id="aplay"style="width: 1024px; height: 1024px;background: linear-gradient(45deg, rgba(253, 4, 18, 0.51) 14%,rgba(60, 231, 224, 0) 42%,rgba(142, 68, 173, 0) 54%,rgba(10, 4, 248, 0.47) 85%),url(http://image.hnol.net/c/2022-01/05/16/202201051650422421-5769293.png)0 0/30% 30%;transform:rotate(0deg)scale(1.2);"></div>
<div class="btn">
<div id="testImg" onclick="bf()"> <input type="button"id="testBtn"value="暂停"style="width: 70px; height: 40px;border-radius: 0%;color: #000000;font-size:20px;font-weight:bold;border:1px solid #000000;"> </div>
</div>

<div class="lrc">
<ul id="ullrc">
      </ul>
   </div></div>
</div>

<style type="text/css">
.photos img{float:right;width:1000px;height:600px;position:relative;LEFT:0px;top:0px;overflow:hidden;border-radius:0px;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);filter:hue-rotate(0deg)contrast(120%)brightness(100%);z-index: 10;}
.photos img:stop{}

.stop{animation-play-state:paused;}
.photos {position: absolute;z-index:9; width: calc(1000px * 9);
            animation-name: animate;animation-duration: 30s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;}
@keyframes animate {
      0%,20% {    right: -9000px;}
   25%,30% {    right: -8000px; }
   35%,40% {    right: -7000px;}
   45%,50% {    right: -6000px; }
   55%,60% {    right: -5000px; }
   65%,70% {    right: -4000px; }
   75%,80% {    right: -3000px; }
   85%,90% {    right: -2000px;}
   95%,100% {    right: -1000px;}
}
</style>
<style type="text/css">.items{ animation: slider 0.26s linear infinite ; }
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<script >
var image = document.getElementById("testImg"),
button = document.getElementById("testBtn");

if (image.classList && image && button) {
button.onclick = function() {
   if (this.value == '暂停') {
         image.classList.add('stop');
         this.value = '播放';
   } else {
         image.classList.remove('stop');
         this.value = '暂停';
   }
};
}
</script>

<style type="text/css">
.HT{
width: 1px;position: absolute;top:0px; left:0px;
}
#MusicPlayer{
width: 250px;

margin: 0 auto;
}
.btn{
z-index: 300;
margin: 0px 0px;position: absolute;top:540px; left:20px;
}
.lrc{
width: 870px;
height: 140px;
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:500px; left:60px;z-index: 30;
margin: 0 auto;
}
.lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
height: 80px;
line-height: 60px;
font-family:宋体;
font-size: 0px;
color: #000078;transform: translate(0%,0%);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;
display: block;
width: 100%;
margin: 0 auto;-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: red;
background-image:linear-gradient(50deg, #fff000, #fff000, #fff000, #fff000);
background-repeat:no-repeat;
background-position: -800px 0;
-webkit-animation:loop 3s linear infinite;
}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 45px;
color: #ff0000;transform: translate(0%,0%);
font-weight: bold;
}
/*mv动画*/
.img_border{margin: -260px -10px;position: absolute;top:0px; left:0px;z-index:10;
display: block;
width: 1024px; height: 1024px;animation:rotating 10s linear infinite;}
.img_border #aplay{ }

@keyframes rotating{0%{
   background-position: 0% 0%;filter:hue-rotate(0deg);transform:rotate(0deg)scale(1.2);
}
100%{
   background-position: 0% 0;filter:hue-rotate(360deg);transform:rotate(360deg)scale(1.2);
}
}

</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 = 80, lrc_ul_height = 70;
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>
      function bf() {
         var audio = document.getElementById('MusicPlayer');
         var bf=document.getElementById("bf");
         if (audio !== null) {
            if (audio.paused) {
               audio.play(); //audio.play();
               bf.innerText="";
            } else {
               audio.pause();
               bf.innerText="";
            }
         }
   }
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
{document.getElementById("aplay").className="img_border";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>

<p> </p>
<p> </p>

马黑黑 发表于 2022-8-31 22:05

送到俺家啦{:4_170:}

翁奕童苑 发表于 2022-8-31 22:06

马黑黑发表于 2022-8-31 22:05
送到俺家啦

谢谢欣赏！快去迎亲。

东篱闲人 发表于 2022-8-31 22:09

有这么多羊肉，傻丫头还哭啥？{:5_117:}

翁奕童苑 发表于 2022-8-31 22:12

东篱闲人发表于 2022-8-31 22:09
有这么多羊肉，傻丫头还哭啥？

羊太多了吃不动了。

马黑黑 发表于 2022-8-31 22:15

翁奕童苑发表于 2022-8-31 22:06
谢谢欣赏！快去迎亲。

俺还木有准备好新郎衣衣{:4_170:}

东篱闲人 发表于 2022-8-31 22:36

翁奕童苑发表于 2022-8-31 22:12
羊太多了吃不动了。

急的？{:5_117:}

红影发表于 2022-8-31 22:47

曾经很为这首歌曲感动过，如此无奈的心情。这个制作真美，完美诠释了歌曲意境{:4_187:}

醉美水芙蓉 发表于 2022-8-31 22:56

加林森 发表于 2022-9-1 00:32

挺好的。

大江发表于 2022-9-3 14:13

欣赏老师精美音画作品！

页: [1]

花潮论坛's Archiver

送亲