向云端 - 小霞/海洋Bo【控】 - 动画音画 - 花潮论坛

亚伦影音工作室 发表于 2023-9-23 11:09

向云端 - 小霞/海洋Bo【控】

本帖最后由亚伦影音工作室于 2023-9-23 11:41 编辑 <br /><br /><style>
#papa {margin: 10px -300px;width: 1164px;height: 620px;background: linear-gradient(135deg, #880000 0%,#000080 60%,#00ff00 100%);box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;position: relative;overflow: hidden;z-index: 12345;}
#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}
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:2;mix-blend-mode:lighten;}
#bk{position:absolute;top:75%;left:85%;width:130px;height:130px;opacity: 1;margin: 0px 0px;opacity: 1;}
#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{0% {transform: rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}
100% {transform: rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}}
#mplayer {z-index: 80;position:absolute;top:50px;left:50px;width:38px;height:38px;transform: rotateX(45deg) rotateY(-20deg) ;}
#tx { position: absolute;width: 100%;height: 100%;animation: tx 0.2s linear infinite;cursor: pointer;}
@keyframes tx {from {filter: hue-rotate(360deg);}}
.photo {width: 100%;
height: 100%;
position: absolute;z-index: 1;
top:0px; left:0;
opacity: 0;
animation: round 30s linear infinite;}
@keyframes round{0% {
opacity: 1;clip-path:polygon(0 0, 40% 40%, 50% 86.60254%, 60% 40%, 100% 0, 50% 20%, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
9% {
opacity: 1;clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 100%, 100% 0, 50% 0, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
10% {
opacity: 1;clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 100%, 100% 0, 50% 0, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
24% {
opacity: 0;clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 100%, 100% 0, 50% 0, 0 0);
-webkit-transform:translate(0%,0%)scale(1.5);}
}
.photo:nth-child(1) {animation-delay: 24s;background: url('https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg')no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 18s;background: url('https://pic.imgdb.cn/item/64e9fa3f661c6c8e544f1b3a.jpg')no-repeat center/cover}
.photo:nth-child(3) {animation-delay: 12s;background: url('https://pic.imgdb.cn/item/64f93f7e661c6c8e54359206.jpg')no-repeat center/cover}
.photo:nth-child(4) {animation-delay: 6s;background: url('https://pic.imgdb.cn/item/64c509b41ddac507ccc4996a.jpg')no-repeat center/cover}
.photo:nth-child(5) {animation-delay: 0s;background: url('https://pic.imgdb.cn/item/64ec3199661c6c8e54c39ffd.jpg')no-repeat center/cover}
.stop .photo:nth-child(1){animation-play-state: paused;}
.stop .photo:nth-child(2){animation-play-state: paused;}
.stop .photo:nth-child(3){animation-play-state: paused;}
.stop .photo:nth-child(4){animation-play-state: paused;}
.stop .photo:nth-child(5){animation-play-state: paused;}
</style>

<div id="papa">
<span id="fullscreen">全屏</span>
<div id="Img" >
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
</div>

<div id='dt' ><img id="testImg" src="https://pic.imgdb.cn/item/64f84335661c6c8e54f84cc0.gif" width="100%" height="100%"></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"></div>
</div>
<divclass="lrc">
      <div id="tx"><ul id="ullrc">
</ul></div>
</div>
</div>

<audio id="aud" src="https://www.qqmc.com/mp3/music279292599.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 = `向云端 - 小霞/海洋Bo
词：海洋Bo
曲：海洋Bo
编曲：王大夫
吉他：王大夫
制作人：张泽宥/小贾
混音工程师：何世渝
母带工程师：何世渝
和声：小手鹅
口琴：张德斌
制作协力：李彦泽
营销：网易飓风
企划：徐思灵
项目统筹：宋旭辉 Shawn Song/李若嫣 Ruoyan Li
制作统筹：赵楚峰 Chufeng Zhao
艺人统筹：汪立宪 Vincent Wang
监制：许雯静 Vivian Xu/刘嘉雄 Charles Liu/小贾
总监制：陈国威 Andrew Chan/谢奇笛
出品：亚伦影音工作室
向云端
山那边
海里面
真实的我应该走向哪边
日落前
风来临
石墩下我在盘腿坐着
人到底靠什么来定义丑恶
神啊你在哪
山啊我害怕
海啊也带不走
尽头到底有没有
如果你很难过
不如先收拾你的房间
别再辗转反侧
等会儿阳光会照在你的旁边
没洗的别再攒着
换个新的发型买个好看的包
压抑焦虑心情忐忑
就去养只爱你的猫
不是不如意
也许你并没围着自己的赛道走
你真的很美丽
为什么常说自己的外貌丑
或许你像我一样很胖
生活让你感到卑贱
那么当你听到这首歌的时候
选择与我共同蜕变
也许你现在很难过
也许正躺在被窝
也许你现在很迷茫
正在酒吧里坐着
也许你在工作
或者刚刚分手了
也许你在山脚下
会情不自禁的哼出这首歌
向云端
山那边
海里面
真实的你在于怎么选择
神啊你在哪
山啊我害怕
海啊带走哀愁
就像带走每条河流
`;
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() {var imagee = document.getElementById("testImg");
var aud = document.getElementById("aud");
var image = document.getElementById("Img");
var img = document.getElementById("mplayer");
img.onclick = function() {
if (aud.paused) {
aud.play();image.classList.remove('stop');imagee.stop();
} else {
aud.pause();image.classList.add('stop');imagee.play();
}
}

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);})();

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

</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;
         // 透明度还原
         imagee.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 imagee = document.getElementById("testImg");
let mState = () => aud.paused ? imagee.stop():imagee.play();
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);

tx.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => tx.style.animationPlayState = 'running');
aud.addEventListener('pause', () => tx.style.animationPlayState = 'paused');
</script>

醉美水芙蓉 发表于 2023-9-23 11:51

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

亚伦好制作，每个帖的代码都有变换{:4_199:}

小辣椒 发表于 2023-9-23 12:11

这个播放器按钮和前面那个差不多，现在的有斜的，亚伦会动脑子{:4_199:}

焱鑫磊 发表于 2023-9-23 16:10

学习欣赏！{:4_187:}

梦缘发表于 2023-9-23 19:50

欣赏老师的精美制作，问好！{:4_185:}

红影发表于 2023-9-26 11:13

图片轮转非常有特色。制作漂亮。欣赏亚伦老师好帖{:4_199:}

页: [1]

花潮论坛's Archiver

向云端 - 小霞/海洋Bo【控】