小辣椒 发表于 2022-3-13 21:43

加林森 发表于 2022-3-13 21:41
我就是准备加进去，在找地方。

代码我发你了啊，你看看就知道了

加林森 发表于 2022-3-13 21:43

本帖最后由 加林森 于 2022-5-27 17:22 编辑 <br /><br />小辣椒 发表于 2022-3-13 21:43
代码我发你了啊，你看看就知道了
好的，我去看。

<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-3-13 23:13

小辣椒 发表于 2022-3-13 21:24
来了，谢谢队长
又有变化变化了。晕
页: 1 [2]
查看完整版本: 《四季予你》-- 程响 TO：小辣椒