论坛 › 音乐沙龙 › 《 骑着二八闯天涯 》 - 侯云

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

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

本帖最后由 亦是金 于 2025-12-7 20:08 编辑 <br /><br /><style>
#papa {
        margin: 10px -310px ;
        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/3ac64961a736d9ed062389cbbbdb8dfc.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>

红影 发表于 2025-1-30 20:12

这个厉害，骑行那么远，这个也很需要点决心呢{:4_187:}

红影 发表于 2025-1-30 20:17

这个太猛了，有意思。欣赏亦是金老师好帖{:4_187:}

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

红影 发表于 2025-1-30 20:12
这个厉害，骑行那么远，这个也很需要点决心呢

新年好！{:4_187:}

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

红影 发表于 2025-1-30 20:17
这个太猛了，有意思。欣赏亦是金老师好帖

谢谢欣赏！{:4_187:}

小辣椒 发表于 2025-1-30 21:13

哈哈，新年去骑车啊，也是一种过节的方式{:4_199:}

小辣椒 发表于 2025-1-30 21:15

欣赏前辈的精彩制作，这个骑游我曾经做过一个帖，我们论坛就有的人喜欢骑行，一年四季总要出去几次的

小辣椒 发表于 2025-1-30 21:16

今天初二，祝前辈新年快乐！蛇年大吉！

红影 发表于 2025-1-30 22:07

亦是金 发表于 2025-1-30 20:31
新年好！

问好亦是金老师，给您拜年了{:4_187:}

红影 发表于 2025-1-30 22:11

亦是金 发表于 2025-1-30 20:32
谢谢欣赏！

感觉骑行那么远真的很厉害{:4_173:}

亦是金 发表于 2025-1-30 22:28

小辣椒 发表于 2025-1-30 21:13
哈哈，新年去骑车啊，也是一种过节的方式

哈哈哈，骑行过节我只能想想而已！已经力不从心了！{:4_198:}

亦是金 发表于 2025-1-30 22:29

小辣椒 发表于 2025-1-30 21:15
欣赏前辈的精彩制作，这个骑游我曾经做过一个帖，我们论坛就有的人喜欢骑行，一年四季总要出去几次的

新年快乐！谢谢欣赏！{:4_187:}

亦是金 发表于 2025-1-30 22:31

小辣椒 发表于 2025-1-30 21:16
今天初二，祝前辈新年快乐！蛇年大吉！

祝新年快乐！蛇年大吉！{:4_187:}

亦是金 发表于 2025-1-30 22:34

红影 发表于 2025-1-30 22:11
感觉骑行那么远真的很厉害

是的，318上骑行去西藏，新疆的牛人很多的！{:4_189:}

亦是金 发表于 2025-1-30 22:38

红影 发表于 2025-1-30 22:07
问好亦是金老师，给您拜年了

红影一年来管理论坛辛苦了，给你拜年了！{:4_187:}

红影 发表于 2025-1-31 12:54

亦是金 发表于 2025-1-30 22:34
是的，318上骑行去西藏，新疆的牛人很多的！

简直无法想象，一路上会有很多事需要处理的啊，比如怎么吃和睡，骑不动了咋办。

红影 发表于 2025-1-31 12:55

亦是金 发表于 2025-1-30 22:38
红影一年来管理论坛辛苦了，给你拜年了！

太谢谢了，也没什么，我自己也是在玩啊{:4_173:}

冬天的雨 发表于 2025-2-6 21:05

问好亦是金老师，欣赏漂亮的制作{:4_187:}

冬天的雨 发表于 2025-2-6 21:05

歌曲第一次听，不错{:4_199:}

查看完整版本: 《 骑着二八闯天涯 》 - 侯云