论坛 › 欢乐水吧 › 黑暗世界

马黑黑 发表于 2022-4-20 07:58

黑暗世界

<style>
.bgDiv {
        margin: auto; width: 760px; height: 500px;
        background-color: #050505;
        background-image:
                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-size: 580px 600px, 400px 400px, 300px 300px;
        background-position: 0 0, 40px 60px, 130px 270px;
        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;
        border-radius: 20%; transform: rotate(45deg); opacity: .45;
}
.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="/data/attachment/forum/202204/20/075457g7jzjwhdjoqj0qqf.png" alt="" />
</div>

<script>
let flag = true;
let ball = document.querySelector(".ball");
let au = document.createElement("audio");
au.src = "http://www.kumeiwp.com/sub/filestores/2022/03/21/34de9407c53ff8076b9f675995780ba4.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 09:29

老黑这个制作真漂亮，一图一播放器就搞定了。

红影 发表于 2022-4-20 10:28

闪烁的星星好美，这张图图也漂亮，还有精心制作的按钮。黑黑的帖子好棒{:4_187:}

马黑黑 发表于 2022-4-20 12:15

加林森 发表于 2022-4-20 09:29
老黑这个制作真漂亮，一图一播放器就搞定了。

简简单单也是一种意境吧

马黑黑 发表于 2022-4-20 12:15

红影 发表于 2022-4-20 10:28
闪烁的星星好美，这张图图也漂亮，还有精心制作的按钮。黑黑的帖子好棒

按钮还可以缩小

加林森 发表于 2022-4-20 12:17

马黑黑 发表于 2022-4-20 12:15
简简单单也是一种意境吧

是的。简单并不是缺乏，而是一种升华。

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

加林森 发表于 2022-4-20 12:17
是的。简单并不是缺乏，而是一种升华。

分寸的把握很重要

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

马黑黑 发表于 2022-4-20 12:18
分寸的把握很重要

是的是的。

马黑黑 发表于 2022-4-20 12:20

加林森 发表于 2022-4-20 12:19
是的是的。

你这个教授东篱说做得好

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

马黑黑 发表于 2022-4-20 12:20
你这个教授东篱说做得好

我只是想把自己的理解融合进来而已。东篱制作的作品都比我好得多。

马黑黑 发表于 2022-4-20 12:43

加林森 发表于 2022-4-20 12:23
我只是想把自己的理解融合进来而已。东篱制作的作品都比我好得多。

各有各的思路与实现方法。东篱擅长ps，这对美的表现很给力

加林森 发表于 2022-4-20 12:51

马黑黑 发表于 2022-4-20 12:43
各有各的思路与实现方法。东篱擅长ps，这对美的表现很给力

是的，我也会点，但是没有去制作的。

闲言不语 发表于 2022-4-20 13:07

仿佛看见了宇宙深处{:4_199:}

马黑黑 发表于 2022-4-20 13:30

闲言不语 发表于 2022-4-20 13:07
仿佛看见了宇宙深处

你理解的好{:4_180:}

马黑黑 发表于 2022-4-20 13:30

加林森 发表于 2022-4-20 12:51
是的，我也会点，但是没有去制作的。

要去

加林森 发表于 2022-4-20 16:34

马黑黑 发表于 2022-4-20 13:30
要去

好的，我也学点吧。

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

加林森 发表于 2022-4-20 16:34
好的，我也学点吧。

ps是平面设计中很平民化的工具，很多人都会的

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

马黑黑 发表于 2022-4-20 18:24
ps是平面设计中很平民化的工具，很多人都会的

我主要是忘记得太多了。

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

加林森 发表于 2022-4-20 18:26
我主要是忘记得太多了。

做领导操心的太多

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

马黑黑 发表于 2022-4-20 18:59
做领导操心的太多

过去刚玩得开心时，又工作忙起来了，就没有时间再玩了。

查看完整版本: 黑暗世界