情网 - 二小姐 - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2024-4-13 20:53

情网 - 二小姐

本帖最后由亚伦影音工作室于 2024-4-14 18:11 编辑 <br /><br /><style type="text/css">
#papa{
position: relative;
width: 1164px;
height: 640px;
   margin-left:-300px;
margin-top:150px;
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% 50% 0% 50%);
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/20230901/20230901093057376796.jpg" alt="" />
<div id="bt">情网 - 二小姐</div>
<audioid="aud" loop controls autoplay>
<source src="https://bzgz.club/view.php/49b37ff3667f94191b14e08090cdbd75.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: #ff0000;}
</style>
<script >
var 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 = 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>

红影发表于 2024-4-13 23:44

漂亮的线条粒子。欣赏亚伦老师好帖{:4_187:}

红影发表于 2024-4-13 23:48

这个还有图片轮播效果呢，漂亮{:4_187:}

愤怒的葡萄 发表于 2024-4-14 06:33

有一张是李一桐的照片吧。

小辣椒 发表于 2024-4-14 16:07

估计亚伦也是堕入情网了{:4_170:}

小辣椒 发表于 2024-4-14 16:10

这歌蛮好听的，循环了二遍{:4_208:}

流水光阴 发表于 2024-4-15 17:00

美女漂亮的

流水光阴 发表于 2024-4-15 17:00

欣赏佳作感谢老师分享

页: [1]

花潮论坛's Archiver

情网 - 二小姐