加林森 发表于 2022-5-27 12:09

《咖啡(Live)》- 欧汉声


<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>咖啡(Live)- 欧汉声</p>
        <div class="bray"></div>
        <img src="https://pic.imgdb.cn/item/62904c9309475431295b4fe8.gif" 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/2022/05/27/73540518d1b1e310508be044fadeb8eb.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-5-27 12:10

来杯咖啡
{:4_190:}

加林森 发表于 2022-5-27 12:13

马黑黑 发表于 2022-5-27 12:10
来杯咖啡

我把过去做过的都全部复习一次。

东篱闲人 发表于 2022-5-27 12:41

像显微镜下的细菌。。。{:5_115:}

马黑黑 发表于 2022-5-27 12:41

加林森 发表于 2022-5-27 12:13
我把过去做过的都全部复习一次。

辛苦

加林森 发表于 2022-5-27 13:00

东篱闲人 发表于 2022-5-27 12:41
像显微镜下的细菌。。。

就你想法多。。。。{:4_189:}

加林森 发表于 2022-5-27 13:01

马黑黑 发表于 2022-5-27 12:41
辛苦

不辛苦的。复习对我有好外的。

马黑黑 发表于 2022-5-27 13:02

加林森 发表于 2022-5-27 13:01
不辛苦的。复习对我有好外的。

{:5_108:}

加林森 发表于 2022-5-27 13:04

马黑黑 发表于 2022-5-27 13:02


好哥们！{:5_108:}

东篱闲人 发表于 2022-5-27 13:05

加林森 发表于 2022-5-27 13:00
就你想法多。。。。

像不像？{:5_117:}

加林森 发表于 2022-5-27 13:11

东篱闲人 发表于 2022-5-27 13:05
像不像？

像么子。。。。

东篱闲人 发表于 2022-5-27 13:12

加林森 发表于 2022-5-27 13:11
像么子。。。。

细菌。

加林森 发表于 2022-5-27 13:14

东篱闲人 发表于 2022-5-27 13:12
细菌。

想多了吧。。。。{:5_117:}

梦油 发表于 2022-5-27 13:25

我很喜欢你设计的这个播放器

加林森 发表于 2022-5-27 13:28

梦油 发表于 2022-5-27 13:25
我很喜欢你设计的这个播放器

谢谢老梦的支持啊！{:4_190:}

梦油 发表于 2022-5-27 13:32

加林森 发表于 2022-5-27 13:28
谢谢老梦的支持啊！

别客气。

加林森 发表于 2022-5-27 13:34

梦油 发表于 2022-5-27 13:32
别客气。

嗯嗯

红影 发表于 2022-5-27 16:36

队长真棒，把以前的效果都复习了一下呢{:4_187:}

红影 发表于 2022-5-27 16:37

右边那个图图长宽比有问题，队长可以弄个纵向的图图，或者按比例缩放，不能这样直接把宽度缩掉的。

加林森 发表于 2022-5-27 16:38

红影 发表于 2022-5-27 16:36
队长真棒，把以前的效果都复习了一下呢

就是。怕忘记了。
页: [1] 2
查看完整版本: 《咖啡(Live)》- 欧汉声