红影 发表于 2024-2-20 22:07

《追梦赤子心》TO小辣椒（学习黑黑《一切如常》光束效果）

<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/65d3638b9f345e8d0396ac1d.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; display: grid; place-items: center; z-index: 1; }
#papa::before { position: absolute; content: ''; inset: 0; transform-origin: 860px -10px; background: var(--bg); transform: scale(1) rotate(0); filter: brightness(.8); animation: flash 10s linear infinite alternate var(--state); }
@keyframes flash { to { transform: scale(2.5) rotate(10deg); filter: brightness(10); } }
#lrc { position: absolute; top: 20px; left: 40px; font: bold 2.0em sans-serif; color: LavenderBlush; 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-radial-gradient(LavenderBlush, DarkOrange, Moccasin 20px); background-clip: text; -webkit-background-clip: text; clip-path: inset(0 100% 0 0); animation: var(--ani) var(--duration) linear forwards var(--state); border-bottom: 3px dashed Moccasin; }
#btnplay { position: absolute; bottom: 30px; right: 100px; 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: 90px; border-radius: 40px 40px 50px 50px; background: linear-gradient(RoyalBlue, orange, green); transform-origin: 50% 110%; transform: rotate(var(--deg)); }
#plane {position: absolute;left: 280px; top: 400px;width: 102px;offset-distance: 0;offset-path: path("m46.5,90c0,0 43,-10 42.5,-10c0.5,0 0.5,-21 0,-21c0.5,0 40.5,-7 40,-7c0.5,0 5.5,-24 5,-24c0.5,0 24.5,-6 24,-6c0.5,0 0.5,-19 0,-19c0.5,0 29.5,-6 29,-6c0.5,0 -0.5,-14 -1,-14c0.5,0 28.5,-7 28,-7c0.5,0 -2.5,-17 -3,-17c0.5,0 20.5,-2 20,-2c0.5,0 3.5,-19 3,-19c0.5,0 20.5,-1 20,-1c0.5,0 0.5,-19 0,-19c0.5,0 22.5,-1 22,-1c0.5,0 -1.5,-19 -2,-19c0.5,0 18.5,-2 18,-2c0.5,0 -0.5,-16 -1,-16c0.5,0 19.5,-2 19,-2c0.5,0 0.5,-14 0,-14c0.5,0 16.5,-1 16,-1c0.5,0 -2.5,-16 -3,-16c0.5,0 16.5,-1 16,-1c0.5,0 -0.5,-10 -1,-10c0.5,0 12.5,-1 12,-1c0.5,0 -1.5,-11 -2,-11c0.5,0 13.5,-2 13,-2c0.5,0 -1.5,-11 -2,-11c0.5,0 14.5,0 14,0c0.5,0 -4.5,-9 -5,-9c0.5,0 14.5,-1 14,-1c0.5,0 -1.5,-12 -2,-12c0.5,0 12.5,-1 12,-1c0.5,0 -0.5,-8 -1,-8c0.5,0 16.5,0 16,0c0.5,0 192.5,-189 192,-189"); offset-rotate:0deg;animation: move 38s linear infinite var(--state);}
@keyframes move { to { offset-distance: 100%; transform: scale(.15); } }
@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="papa">
        <audio src="https://music.163.com/song/media/outer/url?id=1403040019" autoplay loop></audio>
        <div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
        <div id="btnplay"></div>
<img id="plane" src="https://pic.imgdb.cn/item/65d368309f345e8d03aa0161.png" alt="" />
</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 = 7}).forEach((item,key) => {
        item = document.createElement('ye-zi');
        item.style.cssText += `--ww: 50px; --deg: ${360 / all * key}deg;`;
        btnplay.prepend(item);
});
(function() {
        var bgstrAr = ['conic-gradient(at 810px 80px'];
        Array.from({length: all=18}).forEach((item,key) => {
                bgstrAr.push([`transparent ${key*360/all}deg,rgba(254,234,10,.1) ${key*360/all + 5}deg,transparent ${key*360/all + 10}deg`]);
        });
        papa.style.setProperty('--bg', bgstrAr.join(','));
})();
</script>

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

@小辣椒感谢亲爱的送我好礼，一直没时间，现在跟着做个黑黑光束效果，边学习边当做做回礼了{:4_187:}

红影 发表于 2024-2-20 22:10

发现让那个定位不同也挺有趣，可以让光束沿着阶梯移动了，一下子把攀登的阶梯变成了星光大道@马黑黑{:4_172:}

红影 发表于 2024-2-20 22:12

学习光束效果，兼把黑黑的叶瓣效果变成了花瓣的样式，上次就说准备弄到帖子里的{:4_173:}
本来还想加个视频的，想想还是这样就好，清清爽爽的，最主要怕影响光束的展示。

庶民 发表于 2024-2-21 08:48

这个很有创意。

梦油 发表于 2024-2-21 10:49

你这个设计倒是很有新意。

马黑黑 发表于 2024-2-21 12:14

红影 发表于 2024-2-20 22:10
发现让那个定位不同也挺有趣，可以让光束沿着阶梯移动了，一下子把攀登的阶梯变成了星光大道@马黑黑{:4_1 ...

不错不错

马黑黑 发表于 2024-2-21 12:15

小播也是设计的很精致

红影 发表于 2024-2-21 17:01

庶民 发表于 2024-2-21 08:48
这个很有创意。

谢谢庶民，画面挺简单，主要学习一下代码呢{:4_173:}

红影 发表于 2024-2-21 17:03

梦油 发表于 2024-2-21 10:49
你这个设计倒是很有新意。

谢谢梦油，每个人都要努力攀登才好{:4_173:}

红影 发表于 2024-2-21 17:04

马黑黑 发表于 2024-2-21 12:14
不错不错

其实貌似光束可以不用上下移动，一直从下往上倒是也可以的。
这个定位点还可以移动，也挺有趣的{:4_173:}

红影 发表于 2024-2-21 17:04

马黑黑 发表于 2024-2-21 12:15
小播也是设计的很精致

还是你原来的配色，只是把最外面的红换做了蓝。谢谢黑黑的代码{:4_187:}

梦油 发表于 2024-2-21 17:45

红影 发表于 2024-2-21 17:03
谢谢梦油，每个人都要努力攀登才好

对，每个人都要有进取心。

樵歌 发表于 2024-2-21 18:07

很有创意，专门为小辣椒架了一首闪光的天梯。还特别细心的准备了氧气筒。{:4_173:}

樵歌 发表于 2024-2-21 18:08

等小辣椒先上去后，俺们也结伴同行上天切{:4_189:}

红影 发表于 2024-2-21 19:25

梦油 发表于 2024-2-21 17:45
对，每个人都要有进取心。

拼搏着更快乐{:4_173:}

红影 发表于 2024-2-21 19:25

樵歌 发表于 2024-2-21 18:07
很有创意，专门为小辣椒架了一首闪光的天梯。还特别细心的准备了氧气筒。

那是登山包，咋成了氧气瓶了{:4_182:}

红影 发表于 2024-2-21 19:26

樵歌 发表于 2024-2-21 18:08
等小辣椒先上去后，俺们也结伴同行上天切

天庭一下子来了这么多客人，王母娘娘的蟠桃都不够用了{:4_173:}

樵歌 发表于 2024-2-21 21:07

红影 发表于 2024-2-21 19:25
那是登山包，咋成了氧气瓶了

登山包里就有氧气呀{:4_189:}

樵歌 发表于 2024-2-21 21:09

红影 发表于 2024-2-21 19:26
天庭一下子来了这么多客人，王母娘娘的蟠桃都不够用了

人家天庭也与时俱进用上化肥了，产量翻番了{:4_189:}
页: [1] 2 3 4 5 6
查看完整版本: 《追梦赤子心》TO小辣椒（学习黑黑《一切如常》光束效果）