亚伦影音工作室 发表于 2024-4-16 15:51

三月桃花朵朵开(对唱版)-章艳&烟圈蔓延

<style type="text/css">
#papa{
        position: relative;
        width: 1164px;
        height: 640px;
      margin-left:-200px;
        margin-top:140px;
        border: 0px solid rgba(36, 201, 219,.95);
      border-radius: 0px;
        background:url(https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg)no-repeat center/cover;
        overflow: hidden;
}

.photo {width: 1164px; height: 640px;
position:absolute;
top:0%; left:0%;
opacity: 0;
animation: round 60s linear infinite;}
@keyframes round {0% {opacity: 1;clip-path:inset(0% 100% 0% 0%);
transform:translate(0%,0%)scale(1);}
3% {
opacity: 1;clip-path: inset(0 0 0 0);
transform:translate(0%,0%)scale(1);}
10% {
opacity: 1;clip-path: inset(0 0 0 0);
transform:translate(0%,0%)scale(1);}
12% {
opacity: 0;clip-path:inset(0 0 0 0);
transform:translate(0%,0%)scale(1);}
}
.photo:nth-child(15) {animation-delay: 56s;background: url(https://pic.imgdb.cn/item/6600f6f19f345e8d03ebaf86.jpg)no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 52s;background: url(https://pic.imgdb.cn/item/6600c3689f345e8d032ea733.jpg)no-repeat center/cover}
.photo:nth-child(13) {animation-delay: 48s;background: url(https://pic.imgdb.cn/item/65d054569f345e8d0339cb08.jpg)no-repeat center/cover}
.photo:nth-child(12) {animation-delay: 44s;background: url(https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg)no-repeat center/cover}
.photo:nth-child(11) {animation-delay: 40s;background: url(https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg)no-repeat center/cover}
.photo:nth-child(10) {animation-delay: 36s;background: url(https://pic.imgdb.cn/item/65db13fa9f345e8d03a48992.jpg)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 32s;background: url(https://pic.imgdb.cn/item/65db12cb9f345e8d03a20693.jpg)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 28s;background: url(https://pic.imgdb.cn/item/65dac8db9f345e8d03eac742.jpg)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 24s;background: url(https://pic.imgdb.cn/item/65bb5ce1871b83018a3ed949.jpg)no-repeat center/cover}
.photo:nth-child(6){animation-delay: 20s;background: url(https://pic.imgdb.cn/item/65b8fae0871b83018a629f5a.jpg)no-repeat center/cover}
.photo:nth-child(5){animation-delay: 16s;background: url(https://pic.imgdb.cn/item/65b8fa8e871b83018a610f7f.jpg)no-repeat center/cover}
.photo:nth-child(4){animation-delay: 12s;background: url(https://pic.imgdb.cn/item/658d7b30c458853aefc07335.jpg)no-repeat center/cover}
.photo:nth-child(3){animation-delay: 8s;background: url(https://pic.imgdb.cn/item/658c0a24c458853aef9d89ab.jpg)no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 4s;background: url('https://pic.imgdb.cn/item/658c09d6c458853aef9c646b.jpg')no-repeat center/cover}
.photo:nth-child(1) {animation-delay: 0s;background: url(https://pic.imgdb.cn/item/6600e87c9f345e8d03adc879.jpg)no-repeat center/cover}
.stop .photo:nth-child(1),
.stop .photo:nth-child(2),
.stop .photo:nth-child(3),
.stop .photo:nth-child(4),
.stop .photo:nth-child(5),
.stop .photo:nth-child(6),
.stop .photo:nth-child(7),
.stop .photo:nth-child(8),
.stop .photo:nth-child(9),
.stop .photo:nth-child(10),
.stop .photo:nth-child(11),
.stop .photo:nth-child(12),
.stop .photo:nth-child(13),
.stop .photo:nth-child(14),
.stop .photo:nth-child(15){animation-play-state: paused;}
#mydiv { margin: 0px 0 ; width: 100%; height: 100%;z-index: 1; cursor: crosshair; position:absolute;}
</style >
<div id="papa" >
<div id="testImg" >
<divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div>
<divclass="photo"></div><divclass="photo"></div><divclass="photo"></div>
</div>

<div id="mydiv"></div>
<div id="bfqbg">
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/65fa42669f345e8d03c830a3.gif" /></div>
<img id="tp" src="http://imge.kugou.com/stdmusic/400/20240318/20240318154535162537.jpg" alt="" />
<div id="bt">三月桃花朵朵开(对唱版)-章艳&烟圈蔓延</div>
<audioid="aud" loop controls autoplay>
<source src="https://bzgz.club/view.php/657835318cdddc637dc2afb97dcc9336.mp3" type="audio/mp3" /></audio>
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div>
</div>
</div>


<style>
#bfqbg {margin: 520px 10px;
        width:1164px;
        height: 120px;
        z-index: 20;
        border-radius:2px;
        position: relative;overflow: hidden;
        z-index: 123;
}
#tp{position:absolute;height:106px;width:106px;bottom:8px; left:8px;}
#tp img{height: 100%;width: 100%;}
#dt{position: absolute;bottom:35px; left:70%;width: 200px;height: 50px;opacity: .8;}
#dt img{height: 100%;width: 100%;}
audio {position:absolute;top:80px;left:75px;z-index: 50;
width: 90%;
height: 40px;
outline: none;
filter: invert(180);
}
audio::-webkit-media-controls-enclosure {
background:transparent ;
border-radius: 4px;
}
.media-controls-container,
.media-controls-container * {
background: rgb(129, 73, 200);
//滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8)#7eb637
border-radius: 4px;
}

audio::-webkit-media-controls-current-time-display {
order: 1; //设置弹性盒对象元素的顺序
color: #ffffff;
text-shadow: unset;
}

audio::-webkit-media-controls-time-remaining-display {
order: 2;
color: #000000;
text-shadow: unset;
}

#bt{ width: 500px; height: 50px;color: #ffffff; position: absolute; left:120px;top:10px;font-size: 16px; font-family:仿宋;z-index: 21;}

</style>
<style type="text/css">
.lrc{z-index: 20;
    width: 80%;bottom:-18px; left:15%;
    height: 100px;
    overflow: hidden;
    display: block;position: absolute;
    margin: 0 auto;}
.lrc #ullrc{
width: 700px;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{ filter: drop-shadow( 2px 2px 0px #000000);
    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: 35px;
    color: #ffffff;}
</style>
<script >
var lrc = ` 三月桃花朵朵开(对唱版)-章艳&烟圈蔓延
词：三力
曲：义恒
编曲：大约冬季
混音：烟圈蔓延
监制：谢飞
厂牌：三力音乐
op：星汉马文化
男：三月里桃花朵朵开
朵朵都是我的爱
女：妹等哥哥来把花摘
你可知妹情如海
女：三月里桃花朵朵开
朵朵开进梦里来
男：哥哥的心思妹别猜
无人能把你把你替代
女：哥哥呀哥哥不要再徘徊呀
妹妹经不起等待
男：哥哥的相思已然成灾
犹如浪潮在澎湃
女：蜂儿蜂儿也知把花采呀
哥哥你别再发呆
男：妹妹是哥哥一生所爱
妹的柔情醉心怀
女：三月里桃花朵朵开
朵朵开进梦里来
男：哥哥的心思妹别猜
无人能把你把你替代
女：哥哥呀哥哥不要再徘徊呀
妹妹经不起等待
男：哥哥的相思已然成灾
犹如浪潮在澎湃
女：蜂儿蜂儿也知把花采呀
哥哥你别再发呆
男：妹妹是哥哥一生所爱
妹的柔情醉心怀
合：蜂儿蜂儿也知把花采呀
女：哥哥你别再发呆
合：妹妹是哥哥一生所爱
男：妹的柔情醉心怀
合：妹的柔情醉心怀
`;
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;
</script>

<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}
var image0 = document.getElementById("testImg");
var image= document.getElementById("Img");
let mState = () => aud.paused ? (image.stop(),image0.classList.add('stop')):(image.play(),image0.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/line-lz.js';
document.body.appendChild(sF);
var lz = { papa: '#mydiv', total: 100, radius: 1, color: 'rgba(205,205,340,0.4)' }
</script>


liumang 发表于 2024-4-16 20:08

欣赏亚伦老师的精美音画

liumang 发表于 2024-4-16 20:09

多效果一键停止{:5_150:}

liumang 发表于 2024-4-16 20:10

感谢分享{:5_124:}
页: [1]
查看完整版本: 三月桃花朵朵开(对唱版)-章艳&烟圈蔓延