亦是金 发表于 2025-1-30 20:26

《 骑着二八闯天涯 》 - 侯云

本帖最后由 亦是金 于 2025-2-9 12:51 编辑 <br /><br /><style>
#papa {
        margin: 50px -140px ;
        width: 1200px;
        height: 710px;
        background: url(https://cccimg.com/view.php/8bace9e5c2cf8aaea4f36958c677e31e.gif)0 0/100%100%,linear-gradient(80deg, #000080, #000090, #000000, #111111);
        box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;
border-radius:1%;
        position: relative;        
        display: grid;
        place-items: center;

opacity: 1;
        z-index: 10000;
        overflow:hidden;
        transform:rotateX(0deg) scale(1);
}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:110%;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;
-webkit-mask-image: radial-gradient(black 35% ,transparent 85%);
        top:0px;
        left:0px;
        filter:contrast(120%)brightness(100%);
        opacity: 0;
        animation-name: round ;
        animation-duration: 90s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
}

@keyframes round   {9% {opacity: 0;}
        16% {opacity: 1;}
        19% {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;
}

</style>

<style>
.set {
position: absolute;z-index: 1;
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: 40px;
        max-height: 90px;/*max-width: 90px;max-height: 120px;*/
}

.set div:nth-child(1) {
        left: 75%;
        animation: animate 12s linear infinite;
        animation-delay: -4s;
}

.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: 30%;
        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 16s linear infinite;
        animation-delay: -12s;
}
.set div:nth-child(8) {
        left: 45%;
        animation: animate 13s linear infinite;
        animation-delay: -11s;
}



.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;
}
.stop .set div:nth-child(8) {
        animation-play-state: paused;
}

@keyframes animate {
0% {
    opacity: 0;
    top: -10%;
    transform: translateX(20px) rotate(0deg);filter:hue-rotate(30deg);
}
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://cccimg.com/view.php/7e47a6e512a03d779260a108e841a2ac.mp3" autoplay loop></audio>
<span id="fullscreen">全屏观赏</span>

<div id="testImg" >
<img alt="" class="photo" src="https://img1.oldkids.cn/upload/2025/01/27/photo_0_20250127163414259.jpg" />
<img alt="" class="photo" src="https://img2.oldkids.cn/upload/2025/01/27/photo_0_20250127163414412.jpg" />
<img alt="" class="photo" src="https://img2.oldkids.cn/upload/2025/01/27/photo_0_20250127163413709.jpg" />
<img alt="" class="photo" src="https://img4.oldkids.cn/upload/2025/01/27/photo_0_20250127163344954.jpg" />
<img alt="" class="photo" src="https://img3.oldkids.cn/upload/2025/01/27/photo_0_20250127163344165.jpg" />
<img alt="" class="photo" src="https://img1.oldkids.cn/upload/2025/01/27/photo_0_20250127163343667.jpg" />
<img alt="" class="photo" src="https://img4.oldkids.cn/upload/2025/01/27/photo_0_20250127163413969.jpg" />
<img alt="" class="photo" src="https://img1.oldkids.cn/upload/2025/01/27/photo_0_20250127163413625.jpg" />
<img alt="" class="photo" src="https://img1.oldkids.cn/upload/2025/01/27/photo_0_20250127163414199.jpg" />
<img alt="" class="photo" src="https://img3.oldkids.cn/upload/2025/01/27/photo_0_20250127163413516.jpg" />
<img alt="" class="photo" src="https://img3.oldkids.cn/upload/2025/01/27/photo_0_20250127163414927.jpg" />
<img alt="" class="photo" src="https://img1.oldkids.cn/upload/2025/01/27/photo_0_20250127163414506.jpg" />
<img alt="" class="photo" src="https://img3.oldkids.cn/upload/2025/01/27/photo_0_20250127163344977.jpg" />
<img alt="" class="photo" src="https://img3.oldkids.cn/upload/2025/01/27/photo_0_20250127163414516.jpg" />


<div class="set">
    <div><img src="https://cccimg.com/view.php/60e670e22448d77e5c7bef55a29353dc.png" alt="1"/></div>
    <div><img src="https://www.emojiall.com/images/60/apple/1f338.png" alt="2"/></div>
    <div><img src="https://www.emojiall.com/images/60/telegram/1f338.gif" alt="3"/></div>
    <div><img src="https://cccimg.com/view.php/593d37d93e839d1db64be823d4f43d88.png" alt="4"/></div>
    <div><img src="https://cccimg.com/view.php/905059d6baf3d921e7937b2a46fa10e9.png" alt="5"/></div>
    <div><img src="https://cccimg.com/view.php/134908bc40e1d507862a218852b34020.png" alt="6"/></div>
    <div><img src="https://cccimg.com/view.php/ab831d4cb5fa0b8eeabbffe3e541892e.png" alt="7"/></div>
    <div><img src="https://cccimg.com/view.php/efa2b6be7488aeb7cbd7dc867d1db16c.png" alt="8"/></div>



</div>

</div>


<div style="position: relative;width: 600px;height: 50px;top:-280px;LEFT: 50px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<span style="color:#ff0000;"><span style="font-size:36px;">《 骑着二八闯天涯 》</span>
<span style="color:#0914f9;"><span style="font-size:22px;">   - 侯云</span></div>

<div style="position: relative;width: 500px;height: 50px;top:100px;LEFT: 650px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:24px;">亦是金在线音乐</span></span></span></p></div>


<div class="bfbj">
<divid="btn">
<div id="img_border"></div></div>
   <div class="lrc">
      <div class="p"> <liid="ullrc" >
          </li>
<img id="testImg" src="https://www.bohann.net/static/image/smiley/erhua/013.gif" width:150px ;height:100px;top:550px; left:550px;></div>
      </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:90%; left:5%;
        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:100px;height:100px;position: absolute;top:82%; left:5%;z-index: 30; transition: .3s all ease;animation:rotating 6s linear infinite;background:url(https://s1.ax1x.com/2023/02/28/ppCT07F.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 = `《 骑着二八闯天涯 》 - 侯云
作词：宋友诚
作曲：大飞
歌词编辑：亦是金
● ● ● ● ● ●
听说世界很大我得去溜达
一辈子不能过得憋屈巴拉
还没亲眼瞧瞧人间的繁华
也想体验一把四海为家
听说时间很贵青春更无价
可该省就得省该花还得花
兜里没钱那咱就再咬咬牙
沿着国道318去趟拉萨
骑着二八我勇闯天涯
喝完青岛我吹瓶雪花
风浪越大我越要潇洒
心比天高我啥也不怕
骑着二八我勇闯天涯
什么烦恼我全都抛下
人生太短人间太复杂
尽情的绽放我的年华
● ● ● ● ● ●
听说时间很贵青春更无价
可该省就得省该花还得花
兜里没钱那咱就再咬咬牙
沿着国道318去趟拉萨
骑着二八我勇闯天涯
喝完青岛我吹瓶雪花
风浪越大我越要潇洒
心比天高我啥也不怕
骑着二八我勇闯天涯
什么烦恼我全都抛下
人生太短人间太复杂
尽情的绽放我的年华
骑着二八我勇闯天涯
喝完青岛我吹瓶雪花
风浪越大我越要潇洒
心比天高我啥也不怕
骑着二八我勇闯天涯
什么烦恼我全都抛下
人生太短人间太复杂
尽情的绽放我的年华
- 谢谢欣赏 -

`;

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');

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>


liumang 发表于 2025-1-31 15:11

是亦是金老师直接骑车吗{:6_181:}

liumang 发表于 2025-1-31 15:12

一直很佩服骑车游四方的人{:5_150:}{:5_150:}

liumang 发表于 2025-1-31 15:13

亦是金老师新年快乐！{:5_128:}

亦是金 发表于 2025-2-9 12:45

liumang 发表于 2025-1-31 15:11
是亦是金老师直接骑车吗

心有余力不足啦！:$

亦是金 发表于 2025-2-9 12:47

liumang 发表于 2025-1-31 15:12
一直很佩服骑车游四方的人

我也是！

亦是金 发表于 2025-2-9 12:48

liumang 发表于 2025-1-31 15:13
亦是金老师新年快乐！

新年快乐！{:5_147:}

liumang 发表于 2025-2-9 22:41

亦是金 发表于 2025-2-9 12:45
心有余力不足啦！

音乐好听的{:6_181:}

liumang 发表于 2025-2-9 22:42

亦是金 发表于 2025-2-9 12:48
新年快乐！

新年快乐！{:5_121:}
页: [1]
查看完整版本: 《 骑着二八闯天涯 》 - 侯云