论坛 › 动画音画 › 《没有你陪伴真的好孤单》梦然

焱鑫磊 发表于 2023-6-11 23:39

《没有你陪伴真的好孤单》梦然

本帖最后由 焱鑫磊 于 2023-9-29 10:58 编辑 <br /><br /><style>
#papa { margin: 100px -280px ; width: 1164px; height: 640px; background: url(https://pic.imgdb.cn/item/6412e67aebf10e5d530a990b.gif)0 0/20%20%,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:10%; 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;
border:3px solid #ffffff;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation: round 90s linear infinite;
}

@keyframes round{2% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(-280deg)scale(0.8)translate(10%,-10%);
opacity:0
}
8% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0deg)scale(0.8)translate(10%,-10%);
opacity:1
}
12% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0)scale(0.8)translate(10%,-10%);
opacity:1
}
22% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(280deg)scale(0.8)translate(10%,-10%);
opacity:0
}
}

img:nth-child(1) {
animation-delay: 84s;
}
img:nth-child(2) {
animation-delay: 78s;
}
img:nth-child(3) {
animation-delay: 72s;
}
img:nth-child(4) {
animation-delay: 66s;
}
img:nth-child(5) {
animation-delay: 60s;
}
img:nth-child(6) {
animation-delay: 54s;
}
img:nth-child(7) {
animation-delay: 48s;
}
img:nth-child(8) {
animation-delay: 42s;
}
img:nth-child(9) {
animation-delay: 36s;
}
img:nth-child(10) {
animation-delay: 30s;
}
img:nth-child(11) {
animation-delay: 24s;
}
img:nth-child(12) {
animation-delay: 18s;
}
img:nth-child(13) {
animation-delay: 12s;
}
img:nth-child(14) {
animation-delay: 6s;
}
img:nth-child(15) {
animation-delay: 0s;
}


.stop img:nth-child(1) {
animation-play-state: paused;
}
.stop img:nth-child(2){
animation-play-state: paused;
}
.stopimg: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;
}

.stop img:nth-child(9) {
animation-play-state: paused;
}
.stop img:nth-child(10) {
animation-play-state: paused;
}

.stop img:nth-child(11) {
animation-play-state: paused;
}
.stop img:nth-child(12) {
animation-play-state: paused;
}
.stop img:nth-child(13) {
animation-play-state: paused;
}
.stop img:nth-child(14) {
animation-play-state: paused;
}

.stop img:nth-child(15) {
animation-play-state: paused;
}

</style>
<style>

.pg{ width: 100%; height:100%; left: 0%;
position: absolute;z-index:1;
top: 0%; z-index: 1;overflow: hidden;perspective: 3.125vmin;}


#polygon {animation: 6s linear infinite polygon;
left: 50%;
position: absolute;z-index:1;
top: 50%;
transform-style: preserve-3d;
transform: rotatex(90deg) rotatey(0deg) translatey(-10vmin);
}
@keyframes polygon {
100% {
    transform: rotatex(90deg) rotatey(0deg) translatey(0);
}
}
.side {opacity: 1;
background-image: url(https://365.tf/disk/tf/1676401601.png);
background-size:10vmin 25%;

height: 100vmin;
position: absolute;
transform-origin: 0;
width: calc(8vmin + 1px);
}
.side:nth-child(1) {
background-position: -9.94562vmin 0;
transform: rotatey(22.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(2) {
background-position: -19.89124vmin 0;
transform: rotatey(45deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(3) {
background-position: -29.83686vmin 0;
transform: rotatey(67.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(4) {
background-position: -39.78247vmin 0;
transform: rotatey(90deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(5) {
background-position: -49.72809vmin 0;
transform: rotatey(112.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(6) {
background-position: -59.67371vmin 0;
transform: rotatey(135deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(7) {
background-position: -69.61933vmin 0;
transform: rotatey(157.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(8) {
background-position: -79.56495vmin 0;
transform: rotatey(180deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(9) {
background-position: -89.51057vmin 0;
transform: rotatey(202.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(10) {
background-position: -99.45618vmin 0;
transform: rotatey(225deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(11) {
background-position: -109.4018vmin 0;
transform: rotatey(247.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(12) {
background-position: -119.34742vmin 0;
transform: rotatey(270deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(13) {
background-position: -129.29304vmin 0;
transform: rotatey(292.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(14) {
background-position: -139.23866vmin 0;
transform: rotatey(315deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(15) {
background-position: -149.18428vmin 0;
transform: rotatey(337.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(16) {
background-position: -159.12989vmin 0;
transform: rotatey(360deg) translate3d(-50%, -50%, 25vmin);
}

</style>
<div id="papa">
<audio id="MusicPlayer" src="https://i.mp3.wf/view.php/f1398d709541e1df3598fb41fa512302.mp3" autoplay loop></audio>
<span id="fullscreen">全屏观赏</span>
<div id="testImg" >

<img alt="" class="photo" src="https://pic.imgdb.cn/item/6481950d1ddac507ccbe1bd8.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648194f51ddac507ccbe04d8.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648194df1ddac507ccbdee5b.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648194cb1ddac507ccbdd5fd.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648194b31ddac507ccbdbc0e.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648194981ddac507ccbd97bd.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/6481947d1ddac507ccbd7c9e.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648194681ddac507ccbd584c.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/6481950d1ddac507ccbe1bd8.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648194f51ddac507ccbe04d8.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648194df1ddac507ccbdee5b.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648194cb1ddac507ccbdd5fd.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648194b31ddac507ccbdbc0e.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648194981ddac507ccbd97bd.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/6481947d1ddac507ccbd7c9e.jpg" />
</div>

<div class="pg">
<div id="polygon" >
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div></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:10%; left:5%;z-index: 30; transition: .3s all ease;animation:rotating 10s linear infinite;background:url(https://pic.imgdb.cn/item/6466dff20d2dde57775b7272.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');

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


</script >


<script>
let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>

樵歌 发表于 2023-6-12 10:51

各种手段的运用得相当娴熟。最具特色是播放器！！

焱鑫磊 发表于 2023-6-12 11:01

樵歌 发表于 2023-6-12 10:51
各种手段的运用得相当娴熟。最具特色是播放器！！

樵歌好！夸奖了！谢谢！{:4_187:}

梦缘 发表于 2023-6-12 17:28

谢谢老师的精彩佳作分享！好漂亮啊！{:4_204:}

焱鑫磊 发表于 2023-6-12 18:15

梦缘 发表于 2023-6-12 17:28
谢谢老师的精彩佳作分享！好漂亮啊！

问好梦缘！{:4_204:}

红影 发表于 2023-6-12 19:47

用花潮顶图截图透明图做播放器按钮，还有那么多动态和漂亮的美女轮播，这个帖子太美了，给焱鑫磊点赞{:4_199:}

红影 发表于 2023-6-12 19:48

暂停时所有动态都能停止，歌曲也好帖，焱鑫磊真棒{:4_199:}

焱鑫磊 发表于 2023-6-12 20:11

红影 发表于 2023-6-12 19:47
用花潮顶图截图透明图做播放器按钮，还有那么多动态和漂亮的美女轮播，这个帖子太美了，给焱鑫磊点赞{:4_19 ...

红影晚上好！{:4_187:}

焱鑫磊 发表于 2023-6-12 20:13

红影 发表于 2023-6-12 19:48
暂停时所有动态都能停止，歌曲也好帖，焱鑫磊真棒

对，一键全停。谢谢红影鼓励！{:4_187:}

红影 发表于 2023-6-12 23:05

焱鑫磊 发表于 2023-6-12 20:11
红影晚上好！

问好焱鑫磊，晚上好{:4_187:}

红影 发表于 2023-6-12 23:05

焱鑫磊 发表于 2023-6-12 20:13
对，一键全停。谢谢红影鼓励！

很喜欢的帖子{:4_187:}

查看完整版本: 《没有你陪伴真的好孤单》梦然