加林森 发表于 2022-4-18 19:20

《孤勇者(抖音完整版)》-DJ


<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://pic.imgdb.cn/item/625d3ee1239250f7c53cb782.jpg" 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/04/17/7710b149bd62e63234eff53b3a25781b.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-18 19:21

@马黑黑   跟你学习的。你看看要得不？

马黑黑 发表于 2022-4-18 19:25

这是挺有意境

加林森 发表于 2022-4-18 19:26

马黑黑 发表于 2022-4-18 19:25
这是挺有意境

还过得去吧。

马黑黑 发表于 2022-4-18 19:27

加林森 发表于 2022-4-18 19:26
还过得去吧。

不错的不错的

加林森 发表于 2022-4-18 19:27

马黑黑 发表于 2022-4-18 19:27
不错的不错的

谢谢你。喝水{:4_191:}

马黑黑 发表于 2022-4-18 19:29

加林森 发表于 2022-4-18 19:27
谢谢你。喝水

这是酒{:4_170:}

加林森 发表于 2022-4-18 19:30

马黑黑 发表于 2022-4-18 19:29
这是酒

酒也是水做出的。{:4_189:}

红影 发表于 2022-4-18 20:29

对战公爷做了个，不错{:4_187:}

梦油 发表于 2022-4-18 20:32

本帖最后由 梦油 于 2022-4-18 20:34 编辑

外行看热闹，内行看门道。我真是凑个热闹，当然，也说不到点子上。我很喜欢这支曲子，图、曲相得益彰。

加林森 发表于 2022-4-18 20:59

红影 发表于 2022-4-18 20:29
对战公爷做了个，不错

是啊，跟着学习挺好的。

加林森 发表于 2022-4-18 20:59

梦油 发表于 2022-4-18 20:32
外行看热闹，内行看门道。我真是凑个热闹，当然，也说不到点子上。我很喜欢这支曲子，图、曲相得益彰。

梦油晚上好，你喜欢就好。谢谢你的支持！

加林森 发表于 2022-4-18 22:27

再来听听

梦油 发表于 2022-4-19 11:18

加林森 发表于 2022-4-18 20:59
梦油晚上好，你喜欢就好。谢谢你的支持！

我会做你的粉丝，常来欣赏你的作品。

加林森 发表于 2022-4-19 11:36

梦油 发表于 2022-4-19 11:18
我会做你的粉丝，常来欣赏你的作品。

谢谢梦油支持！{:4_190:}

梦油 发表于 2022-4-19 13:25

加林森 发表于 2022-4-19 11:36
谢谢梦油支持！

别客气，我也得到了你的大力支持啊。

加林森 发表于 2022-4-19 13:34

梦油 发表于 2022-4-19 13:25
别客气，我也得到了你的大力支持啊。

嗯嗯，我是应该的。

梦油 发表于 2022-4-19 14:28

加林森 发表于 2022-4-19 13:34
嗯嗯，我是应该的。

谢谢加林森朋友

红影 发表于 2022-4-19 17:08

加林森 发表于 2022-4-18 20:59
是啊，跟着学习挺好的。

这个效果真棒{:4_187:}

加林森 发表于 2022-4-19 17:35

梦油 发表于 2022-4-19 14:28
谢谢加林森朋友

不客气的。
页: [1] 2
查看完整版本: 《孤勇者(抖音完整版)》-DJ