论坛 › 欢乐水吧 › 人生没谁可以依赖-倪红

亚伦影音工作室 发表于 2023-11-29 20:45

人生没谁可以依赖-倪红

本帖最后由 亚伦影音工作室 于 2024-1-31 12:15 编辑 <br /><br /><style>
#papa { margin: 10px -300px ; width: 1164px; height: 640px;background:#000000; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;transform:rotateX(0deg) scale(1)}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:3%; left:80%;color:#FF0000; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书; opacity: 1; cursor: pointer; z-index: 11}
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:1;}

</style>
<style>
.set {
position: absolute;z-index: 2;
width: 100%;

height: 100%;
top: 0;
left: 0;
}
.set div {
position: absolute;
display: block;
user-select: none;
}
.set div img {pointer-events: none;
max-width: 90px;
max-height: 120px;
}
.set div:nth-child(1) {color:#ff6400;
left: 20%;
animation: animate 6s linear infinite;
animation-delay: -7s;
}

.set div:nth-child(2) {
left: 50%;
animation: animate 20s linear infinite;
animation-delay: -5s;
}
.set div:nth-child(3) {
left: 70%;
animation: animate 25s linear infinite;
}
.set div:nth-child(4) {       
left: 0%;
animation: animate 15s linear infinite;
animation-delay: -5s;
}
.set div:nth-child(5) {
left: 85%;
animation: animate 18s linear infinite;
animation-delay: -10s;
}
.set div:nth-child(6) {
left: 15%;
animation: animate 12s linear infinite;
animation-delay: -7s;
}
.set div:nth-child(7) {
left: 60%;
animation: animate 14s linear infinite;
animation-delay: -7s;
}

.stop .set div:nth-child(1) {
animation-play-state: paused;
}
.stop .set div:nth-child(2) {
animation-play-state: paused;
}

.stop .set div:nth-child(3) {
animation-play-state: paused;
}
.stop .set div:nth-child(4) {
animation-play-state: paused;
}
.stop .set div:nth-child(5) {
animation-play-state: paused;
}
.stop .set div:nth-child(6) {
animation-play-state: paused;
}
.stop .set div:nth-child(7) {
   animation-play-state: paused;
}

@keyframes animate {
0% {
    opacity: 0;
    top: -10%;
    transform: translateX(20px) rotate(0deg);filter:hue-rotate(360deg);
}
10% {
    opacity: 1;
}
20% {
    transform: translateX(-20px) rotate(45deg);
}
40% {
    transform: translateX(-20px) rotate(90deg);
}
60% {
    transform: translateX(-20px) rotate(135deg);
}
80% {
    transform: translateX(-20px) rotate(180deg);
}
100% {
    top: 110%;
    transform: translateX(-20px) rotate(225deg);
}
}
.set2 {
transform: scale(2) rotateY(180deg);
filter: blur(2px);
}

.set3 {
transform: scale(0.8) rotateY(30deg);
filter: blur(4px);
}

</style>
<div id="papa">
<audio id="MusicPlayer" src="https://www.qqmc.com/mp3/music313773203.mp3" autoplay loop></audio>
<span id="fullscreen">全屏观赏</span>

<div id="testImg" >
<div class="set">
   <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
    <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
   <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
    <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
   <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
   <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
   <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
</div>
<div class="set set2">
   <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
    <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
   <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
    <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
   <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
   <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
   <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
</div>
<div class="set set3">
   <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
    <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
   <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
    <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
   <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
   <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
   <div><img alt=""src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" /></div>
</div>

</div>

<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/656c341cc458853aef85a8e6.gif" width="100%" height="100%"></div>

<div id="img_border"></div>
   <div class="lrc">
      <div class="p"> <liid="ullrc" >
          </li>
      </div>
    </div>

</div>
<style>



.lrc{
    width: 980px;
    height: 140px;position: absolute;top:88%; left:10%;
        z-index: 3;
    overflow: hidden;
    display: block;
    margin: 0px 0px;
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 80px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;transform: translate(0%,0%);
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
    display: block;
    width: 100%;
    margin: 0 auto;
}

/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 35px;color: #ff0000;
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
    background-image:linear-gradient(50deg, #ffff00, #ff0000, #fff000, #00ff00);
   background-position: 0px 0;
   
   -webkit-animation:loop 3s linear 2;
}
@-webkit-keyframes loop{
   0%{background-position: -800px 0;filter:hue-rotate(360deg)contrast(180%)brightness(500%);}
   
}
#img_border{display:inline-block;width:140px;height:140px;position: absolute;top:80%; left:85%;z-index: 30; transition: .3s all ease;animation:rotating 10s linear infinite;background:url(https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png)0px 0px/100% 100%;border-radius:0%;}
@keyframes rotating{
0%{transform: rotate(-360deg);filter:hue-rotate(360deg)}
100%{transform: rotate(0deg);}
}
</style>

<style type="text/css">.items { 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 = `人生没谁可以依赖-倪红
词：岁月静美
曲：钟翠华
编曲：王贺祺
制作人：陈金文
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 = 80, 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 = $("MusicPlayer").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}

$("MusicPlayer").ontimeupdate = setPosition;




var image = document.getElementById("testImg");
var image0= document.getElementById("Img");
let mState = () => MusicPlayer.paused ? (image.classList.add('stop'),image0.stop()):(image.classList.remove('stop'),image0.play());
MusicPlayer.addEventListener('play', () => mState());
MusicPlayer.addEventListener('pause', () => mState());



img_border.onclick = () => MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause();
MusicPlayer.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');

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


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

</script >


<script>
let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</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;
            // 透明度还原
            image0.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;
            }
      }
    };
}

</script>

焱鑫磊 发表于 2023-11-29 22:10

本帖最后由 焱鑫磊 于 2023-11-29 22:12 编辑

沙发欣赏老师佳作！{:4_187:}

红影 发表于 2023-11-29 22:17

漂亮的图片轮转。这彩虹伞这样用也很漂亮呢。欣赏亚伦老师好帖{:4_199:}

红影 发表于 2023-11-29 22:19

这首歌曲的歌词很实在呢。看到图片上有制作：许森匡的字样，这个是谁啊{:4_173:}

幸运草 发表于 2023-11-29 23:04

欣赏老师好帖{:6_244:}

杨柳青 发表于 2023-11-29 23:25

漂亮~~{:5_116:}

查看完整版本: 人生没谁可以依赖-倪红