论坛 › 动画音画 › 《寂寞的泪影》江淑娜

焱鑫磊 发表于 2023-5-7 08:19

《寂寞的泪影》江淑娜

<style>
#papa { margin: 110px -280px ; width: 1164px; height: 640px; background: url(https://pic2.imgdb.cn/item/6412e67aebf10e5d530a990b.gif)0 0/10%10%,linear-gradient(80deg, #000080, #000090, #000000, #111111); 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:5%; left:80%;color:#FF0000; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书; opacity: 1; cursor: pointer; z-index: 11}
.photo {width: 100%;
height: 100%;
position: absolute;z-index: -2;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation-name: round ;animation-duration: 48s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;}
@keyframes round{0% {opacity: 0;}
10% {opacity: 1;}
18% {opacity: 0;} }
img:nth-child(1) {animation-delay: 42s;}
img:nth-child(2) {animation-delay: 36s;}
img:nth-child(3) {animation-delay: 30s;}
img:nth-child(4) {animation-delay: 24s;}
img:nth-child(5) {animation-delay: 18s;}
img:nth-child(6) {animation-delay: 12s;}
img:nth-child(7) {animation-delay: 6s;}
img:nth-child(8) {animation-delay: 0s;}
.stop img:nth-child(1) {animation-play-state: paused;}
.stop img:nth-child(2) {animation-play-state: paused;}
.stop img:nth-child(3) {animation-play-state: paused;}
.stop img:nth-child(4) {animation-play-state: paused;}
.stop img:nth-child(5) {animation-play-state: paused;}
.stop img:nth-child(6) {animation-play-state: paused;}
.stop img:nth-child(7) {animation-play-state: paused;}
.stop img:nth-child(8) {animation-play-state: paused;}
</style>
<style type="text/css">
#ganguang {width: 100%;
height: 100%;
position: absolute;top:0px; left:0px;z-index: 1;}
.span {
width: 20vmin;
height: 20vmin;
border-radius: 40vmin;
backface-visibility: hidden;
position: absolute;
animation-name: move;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;}
.span:nth-child(1) {
color: #E45A84;
top: 38%;
left: 90%;
animation-duration: 14.4s;
animation-delay: -7.3s;
transform-origin: 8vw -20vh;
box-shadow: 40vmin 0 7.5825118355vmin currentColor;
}
.span:nth-child(2) {
color: #E45A84;
top: 85%;
left: 44%;
animation-duration: 13.9s;
animation-delay: -15.3s;
transform-origin: -23vw 19vh;
box-shadow: -40vmin 0 7.0535658472vmin currentColor;
}
.span:nth-child(3) {
color: #E45A84;
top: 31%;
left: 94%;
animation-duration: 14.4s;
animation-delay: -14s;
transform-origin: -10vw -19vh;
box-shadow: -40vmin 0 6.3282530813vmin currentColor;
}
.span:nth-child(4) {
color: #583C87;
top: 32%;
left: 72%;
animation-duration: 11.1s;
animation-delay: -11s;
transform-origin: 22vw 3vh;
box-shadow: 40vmin 0 9.0598358039vmin currentColor;
}
.span:nth-child(5) {
color: #E45A84;
top: 60%;
left: 8%;
animation-duration: 15s;
animation-delay: -10.5s;
transform-origin: 5vw -1vh;
box-shadow: -40vmin 0 13.3208706669vmin currentColor;
}
.span:nth-child(6) {
color: #ff0000;
top: 90%;
left: 48%;
animation-duration: 13.6s;
animation-delay: -5.2s;
transform-origin: 24vw 15vh;
box-shadow: 40vmin 0 15.7532629644vmin currentColor;
}
.span:nth-child(7) {
color: #583C87;
top: 59%;
left: 28%;
animation-duration: 11s;
animation-delay: -11.5s;
transform-origin: -20vw 18vh;
box-shadow: -40vmin 0 11.9539838986vmin currentColor;
}
.span:nth-child(8) {
color: #E45A84;
top: 48%;
left: 52%;
animation-duration: 14.3s;
animation-delay: -3.9s;
transform-origin: 9vw 10vh;
box-shadow: -40vmin 0 9.0533535457vmin currentColor;
}
.span:nth-child(9) {
color: #583C87;
top: 44%;
left: 59%;
animation-duration: 13.5s;
animation-delay: -12.7s;
transform-origin: 19vw -11vh;
box-shadow: 40vmin 0 6.6089531139vmin currentColor;
}
.span:nth-child(10) {
color: #E45A84;
top: 43%;
left: 64%;
animation-duration: 11.1s;
animation-delay: -6s;
transform-origin: 9vw 0vh;
box-shadow: -40vmin 0 5.726542192vmin currentColor;
}
.span:nth-child(11) {
color: #FFACAC;
top: 59%;
left: 95%;
animation-duration: 10.8s;
animation-delay: -3.9s;
transform-origin: 9vw -15vh;
box-shadow: -40vmin 0 11.0535574125vmin currentColor;
}
.span:nth-child(12) {
color: #583C87;
top: 70%;
left: 97%;
animation-duration: 12.6s;
animation-delay: -3.5s;
transform-origin: -21vw -24vh;
box-shadow: -40vmin 0 12.463832706vmin currentColor;
}
.span:nth-child(13) {
color: #E45A84;
top: 52%;
left: 91%;
animation-duration: 14.6s;
animation-delay: -11.4s;
transform-origin: -15vw 13vh;
box-shadow: -40vmin 0 13.9327650237vmin currentColor;
}
.span:nth-child(14) {
color: #00ff00;
top: 50%;
left: 1%;
animation-duration: 10.4s;
animation-delay: -7.8s;
transform-origin: 24vw 0vh;
box-shadow: -40vmin 0 12.7768318488vmin currentColor;
}
.span:nth-child(15) {
color: #FFACAC;
top: 60%;
left: 29%;
animation-duration: 12.8s;
animation-delay: -7.7s;
transform-origin: 7vw -15vh;
box-shadow: 40vmin 0 5.7092398504vmin currentColor;
}
.span:nth-child(16) {
color: #FFACAC;
top: 48%;
left: 100%;
animation-duration: 13.5s;
animation-delay: -3s;
transform-origin: -22vw 2vh;
box-shadow: 40vmin 0 7.8329143448vmin currentColor;
}
.span:nth-child(17) {
color: #E45A84;
top: 20%;
left: 63%;
animation-duration: 11.8s;
animation-delay: -1.9s;
transform-origin: 12vw -20vh;
box-shadow: -40vmin 0 8.4443044151vmin currentColor;
}
.span:nth-child(18) {
color: #000060;
top: 29%;
left: 50%;
animation-duration: 16s;
animation-delay: -1.2s;
transform-origin: 20vw -8vh;
box-shadow: -40vmin 0 10.8986254969vmin currentColor;
}
.span:nth-child(19) {
color: #583C87;
top: 2%;
left: 80%;
animation-duration: 14.7s;
animation-delay: -8.1s;
transform-origin: -7vw -2vh;
box-shadow: -40vmin 0 12.9483961237vmin currentColor;
}
.span:nth-child(20) {
color: #fff000;
top: 93%;
left: 35%;
animation-duration: 10.8s;
animation-delay: -1s;
transform-origin: -1vw 5vh;
box-shadow: -40vmin 0 13.4811190658vmin currentColor;
}

@keyframes move {
100% {
    transform: translate3d(0, 0, 1px) rotate(360deg)scale(1.2);
}
}
.stop .span {animation-play-state: paused;}
.stop .span:nth-child(1) {animation-play-state: paused;}
.stop .span:nth-child(2) {animation-play-state: paused;}
.stop .span:nth-child(3) {animation-play-state: paused;}
.stop .span:nth-child(4) {animation-play-state: paused;}
.stop .span:nth-child(5) {animation-play-state: paused;}
.stop .span:nth-child(6) {animation-play-state: paused;}
.stop .span:nth-child(7) {animation-play-state: paused;}
.stop .span:nth-child(8) {animation-play-state: paused;}
.stop .span:nth-child(9) {animation-play-state: paused;}
.stop .span:nth-child(10){animation-play-state: paused;}
.stop .span:nth-child(11){animation-play-state: paused;}
.stop .span:nth-child(12){animation-play-state: paused;}
.stop .span:nth-child(13){animation-play-state: paused;}
.stop .span:nth-child(14){animation-play-state: paused;}
.stop .span:nth-child(15){animation-play-state: paused;}
.stop .span:nth-child(16){animation-play-state: paused;}
.stop .span:nth-child(17){animation-play-state: paused;}
.stop .span:nth-child(18){animation-play-state: paused;}
.stop .span:nth-child(19){animation-play-state: paused;}
.stop .span:nth-child(20){animation-play-state: paused;}
</style >
<div id="papa">
<audio id="MusicPlayer" src="https://www.joy127.com/url/104582.mp3" autoplay loop></audio>
<div id="fullscreen">全屏观赏</div>
<div id="testImg" >
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/64565a680d2dde577725cfb1.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/64565b9e0d2dde577727648e.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/64565bb60d2dde57772785b7.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/64565bce0d2dde577727a3a6.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/64565be60d2dde577727c11d.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/64565bfb0d2dde577727dcd6.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/64565c120d2dde577727f9a0.jpg" />
<img alt="" class="photo" src="https://pic2.imgdb.cn/item/64565c2c0d2dde5777281906.jpg" />
<div id='ganguang' >
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
   <m class="span"></m>
<m class="span"></m>
    <m class="span"></m>
    <m class="span"></m>
   <m class="span"></m></div>
</div>
<div class="bfbj">
<divid="btn">
<div id="img_border"></div></div>
   <div class="lrc">
      <div class="p"> <liid="ullrc" >
          </li>
      </div>
    </div>
</div>
</div>
<style>
.bfbj{
    width: 100%;   height: 100%;margin: 0px 0px;position: absolute;
}
#MusicPlayer{
    width: 600px;
    display: block;
    margin: 0 auto;
}
#btn{
    display: block;
    margin: 0 ;
}
.lrc{
    width: 980px;
    height: 140px;position: absolute;top:85%; 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: 45px;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:150px;height:150px;position: absolute;top:5%; left:5%;z-index: 30; transition: .3s all ease;animation:rotating 10s linear infinite;background:url(https://pic2.imgdb.cn/item/6412faecebf10e5d5357f0ef.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 = `《寂寞的泪影》江淑娜
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 = 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"),
    button = document.getElementById("btn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
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');
</script >
<script>
let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>

红影 发表于 2023-5-7 09:16

变色的背景，变色的播放器，还有轮转图片和漂亮的动态效果。焱鑫磊的帖子真漂亮{:4_187:}

梦缘 发表于 2023-5-7 16:44

精美的帖，欣赏问好！{:4_171:}

焱鑫磊 发表于 2023-5-7 18:50

红影 发表于 2023-5-7 09:16
变色的背景，变色的播放器，还有轮转图片和漂亮的动态效果。焱鑫磊的帖子真漂亮

问好红影！{:4_204:}

焱鑫磊 发表于 2023-5-7 18:51

梦缘 发表于 2023-5-7 16:44
精美的帖，欣赏问好！

问好梦缘！{:4_204:}

红影 发表于 2023-5-7 20:30

焱鑫磊 发表于 2023-5-7 18:50
问好红影！

问好焱鑫磊，你做帖子真快啊，看到你好几个作品呢{:4_187:}

查看完整版本: 《寂寞的泪影》江淑娜