论坛 › 欢乐水吧 › 我的楼兰

亚伦影音工作室 发表于 2024-10-8 21:57

我的楼兰

本帖最后由 亚伦影音工作室 于 2024-10-10 09:43 编辑 <br /><br /><style>
#papa{
        position: relative;
        width: 1164px;
        height: 640px;
      margin-left:-300px;
        margin-top:180px;
        border: 0px solid rgba(36, 201, 219,.95);
      border-radius: 0px;
        background:#000;
        overflow: hidden;
}
#pa{z-index: 1;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;background:url(https://pic.imgdb.cn/item/670538b3d29ded1a8cb9488b.jpg)no-repeat center/cover;
filter: url(#water)
}
#play { left:60px;
        top:550px;z-index: 10;
--line: #ccc;
--line-width: 6px;
--duration: .5s;
position: absolute;
cursor: pointer;
}

#play input {cursor: pointer;
display: none;
}

#play input + svg {
display: block;
fill: none;
stroke: var(--line);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: var(--line-width);
width: 90px;
height: 76px;
}

#play input + svg path {
animation: var(--name) var(--duration) ease forwards
}
#play input + svg path:nth-child(2) {
stroke-dashoffset: 1px;
}
#play input + svg path:nth-child(3) {
stroke-dashoffset: 1px;
}
#play input:checked + svg path:nth-child(1) {
--name: shape;
}
#play input:checked + svg path:nth-child(2) {
--name: small;
}
#play input:checked + svg path:nth-child(3) {
--name: large;
}


#play input:not(:checked) + svg path:nth-child(1) {
--name: shape-r;
}
#play input:not(:checked) + svg path:nth-child(2) {
--name: small-r;
}
#play input:not(:checked) + svg path:nth-child(3) {
--name: large-r;
}

@keyframes small {
0%,30% {
    stroke-dasharray: 0 0 30px 64px;
}
40% {
    stroke-dashoffset: 16px;
}
80%,
    100% {
    stroke-dashoffset: 1px;
}
70% {
    stroke-dasharray: 0 43px 30px 64px;
}
100% {
    stroke-dasharray: 0 39px 30px 64px;
}
}

@keyframes small-r {
0% {
    stroke-dasharray: 0 39px 30px 64px;
}
0%,
    40% {
    stroke-dashoffset: 1px;
}
70% {
    stroke-dashoffset: 16px;
}
70%,
    100% {
    stroke-dasharray: 0 0 30px 64px;
}
}

@keyframes large {
0%,30% {
    stroke-dasharray: 0 0 50px 84px;
}
40% {
    stroke-dashoffset: 16px;
}
80%,
    100% {
    stroke-dashoffset: 1px;
}
70% {
    stroke-dasharray: 0 82px 32px 84px;
}
100% {
    stroke-dasharray: 0 78px 32px 84px;
}
}

@keyframes large-r {
0% {
    stroke-dasharray: 0 78px 32px 84px;
}
0%,
    40% {
    stroke-dashoffset: 1px;
}
70% {
    stroke-dashoffset: 16px;
}
70%,
    100% {
    stroke-dasharray: 0 0 50px 84px;
}
}

@keyframes shape {
0% {
    stroke-dasharray: 60px 0 184px;
    stroke-dashoffset: 0;
}
70% {
    stroke-dasharray: 63px 51px 184px;
    stroke-dashoffset: 21px;
}
100% {
    stroke-dasharray: 59px 47px 184px;
    stroke-dashoffset: 17px;
}
}

@keyframes shape-r {
0% {
    stroke-dasharray: 59px 47px 184px;
    stroke-dashoffset: 17px;
}
100% {
    stroke-dasharray: 60px 0 184px;
    stroke-dashoffset: 0;
}
}

#tp{width: 80%;z-index: 2;
height: 80%;
position: absolute;
top: 20px;-webkit-mask-image: radial-gradient(black 25% ,transparent 70%);
left: 20px;background:url(https://pic.imgdb.cn/item/6705ec56d29ded1a8c3f03a5.webp)no-repeat center/cover;}
#tz { top:40px;left:1000px;width: 100px; height: 600px; z-index: 22; overflow: hidden; position: absolute; }
      #tz::before { content: attr(data-lrc); position: absolute; left: 20px; top: 0px; width: 80px; height: 100%; writing-mode: vertical-rl; font: normal 35px/90px 微软雅黑; color: transparent; background: repeating-linear-gradient(to bottom, gold, lightgreen, snow, lightgreen, orange) 50%/80px 200px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
</style>
<div id="papa" >
<div id="pa" >
<svg width="0" height="0"id="p" >
<filter id="water">
    <feTurbulence type="fractalNoise" baseFrequency=".05 .05" numOctaves="1" result="noise1"></feTurbulence>
    <feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2">
      <animate attributeName="values" from="0" to="360" dur="1s" repeatCount="indefinite"/>
    </feColorMatrix>
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="8" in="SourceGraphic" in2="noise2" />
</filter>
</svg>
</div>

<label id="play">
    <input type="checkbox" id='ctrl'>
    <svg viewBox="0 0 108 96">
      <path d="M7,28 L35,28 L35,28 L59,8 L59,88 L35,68 L7,68 C4.790861,68 3,66.209139 3,64 L3,32 C3,29.790861 4.790861,28 7,28 Z"></path>
      <path d="M79,62 C83,57.3333333 85,52.6666667 85,48 C85,43.3333333 83,38.6666667 79,34 L49,3"></path>
      <path d="M95,69 C101.666667,61.6666667 105,54.3333333 105,47 C105,39.6666667 101.666667,32.3333333 95,25 L75.5,6 L49,33"></path>
    </svg>
</label>
<div id="tz" data-lrc="我的楼兰 - 云朵"></div>
<div id="tp" ></div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/f5/e6/ba/cbbfcf2ee3103229210fa84b43f518a1/audio.mp3" autoplay="" loop="loop"></audio>
</div>
<script>
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());


play.onclick = () => aud.paused && !ctrl.checked?(aud.play(),p.unpauseAnimations()) :(aud.pause(), p.pauseAnimations());
</script>
<script>
var curkey = 0, lrcAr = [];
var getAr = (text) => {
    var ar = text.trim().split('\n');
    ar.sort();
    var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    ar.forEach(item => {
      let result = item.match(reg);
      let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
      lrcAr.push(.trim()]);
    });
};
var mState = () => {
    tz.style.setProperty('--state', ['running','paused'][+aud.paused]);

    //其它控制代码
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
    if(curkey > lrcAr.length - 1) return;
    if(aud.currentTime >= lrcAr) {
      tz.dataset.lrc = lrcAr;
      curkey ++;
    }
};

var lrc = `我的楼兰 - 云朵
词：苏柳

曲：刀郎

想问沙漠借那一根曲线

缝件披风为你御寒

用肺腑去触摸你的灵魂
我就在那只火炉边取暖

想问姻缘借那一根红线

深埋生命血脉相连

用丝绸去润泽你的肌肤
我就在那个怀抱里缠绵

你总是随手把银簪插在太阳上面
万道光芒蓬松着你长发的波澜
我闻着芬芳跋涉着无限远
只为看清你的容颜

你总不小心把倩影靠在月亮上面
万顷月光舞动着你优美的梦幻
我闻着芬芳跋涉着无限远
只为看清你的容颜

谁与美人共浴沙河互为一天地
谁与美人共枕夕阳长醉两千年
从未说出我是你的尘埃
但你却是我的楼兰

想问姻缘借那一根红线

深埋生命血脉相连

用丝绸去润泽你的肌肤
我就在那个怀抱里缠绵

你总是随手把银簪插在太阳上面

万道光芒蓬松着你长发的波澜
我闻着芬芳跋涉着无限远
只为看清你的容颜

你总不小心把倩影靠在月亮上面
万顷月光舞动着你优美的梦幻
我闻着芬芳跋涉着无限远
只为看清你的容颜

谁与美人共浴沙河互为一天地
谁与美人共枕夕阳长醉两千年
从未说出我是你的尘埃
但你却是我的楼兰

`;
getAr(lrc);
</script>

醉美水芙蓉 发表于 2024-10-8 22:05

亚伦影音工作室 发表于 2024-10-8 22:24

醉美水芙蓉 发表于 2024-10-8 22:05
亚伦老师小喇叭可以改颜色吗？

当然可以了！

红影 发表于 2024-10-8 22:53

漂亮的水波纹效果，沙漠上的小花好像动起来一样。
还有奇特的小播。欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-10-8 22:54

歌曲前面有说话声呢，最好能去掉{:4_187:}

梦油 发表于 2024-10-9 09:06

欣赏佳作，问候亚伦。

起个网名好难 发表于 2024-10-9 09:14

#play { left:50px;
        top:50px;

喇叭放到左上角似乎好些

小辣椒 发表于 2024-10-9 11:41

亚伦这个播放器漂亮，特别发现这个没有加视频背景{:4_199:}

小辣椒可以玩的

小辣椒 发表于 2024-10-9 11:41

感谢亚伦的精彩制作{:4_187:}

查看完整版本: 我的楼兰