花儿朵朵《套用亚伦老师最美风景线》

一师 · 发表于 2022-4-14 16:51

[i=s] 本帖最后由一师于 2022-9-22 16:27 编辑 [/i]

一师 · 发表于 2022-4-14 16:53

本帖最后由一师于 2022-4-28 22:33 编辑

<div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-230px; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform: rotate(0deg);background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/30% 30%,linear-gradient(80deg, #000080, #003300, #ff0000, #00f000); text-align: center;">
<img class='photo' src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/98381166f9449ed1f9da0f1ba39eb019.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080" alt="" />
<img class='photo' src="https://pic.yupoo.com/yuexia2020/a8fc78a1/ba375eb6.jpg" alt="" />
<img class='photo' src="http://www.keai99.com/data/attachment/forum/202204/10/085937umyk9fm1igtmt9qk.jpg" alt="" />
<img class='photo' src="http://www.keai99.com/data/attachment/forum/202204/10/090023u6z2rfb4gyybbb6s.jpg" alt="" />
<img class='photo' src="http://www.keai99.com/data/attachment/forum/202204/12/060931y74au0drddabw07x.jpg" alt="" />
<img class='photo' src="http://www.keai99.com/data/attachment/forum/202203/13/080637ijsdksy90oxiddd2.jpeg" alt="" />
<img class='photo' src="http://www.keai99.com/data/attachment/forum/202201/15/161747etzltx1wlo8clxnl.jpg" alt="" />
<img class='photo' src="http://www.keai99.com/data/attachment/forum/202204/14/091506pz5108awjbpga144.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="http://music.lanyes.org/content/plugins/lymusic_tool/play.php?type=kw&id=215880440&.mp3" controls loop style="width: 1%;
height: 1%;z-index: 1;"></audio>
<div class="btn">
<span id="bf"onclick="bf();"style="width: 980px; height: 120px;z-index: 300;position: absolute;top:-70px; left:80px;"></span>
<span id="bf"onclick="rbf();"></span>
</div>
<div class="img_border"><img id="aplay"style="width: 100%; height: 100%;z-index: 110;background:url(http://pan.yinhuabbs.cn/view.php/a93202bcdcd7cc95412d1595f9ec0dba.png)0 0/100% 100%, url(https://img-baofun.zhhainiao.com/fs/2e30acc1ac046b09ab6a5d3451cfadb9.jpg)-20px 0px/180% 100%;filter:hue-rotate(0deg)contrast(130%)brightness(100%);" ></div>
<div class="items" >
<div class="lrc">
<ul id="ullrc">
</ul>
</div></div></div>
</div>
<style type="text/css">
.photo {width: 1000px;
height: 600px;
position: absolute;top:0px; left:0px;
filter:contrast(130%)brightness(100%);
animation: round 46s infinite;
opacity: 0;}
@keyframes round {1% {opacity: 1;clip-path:circle(0% at 130% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
9% {opacity: 1;clip-path: circle(100% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
18% {opacity: 0.6;clip-path: circle(100% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1.5);}
20% {opacity: 0;clip-path: circle(100% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(2);}
}
img:nth-child(8) {animation-delay: 40s;}
img:nth-child(7) {animation-delay: 34s;}
img:nth-child(6) {animation-delay: 28s;}
img:nth-child(5) {animation-delay: 22s;}
img:nth-child(4) {animation-delay: 16s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}
.container{width: 1px;height: 1px;
margin: 0;position: absolute;top:500px; left:0px;z-index: 100;}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;}
.container .btn{
display: block;z-index: 300;
margin: 0;}
.container .lrc{
width: 960px;
height: 120px;z-index: 1;
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 -1px 0);
display: block;position: absolute;top:-10px; left:0px;
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: 40px;
color: #ff0000;
font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:400px;height:400px;margin:0px ;position: absolute;top:-430px;left:250px;transform: scale(1,1);}
.container .img_border #aplay{display:block;border:2px solid #cccccc;border-radius:50%; }
.container .z360z{-webkit-animation:rotating 10s linear infinite;}@-webkit-keyframes rotating{0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);clip-path: circle(50% at 50% 50%);background:url(http://pan.yinhuabbs.cn/view.php/a93202bcdcd7cc95412d1595f9ec0dba.png)0 0/100% 100%, url(https://img-baofun.zhhainiao.com/fs/0be7eb646d8f66f9dc35d638c3869fbb.jpg)-120px 0px/180% 100%;filter:hue-rotate(360deg)contrast(130%)brightness(100%);}
100%{transform:rotateX(0deg) rotateY(0deg) rotateZ(360deg);clip-path: circle(50% at 50%50%);background:url(http://pan.yinhuabbs.cn/view.php/a93202bcdcd7cc95412d1595f9ec0dba.png)0 0/100% 100%, url(https://img-baofun.zhhainiao.com/fs/2e30acc1ac046b09ab6a5d3451cfadb9.jpg)-20px 0px/180% 100%;filter:hue-rotate(0deg)contrast(130%)brightness(100%);}
}
.audio{
z-index: 1;
bottom: 0;
opacity: 0;
transition: all 2s;
width: 1px;
height: 1px;
position: absolute;top:0px; left:0px;
}
.audio:hover{
opacity: 0;
}
.items { z-index: 1540;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 lrc = `[00:04]心中最美的风景线
[00:06]作词：轻云望月
[00:09]作曲：轻云望月
[00:11]DJ：月之歌音乐室
[00:13]混音：烟圈蔓延
[00:15]出品：亚伦影音
[00:19]“未经授权禁止翻唱和商业使用”
[00:22]男：
[00:23]我不知道远方究竟有多远
[00:28]有你的地方就是我的终点
[00:33]哪怕趟万水哪怕越千山
[00:38]也愿意奔向你和你手相牵
[00:42]女：
[00:43]我不知道红尘有多少爱恋
[00:48]自从第一眼就把你爱心间
[00:53]人为你相思心为你牵绊
[00:58]再多曲折都难把我的爱阻断
[01:03]男：
[01:03]你是我心中最美的风景线
[01:08]感谢你出现把我人生温暖
[01:13]女：
[01:13]这一段情爱这一场尘缘
[01:18]就算到天荒地老都不会厌倦
[01:23]男：
[01:23]你是我心中最美的风景线
[01:28]谢谢你出现把我流年惊艳
[01:33]女：
[01:34]爱着你所爱念着你所念
[01:38]这辈子你就是我永远的永远
[02:03]男：
[02:04]我不知道红尘有多少爱恋
[02:09]自从第一眼就把你爱心间
[02:13]女：
[02:14]人为你相思心为你牵绊
[02:19]再多曲折都难把我的爱阻断
[02:23]男：
[02:24]你是我心中最美的风景线
[02:29]感谢你出现把我人生温暖
[02:34]女：
[02:34]这一段情爱这一场尘缘
[02:39]就算到天荒地老都不会厌倦
[02:44]男：
[02:44]你是我心中最美的风景线
[02:49]谢谢你出现把我流年惊艳
[02:53]女：
[02:54]爱着你所爱念着你所念
[02:59]这辈子你就是我永远的永远
[03:04]男：
[03:04]你是我心中最美的风景线
[03:10]谢谢你出现把我流年惊艳
[03:14]女：
[03:15]爱着你所爱念着你所念
[03:20]这辈子你就是我永远的永远
[03:24]合：
[03:25]这辈子你就是我永远的永远`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts[index] = getLrcObj(parts[index]);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts[0].substr(1);
var timeParts = time.split(":");
var seconds = +timeParts[1];
var min = +timeParts[0];
seconds = min * 60 + seconds;
var words = twoParts[1];
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[index].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[index].classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("MusicPlayer").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray[index].seconds > time) {
return index - 1;
}
}
}
$("MusicPlayer").ontimeupdate = setPosition;
function rbf() {
var audio = document.getElementById('MusicPlayer');
var bf=document.getElementById("bf");
audio.currentTime = 0;
audio.play();
bf.innerText="";
}
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="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric<i>[0]){ document.getElementById("ullrc").innerHTML = lyric<i>[1]; if(i
+1==lyric.length){ document.getElementById("").innerHTML = ""; }else{ document.getElementById("").innerHTML = lyric[i + 1][1];};};};}; my_audio.play();</script>

复制代码

一师 · 发表于 2022-4-14 16:53

本帖最后由一师于 2022-8-17 15:51 编辑

http://www.keai99.com/data/attachment/forum/202208/15/070836vyku0b1r0yziu01y.jpg",
"http://www.keai99.com/data/attachment/forum/202208/15/070818yl707kx33kxoxb0k.jpg",
"http://www.keai99.com/data/attachment/forum/202208/15/070759uudxbt7jpgbkpyd6.jpg",
"http://www.keai99.com/data/attachment/forum/202208/15/070739t9khj20mkm5ft0l6.jpg",
"http://www.keai99.com/data/attachment/forum/202208/15/070720mpm719opwo7x65p5.jpg",
"http://www.keai99.com/data/attachment/forum/202208/15/070702srjuoc8fujgduafu.jpg",
"http://www.keai99.com/data/attachment/forum/202208/15/070644h7w22r4ko7ra1wem.jpg",
"http://www.keai99.com/data/attachment/forum/202208/15/070322ezofloostll5adz8.jpg",
"http://www.keai99.com/data/attachment/forum/202208/15/070342jfjotajjv2j1a121.jpg",
"http://www.keai99.com/data/attachment/forum/202208/15/070419pntga0rajj9vaovg.jpg",
"http://www.keai99.com/data/attachment/forum/202208/15/070455s4d4r73r434s5o4s.jpg",
"http://www.keai99.com/data/attachment/forum/202208/15/070517w8dym8dyq2djtz88.jpg","
];

复制代码

阿强 · 发表于 2022-4-14 16:54

欣赏一师版主的音画制作——花儿朵朵

杨姥姥 · 发表于 2022-4-14 18:04

赞赏精美的音画制作！分享快乐！

林林五 · 发表于 2022-4-14 18:44

欣赏老师精彩音画·！赞！

我就来看看 · 发表于 2022-4-14 19:53

一师发表于 2022-4-14 16:53
.ph ...

凡是显示为蓝色的地方都是把图片链接搞丢的地方。

亚伦影音工作室 · 发表于 2022-4-14 19:57

一师发表于 2022-4-14 16:53
请老师指导，谢谢。

光碟里图片地址要完整不能有省列号！

一师 · 发表于 2022-4-15 07:09

阿强发表于 2022-4-14 16:54
欣赏一师版主的音画制作——花儿朵朵

新的一天向老师问好！祝您健康快乐！吉祥如意！

一师 · 发表于 2022-4-15 07:09

杨姥姥发表于 2022-4-14 18:04
赞赏精美的音画制作！分享快乐！

新的一天向老师问好！祝您健康快乐！吉祥如意！

帐号		自动登录	找回密码
密码			注册会员

花儿朵朵《套用亚伦老师最美风景线》

评分