论坛 › 欢乐水吧 › 归处

马黑黑 发表于 2022-4-17 22:41

归处

<style>
.bgLinear {
        position: relative;
        width: 1024px;
        min-height: 560px;
        left: -214px;
        background:
                radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
                radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
                radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
                radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
                radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
                radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
                linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
        background-size: 450px 450px, 570px 570px, 210px 210px, 310px 310px, 330px 330px, 430px 430px, 100% 100%;
}
.bgLinear img { position: absolute; width: 256px; height: 562px; right: 0; mix-blend-mode: soft-light; }
.bgLinear p { position: absolute; display: block; left: 20px; top: 20px; font: 900 3em / 1em Sans-serif; mix-blend-mode: color-burn;}
.bray {
        --len: 160px;
        right: 90px;
        top: calc(50% - 75px);
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--len);
        height: var(--len);
        position: absolute;
        border-radius: 50%;
        cursor: pointer;
        z-index: 100;
        animation: rot 4s linear infinite;
}

.bray div {
        position: absolute;
        width: calc(var(--len) / 5);
        height: calc(var(--len) / 5);
        border-radius: 50%;
}

.bray div::before {
        content: '';
        position: absolute;
        width: inherit;
        height: inherit;
        border-radius: 50%;
        background: radial-gradient(at 35% 40%, rgba(255,255,255,.5), rgba(0,0,255,.1));
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div class="bgLinear">
        <p>歸處</p>
        <div class="bray"></div>
        <img src="https://www.huachaowang.com/data/attachment/forum/202204/17/224103d1fzm7upiibrnpph.png" alt="" />
</div>

<script language="javascript">
let box = document.querySelector(".bray");
let width = box.clientWidth;
let total = 16;
let angle = 360 / total;
let str = "";

for(j=0; j<total; j++) {
        let transform = `rotate(${angle * j}deg) translateY(-${width / 2}px) rotate(${360 - angle*j}deg)`;
        let cc = `linear-gradient(120deg,#${Math.random().toString(16).substr(-6)},#${Math.random().toString(16).substr(-6)})`;
        str += `<div style="transform: ${transform}; background: ${cc};"></div>\n`;
}
box.innerHTML = str;

let flag = true;
let au = document.createElement('audio');
au.src = 'http://www.kumeiwp.com/sub/filestores/2021/02/23/3ff5f8a0204739bac85679fffb13effe.mp3';
au.autoplay = flag;
au.loop = true;
au.display = 'none';
box.appendChild(au);

box.onclick=function() {
        flag ? (box.style.animationPlayState = 'paused', au.pause(), flag = false) : (box.style.animationPlayState = 'running', au.play(), flag = true);
}
</script>

加林森 发表于 2022-4-17 22:57

好漂亮的制作，老黑真厉害。{:4_199:}

马黑黑 发表于 2022-4-17 22:58

加林森 发表于 2022-4-17 22:57
好漂亮的制作，老黑真厉害。

歌不错的

加林森 发表于 2022-4-17 22:59

马黑黑 发表于 2022-4-17 22:58
歌不错的

又客气了，，这个制作真漂亮。

马黑黑 发表于 2022-4-17 23:00

加林森 发表于 2022-4-17 22:59
又客气了，，这个制作真漂亮。

这是渐变背景

红影 发表于 2022-4-17 23:13

圆环正好在一个气泡上，真漂亮。这歌曲嗓音很特别，好听{:4_187:}

加林森 发表于 2022-4-17 23:16

马黑黑 发表于 2022-4-17 23:00
这是渐变背景

嗯嗯，我得学习了。

红影 发表于 2022-4-17 23:16

原来是周深的歌曲，又听错成女声了{:4_173:}

红影 发表于 2022-4-17 23:17

你是我全部视线的终点

山海间唯热爱无可遮掩

迎风踏雪沉星落月

向着背影如烟

何时能追寻回你身边

低入尘 碾作土

任谁说万劫不复

是痴迷注定的归宿

不问出路不求退路我心惟一归处

沿着你的方向昼夜奔赴

不惧失望不觉无望我愿终身守护

哪怕只是遥远地注目

（吟唱）

低入尘 碾作土

任谁说万劫不复

是痴迷注定的归宿

不问出路不求退路我心惟一归处

朝夕不负向你不渝奔赴

不惧失望不觉无望我愿终身守护

哪怕只是永恒地注目

（吟唱）

马黑黑 发表于 2022-4-17 23:34

红影 发表于 2022-4-17 23:13
圆环正好在一个气泡上，真漂亮。这歌曲嗓音很特别，好听

气泡是用 radial-gradient 发散渐变弄出来的，机器生成

马黑黑 发表于 2022-4-17 23:34

红影 发表于 2022-4-17 23:16
原来是周深的歌曲，又听错成女声了

这个不奇怪的{:4_170:}

马黑黑 发表于 2022-4-17 23:36

加林森 发表于 2022-4-17 23:16
嗯嗯，我得学习了。

圆形渐变，又叫发散渐变，是比较抽象的渐变之一，其难度和角向渐变有得一比

加林森 发表于 2022-4-17 23:39

马黑黑 发表于 2022-4-17 23:36
圆形渐变，又叫发散渐变，是比较抽象的渐变之一，其难度和角向渐变有得一比

嗯嗯，我慢慢学习，你放心！谢谢你啦！{:4_191:}

马黑黑 发表于 2022-4-17 23:40

加林森 发表于 2022-4-17 23:39
嗯嗯，我慢慢学习，你放心！谢谢你啦！

{:4_190:}

加林森 发表于 2022-4-17 23:42

马黑黑 发表于 2022-4-17 23:40


谢茶，明天见！我得去看看你的教程了，找灵感了。

马黑黑 发表于 2022-4-17 23:44

加林森 发表于 2022-4-17 23:42
谢茶，明天见！我得去看看你的教程了，找灵感了。

灵感应该是不找自来的

加林森 发表于 2022-4-17 23:46

马黑黑 发表于 2022-4-17 23:44
灵感应该是不找自来的

自己找吧，我有这个本事。

马黑黑 发表于 2022-4-18 07:36

加林森 发表于 2022-4-17 23:46
自己找吧，我有这个本事。

很不错的

樵歌 发表于 2022-4-18 07:53

黑马经天，无所不能，将来没有画画这一行了，只在机器上设计便好了{:4_178:}

马黑黑 发表于 2022-4-18 12:44

樵歌 发表于 2022-4-18 07:53
黑马经天，无所不能，将来没有画画这一行了，只在机器上设计便好了

人机各司其职

查看完整版本: 归处