论坛 › 音乐沙龙 › 心灵音乐 - 舞者

马黑黑 发表于 2024-2-18 18:15

心灵音乐 - 舞者

<style>
#mydiv {
        margin: 0 0 0 calc(50% - 593px);
        position: relative;
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t24/1/18u.jpg') no-repeat center/cover;
        box-shadow: 3px 3px 8px gray;
        overflow: hidden;
}
#mydiv::before {
        position: absolute;
        content: '';
        inset: 0;
        background: repeating-linear-gradient(transparent, green 2px) repeat;
        opacity: .45;
        animation: up 10s ease-in-out infinite alternate var(--state);
}
#lrc {
        position: absolute;
        left: 20px;
        top: 10px;
        font: bold 2.4em sans-serif;
        color: gray;
        text-shadow: 1px 1px 1px rgba(0,0,0,.45);
        --ani: lrcGo1;
        --duration: 1s;
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 100%;
        height: 100%;
        color: transparent;
        background: repeating-linear-gradient(60deg, transparent, orange 20px);
        background-clip: text;
        -webkit-background-clip: text;
        clip-path: inset(0 100% 0 0);
        animation: var(--ani) var(--duration) linear forwards var(--state);
}
#btnplay {
        position: absolute;
        right: 20px;
        bottom: 10px;
        width: 200px;
        height: 200px;
        animation: rotating 6s linear infinite var(--state);
        cursor: pointer;
}
ye-zi {
        position: absolute;
        left: calc(50% - 0.5 * var(--ww));
        top: 0;
        width: var(--ww);
        height: 100px;
        border-radius: 0% 100%;
        background: linear-gradient(snow, orange, green);
        transform-origin: 50% 100%;
        transform: rotate(var(--deg));
}
@keyframes up {
        0% { inset: 0; }
        25% { inset: 50% 0 50% 0; }
        50% { inset: 0; }
        75% { inset: 0 50% 0 50%; }
        100% { inset: 0; }
}
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
</style>

<div id="mydiv">
        <audio src="https://music.163.com/song/media/outer/url?id=1401905670" autoplay loop></audio>
        <div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
        <div id="btnplay"></div>
</div>

<script>
var geci = [ , ];
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc.js';
document.querySelector('body').appendChild(sF);

Array.from({length: all = 5}).forEach((item,key) => {
        item = document.createElement('ye-zi');
        item.style.cssText += `--ww: 30px; --deg: ${360 / all * key}deg;`;
        btnplay.prepend(item);
});
</script>

马黑黑 发表于 2024-2-18 18:17

<h2>代码</h2>

<div class="mum"><pre>
&lt;style&gt;
#mydiv {
        margin: 0 0 0 calc(50% - 593px);
        position: relative;
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t24/1/18u.jpg') no-repeat center/cover;
        box-shadow: 3px 3px 8px gray;
        overflow: hidden;
}
#mydiv::before {
        position: absolute;
        content: '';
        inset: 0;
        background: repeating-linear-gradient(transparent, green 2px) repeat;
        opacity: .45;
        animation: up 10s ease-in-out infinite alternate var(--state);
}
#lrc {
        position: absolute;
        left: 20px;
        top: 10px;
        font: bold 2.4em sans-serif;
        color: gray;
        text-shadow: 1px 1px 1px rgba(0,0,0,.45);
        --ani: lrcGo1;
        --duration: 1s;
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 100%;
        height: 100%;
        color: transparent;
        background: repeating-linear-gradient(60deg, transparent, orange 20px);
        background-clip: text;
        -webkit-background-clip: text;
        clip-path: inset(0 100% 0 0);
        animation: var(--ani) var(--duration) linear forwards var(--state);
}
#btnplay {
        position: absolute;
        right: 20px;
        bottom: 10px;
        width: 200px;
        height: 200px;
        animation: rotating 6s linear infinite var(--state);
        cursor: pointer;
}
ye-zi {
        position: absolute;
        left: calc(50% - 0.5 * var(--ww));
        top: 0;
        width: var(--ww);
        height: 100px;
        border-radius: 0% 100%;
        background: linear-gradient(snow, orange, green);
        transform-origin: 50% 100%;
        transform: rotate(var(--deg));
}
@keyframes up {
        0% { inset: 0; }
        25% { inset: 50% 0 50% 0; }
        50% { inset: 0; }
        75% { inset: 0 50% 0 50%; }
        100% { inset: 0; }
}
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
&lt;/style&gt;

&lt;div id="mydiv"&gt;
        &lt;audio src="https://music.163.com/song/media/outer/url?id=1401905670" autoplay loop&gt;&lt;/audio&gt;
        &lt;div id="lrc" data-lrc="HUACHAO LRC"&gt;HUACHAO LRC&lt;/div&gt;
        &lt;div id="btnplay"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
var geci = [ , ];
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc.js';
document.querySelector('body').appendChild(sF);

Array.from({length: all = 5}).forEach((item,key) =&gt; {
        item = document.createElement('ye-zi');
        item.style.cssText += `--ww: 30px; --deg: ${360 / all * key}deg;`;
        btnplay.prepend(item);
});
&lt;/script&gt;
</pre></div>

<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/colorcode.js';
document.querySelector('body').appendChild(sF);
</script>

红影 发表于 2024-2-18 20:09

还以为这些条纹是因为鼠标触碰出现的，原来它们是自己的横向和纵向的扩展和回收呢{:4_187:}

马黑黑 发表于 2024-2-18 20:19

红影 发表于 2024-2-18 20:09
还以为这些条纹是因为鼠标触碰出现的，原来它们是自己的横向和纵向的扩展和回收呢

{:4_181:}

红影 发表于 2024-2-18 20:25

inset:还能这样用啊，没想到。
0不用说了，四个方向都没有，inset: 50% 0 50% 0;就是上50%，右没有，下50%，左也没有。是这样吧{:4_173:}

红影 发表于 2024-2-18 20:27

为什么重复两遍呢，这个没看懂{:4_204:}

马黑黑 发表于 2024-2-18 20:30

红影 发表于 2024-2-18 20:27
为什么重复两遍呢，这个没看懂

animation 属性中 有 alternate 参数，往复

马黑黑 发表于 2024-2-18 20:41

红影 发表于 2024-2-18 20:25
inset:还能这样用啊，没想到。
0不用说了，四个方向都没有，inset: 50% 0 50% 0;就是上50%，右没有，下50% ...

按 上、右、下、左的顺序

小辣椒 发表于 2024-2-18 21:04

哇塞~~~黑黑你太强悍了居然代码做出swf的效果了{:4_178:}

南无月 发表于 2024-2-18 21:18

这就是PS里的抽丝效果。。代码PS重现。。{:4_173:}

马黑黑 发表于 2024-2-18 21:33

南无月 发表于 2024-2-18 21:18
这就是PS里的抽丝效果。。代码PS重现。。

{:4_196:}

马黑黑 发表于 2024-2-18 21:34

小辣椒 发表于 2024-2-18 21:04
哇塞~~~黑黑你太强悍了居然代码做出swf的效果了

SWF也是厉害的，就是他没能解决安全问题，被淘汰了

小辣椒 发表于 2024-2-18 21:40

马黑黑 发表于 2024-2-18 21:34
SWF也是厉害的，就是他没能解决安全问题，被淘汰了

swf有的效果非常的美，现在不能玩了，也是可惜的

马黑黑 发表于 2024-2-18 21:42

小辣椒 发表于 2024-2-18 21:40
swf有的效果非常的美，现在不能玩了，也是可惜的

乔老爷子在世的时候就警告过Adobe公司，要处理好安全问题，否则将会消亡。果然。

南无月 发表于 2024-2-18 21:43

马黑黑 发表于 2024-2-18 21:33


我就看着你慢慢用代码解锁PS里的许多功能。。。{:4_173:}没准最后对应出一本书来也说不定。。

马黑黑 发表于 2024-2-18 21:44

南无月 发表于 2024-2-18 21:43
我就看着你慢慢用代码解锁PS里的许多功能。。。没准最后对应出一本书来也说不定。。

不会写书呢，识字少

小辣椒 发表于 2024-2-18 21:44

马黑黑 发表于 2024-2-18 21:42
乔老爷子在世的时候就警告过Adobe公司，要处理好安全问题，否则将会消亡。果然。

现在许多人还在玩swf，就是舍不得swf展现出来美的效果吧

马黑黑 发表于 2024-2-18 21:44

小辣椒 发表于 2024-2-18 21:44
现在许多人还在玩swf，就是舍不得swf展现出来美的效果吧

那又何必？视频不一样可以做出更为流畅的效果来？

小辣椒 发表于 2024-2-18 21:46

马黑黑 发表于 2024-2-18 21:44
那又何必？视频不一样可以做出更为流畅的效果来？

完全不一样的呢，swf我源码收藏了许多的

马黑黑 发表于 2024-2-18 21:47

小辣椒 发表于 2024-2-18 21:46
完全不一样的呢，swf我源码收藏了许多的

不是这么说。视频做的绝对比swf细腻，只是很多人不去接触视频手工制作罢了

查看完整版本: 心灵音乐 - 舞者