如果爱还在 - 天籁神音 - 动画音画 - 花潮论坛

亚伦影音工作室 发表于 2023-9-22 20:46

如果爱还在 - 天籁神音

本帖最后由亚伦影音工作室于 2023-9-23 13:22 编辑 <br /><br /> <style>
#papa {margin: 10px -300px;
width: 1164px;
height: 620px;
background:#000000 ;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;
}

#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; transition: 0.1s all ease;}

#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:5%; left:calc(95% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 0; cursor: pointer; z-index: 111}

#bk{position:absolute;top:75%;left:3%;width:130px;height:130px;opacity: 0;}
#vcd{z-index: 2;position:absolute;top:10px;left:10px;width:120px;height:120px;animation: cp 10s linear infinite;background: url('https://pic.imgdb.cn/item/642fd321a682492fcc594c8d.png') no-repeat center/cover,url('https://pic.imgdb.cn/item/64fd5599661c6c8e5429c0e2.jpg') no-repeat center/cover;border-radius:50%; box-shadow: 0px 0px 0px 2px #000000, 0px 0px 0px 8px #cccccc;}
@keyframes cp{to {transform:rotate(360deg); }}
#mplayer {z-index: 80;position:absolute;top:50px;left:50px;width:38px;height:38px;}
#papa:hover #bk{ display:block ;opacity: 1;}
</style>

<div id="papa">
<span id="fullscreen">全屏</span>
<div id="photos">
<img src="https://img-baofun.zhhainiao.com/fs/08e5ee069a2bdca410f6acdc4716d154.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/80cf3f632bed46df15fe82d4f6e591b0.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/506465753f8985a68964e9e93d2a8141.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/ff4ad3821a4a29b0909290eb9f307b8c.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/7c5e11e8850af24b77faa4280baa5f3b.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/fad8d29ff61243c5ecf73730d8a1a0e5.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/b16aafc95770fb2073e15bfa453f1113.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/d379de6a6004bf2cfd47de40813702c6.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/08e5ee069a2bdca410f6acdc4716d154.jpg" />
</div>

<div id="bk" >
<div id="vcd" ></div>
<div ><img id="mplayer" src="http://image.hnol.net/c/2022-02/01/23/202202012325163161-5769293.png" alt="" /></div>
</div>
<divclass="lrc">
   <ul id="ullrc">
      </ul>
</div>
</div>

<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=200677867&.mp3" loop autoplay></audio>

<style type="text/css">
.lrc{z-index: 20;
width: 100%;
height: 120px;
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:80%; left:0%;
margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
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: 40px;
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;

let fs = true;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
            fs = !fs;
   };
(function() {let vid = document.querySelector('vid');
let mState = () => aud.paused ?vid.pause() :vid.play();
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
(function() {
var aud = document.getElementById("aud");
var img = document.getElementById("mplayer");
img.onclick = function() {
if (aud.paused) {
aud.play();
} else {
aud.pause();
}
}
aud.addEventListener("play", function (e) {
img.src="http://image.hnol.net/c/2022-02/01/23/202202012325163161-5769293.png";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://image.hnol.net/c/2022-02/01/23/202202012327333961-5769293.png";
}, false);})();
</script>

<script>

vcd.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => vcd.style.animationPlayState = 'running');
aud.addEventListener('pause', () => vcd.style.animationPlayState = 'paused');

photos.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => photos.style.animationPlayState = 'running');
aud.addEventListener('pause', () => photos.style.animationPlayState = 'paused');

</script>

<style type="text/css">

#photos img{float:right;width:1164px;-webkit-mask-image:radial-gradient(black 35% ,transparent 80%);overflow:hidden;}
#photos {position: absolute;width:1164px;height:620px;z-index:1;width: calc(100% * 9);animation: ma 20s ease-out infinite alternate;/*---修改图片数量的话需要修改下面的动画参数*/}

@keyframes ma {
      0%,20% {    right: -9312px;}
   25%,30% {    right: -8148px;}
   35%,40% {    right: -6984px;}
   45%,50% {    right: -5820px; }
   55%,60% {    right: -4656px; }
   65%,70% {    right: -3492px; }
   75%,80% {    right: -2328px;}
   85%,90% {    right: -1164px;}
   95%,100% {    right: 0px;}
}
</style>

红影发表于 2023-9-22 22:27

漂亮的旋转光盘按钮，好看的视频。欣赏亚伦老师好帖{:4_204:}

红影发表于 2023-9-22 22:28

标题的8是什么意思？
还有视频播放完了就成黑屏了？{:4_203:}

小辣椒 发表于 2023-9-23 09:19

亚伦我手机看见黑背景，然后点击了有画面出来，一下子又黑屏了，什么原因啊

页: [1]

花潮论坛's Archiver

如果爱还在 - 天籁神音