马黑黑 发表于 2022-5-3 14:07

幻

<style>
.outer {
        left: -214px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1024px;
        height: 680px;
        background: linear-gradient(121.28deg, #fff 0%, rgba(0, 21, 74, 0) 100%), linear-gradient(219.46deg, #dafdff 27.63%, #a50000 100%), radial-gradient(100% 246.94% at 100% 100%, #fff 0%, #000353 100%), linear-gradient(337.69deg, #dc52ff 8.44%, #00bdbd 84.19%), linear-gradient(222.34deg, #cf0c00 12.99%, #00574d 87.21%), linear-gradient(150.76deg, #0015d5 15.35%, #000b6c 89.57%);
        background-blend-mode: overlay, overlay, overlay, difference, difference, normal;
        position: relative;
        perspective: 2000px;
}
.moon { position: absolute; width: 200px; height: 200px; box-shadow: 40px 40px 0 0 gold; border-radius: 50%; right: 100px; bottom: 100px; mix-blend-mode: darken; }
.petal {
        width: 300px;
        height: 300px;
        border-radius: 0 100%;
        mix-blend-mode: color;
        position: absolute;
        transform-style: preserve-3d;
        animation: rot 10s linear infinite alternate;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div class="outer">
        <div class="moon"></div>
</div>

<script>
let outer = document.querySelector('.outer');
let str = '';
for(j=0; j<60; j++){
        str += `<div class="petal" style="transform: rotate(${j*6}deg) translateX(140px) skew(20deg)"></div>`;
}
outer.innerHTML += str;
let au = document.createElement('iframe');
au.src = 'https://music.163.com/outchain/player?type=2&id=1409136605&auto=1&height=66';
au.style.display = 'none';
outer.appendChild(au);

let tt = setInterval(setColor, 1000);

function setColor(){
        let petal = document.querySelectorAll('.petal');
        for(j=0; j< petal.length; j++){
                petal.style.background = `linear-gradient(${getColor()},${getColor()})`;
        }
}

function getColor(){
        return `#${Math.random().toString(16).substr(-6)}`;
}
</script>

梦油 发表于 2022-5-3 14:52

黑黑朋友节日好！你的这一课内容太棒了，真有一种魔幻的感觉，这种素材的制作使用率一定很高。

红影 发表于 2022-5-3 15:48

好漂亮，色彩绚丽，跟凤凰展翅似的，太美了{:4_199:}

加林森 发表于 2022-5-3 17:53

老黑这个制作真美，一片叶子变成一大片正反翻转的花海了。叶子也在变色，这个就是渐变
的威力了吧。{:4_199:}

马黑黑 发表于 2022-5-3 19:13

加林森 发表于 2022-5-3 17:53
老黑这个制作真美，一片叶子变成一大片正反翻转的花海了。叶子也在变色，这个就是渐变
的威力了吧。{:4_19 ...

是的吧

加林森 发表于 2022-5-3 19:17

马黑黑 发表于 2022-5-3 19:13
是的吧

嗯嗯，真漂亮。

马黑黑 发表于 2022-5-3 19:17

加林森 发表于 2022-5-3 19:17
嗯嗯，真漂亮。

一般般了，还行的

加林森 发表于 2022-5-3 19:20

马黑黑 发表于 2022-5-3 19:17
一般般了，还行的

你的一般对我来说就变复杂了。

马黑黑 发表于 2022-5-3 19:21

加林森 发表于 2022-5-3 19:20
你的一般对我来说就变复杂了。

也未必，就是一些暂时你没掌握的东东而已

加林森 发表于 2022-5-3 19:24

马黑黑 发表于 2022-5-3 19:21
也未必，就是一些暂时你没掌握的东东而已

我慢慢学，不急的。

马黑黑 发表于 2022-5-3 19:27

加林森 发表于 2022-5-3 19:24
我慢慢学，不急的。

嗯嗯，有的是时间

加林森 发表于 2022-5-3 20:39

马黑黑 发表于 2022-5-3 19:27
嗯嗯，有的是时间

就是就是。

马黑黑 发表于 2022-5-3 20:40

加林森 发表于 2022-5-3 20:39
就是就是。

{:4_170:}

加林森 发表于 2022-5-3 20:43

马黑黑 发表于 2022-5-3 20:40


开心了哇{:4_189:}

马黑黑 发表于 2022-5-3 20:43

加林森 发表于 2022-5-3 20:43
开心了哇

开心事必须的

加林森 发表于 2022-5-3 20:45

马黑黑 发表于 2022-5-3 20:43
开心事必须的

那就好
页: [1]
查看完整版本: 幻