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

《花泥》 - 好妹妹 （根据老黑控制径向渐变制作）

本帖最后由 加林森 于 2022-4-20 18:21 编辑 <br /><br /><style>
.bgDiv {
        margin: auto; width: 400px; height: 300px;
        background-color: #050505;
        background-size: 200px 150px;
                radial-gradient( white, rgba(255, 255, 255, 0.2) 2px, transparent 40px),
                radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 30px),
                radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 40px),
                radial-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 2px, transparent 30px);
       background-color: olive;
         background-image: radial-gradient(yellow, red 10px, blue 20px, transparent);
        position: relative; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
        animation: dark 10s linear infinite alternate;
}
.bgDiv img { position: absolute; width: 300px; height: 275px; right: 20px; bottom: 20px; opacity: .7; }
.ball {
        width: 80px; height: 80px; left: 100px; top: 100px;
        background: olive linear-gradient(135deg,rgba(0,250,0,.85),rgba(30,250,60,.95));
        position: relative; border-radius: 50%;
        filter: drop-shadow(2px 2px 6px rgba(0,0,0,.7));
        transform: skew(2deg); cursor: pointer;
}
.ball::before, .ball::after { content: ''; position: absolute; }
.ball::before {
        left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%;
        background: radial-gradient(circle at 35% 40%,rgba(255,255,255,.75),rgba(0,0,0,.15));
}
.ball::after {
        left: -30px; top: -30px; right: -30px; bottom: -30px;border: 10px solid #ccc;
        background-size;
}
.ball div {
        position: absolute; border: 10px solid rgba(0,0,0,.45); border-radius: 50%;
        border-color: green lightgreen green darkgreen;opacity: .55;
}
.ball div:nth-child(1) { left: -10px; top: -10px; right: -10px; bottom: -10px; animation: rot 4s linear infinite;}
.ball div:nth-child(2) { left: -20px; top: -20px; right: -20px; bottom: -20px;animation: rot 12s linear infinite; }
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes dark { to { opacity: 0.8; } }
</style>

<div class="bgDiv">
        <div class="ball">
                <div></div>
                <div></div>
        </div>
        <img src="https://pic.imgdb.cn/item/625fd7a4239250f7c5f3a955.png" alt="" />
</div>

<script>
let flag = true;
let ball = document.querySelector(".ball");
let au = document.createElement("audio");
au.src = "https://music.163.com/song/media/outer/url?id=1939383592.mp3";
au.autoplay = flag;
au.loop= true;
au.style.display = "none"
ball.appendChild(au);
ball.onclick = function(){
        if(flag) {
                Array.from(this.children).forEach(function(item){item.style.animationPlayState = "paused"; });
                au.pause();
                flag = false;
        } else {
                Array.from(this.children).forEach(function(item){item.style.animationPlayState = "running"; });
                au.play();
                flag = true;
        }
}
</script>

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

@马黑黑

马黑黑 发表于 2022-4-20 18:22

画了个小太阳在窗外，不错的说

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

马黑黑 发表于 2022-4-20 18:22
画了个小太阳在窗外，不错的说

嗯嗯，我在试一试的，这个算不算成功了？

马黑黑 发表于 2022-4-20 18:24

加林森 发表于 2022-4-20 18:23
嗯嗯，我在试一试的，这个算不算成功了？

当然算了

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

马黑黑 发表于 2022-4-20 18:24
当然算了

嗯嗯，谢谢你。{:4_191:}

小九 发表于 2022-4-20 18:37

好听{:4_187:}

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

小九 发表于 2022-4-20 18:37
好听

小九来啦。{:4_190:}

马黑黑 发表于 2022-4-20 18:59

加林森 发表于 2022-4-20 18:25
嗯嗯，谢谢你。

嗯，歌不错的

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

马黑黑 发表于 2022-4-20 18:59
嗯，歌不错的

是的，是好妹妹组合。

千羽 发表于 2022-4-20 19:16

这作业完成的漂亮，给满分{:4_187:}

千羽 发表于 2022-4-20 19:17

歌儿也好听{:4_181:}

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

千羽 发表于 2022-4-20 19:16
这作业完成的漂亮，给满分

千羽晚上好。又学了一招的。{:4_189:}

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

千羽 发表于 2022-4-20 19:17
歌儿也好听

是的，好妹妹组合演唱的。

千羽 发表于 2022-4-20 19:20

加林森 发表于 2022-4-20 19:18
千羽晚上好。又学了一招的。

嗯，你都学了好多招了{:4_173:}

千羽 发表于 2022-4-20 19:20

加林森 发表于 2022-4-20 19:20
是的，好妹妹组合演唱的。

嗯，好听{:4_204:}

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

千羽 发表于 2022-4-20 19:20
嗯，你都学了好多招了

学习得再多也当不了制作的一帖啊。{:4_189:}

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

千羽 发表于 2022-4-20 19:20
嗯，好听

是的，我听见就感觉这个声音演唱得不一样的，就制作了一个出来。

千羽 发表于 2022-4-20 19:27

加林森 发表于 2022-4-20 19:22
是的，我听见就感觉这个声音演唱得不一样的，就制作了一个出来。

队长现在的技艺是炉火纯青了，祝贺下{:4_199:}{:4_187:}

千羽 发表于 2022-4-20 19:27

加林森 发表于 2022-4-20 19:21
学习得再多也当不了制作的一帖啊。

{:4_203:}
页: [1] 2
查看完整版本: 《花泥》 - 好妹妹 （根据老黑控制径向渐变制作）