论坛 › 欢乐水吧 › 啓

马黑黑 发表于 2022-5-2 09:29

啓

<style>
.papa {
        left: -214px;
        width: 1024px;
        height: 600px;
        background:
                radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%),
                linear-gradient(135deg, #ff0000 0%, #000036 100%),
                radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%),
                linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%);
        background-blend-mode: normal, screen, overlay, normal;
        opacity: .95;
        position: relative;
}
.papa div { position: absolute; border-radius: 50%; }
.papa div:nth-child(1) { width: 100px; height: 100px; left: 50%; bottom: 25%; transform: rotate(20deg); }
.papa div:nth-child(2) { width: 150px; height: 150px; right: 20%; bottom: 10%; transform: rotate(-20deg); }
.papa div:nth-child(3) { width: 200px; height: 200px; left: 10%; bottom: 10%; animation: scale 10s infinite alternate; }

@keyframes scale {
        from { transform: scale(1); }
        to { transform: scale(-1); }
}
</style>

<div class="papa">
        <div class="papa"></div>
        <div class="papa"></div>
        <div class="papa"></div>
</div>

<script>
let au = document.createElement('iframe');
au.src = 'https://music.163.com/outchain/player?type=2&id=1808295250&auto=1&height=66';
au.style.display = 'none';
document.querySelector('.papa').appendChild(au);
</script>

马黑黑 发表于 2022-5-2 09:34

背景来自 gradienta 的开源代码，我取消了水面上的太阳影子。以下是 gradienta 的源码：
background:
        radial-gradient(ellipse farthest-side at 76% 77%, rgba(245, 228, 212, 0.25) 4%, rgba(255, 255, 255, 0) calc(4% + 1px)),
        radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%),
        linear-gradient(135deg, #ff0000 0%, #000036 100%),
        radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%),
        linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%);
background-blend-mode: normal, normal, screen, overlay, normal;

马黑黑 发表于 2022-5-2 09:45

帖子全部代码：
<style>
.papa {
        left: -214px;
        width: 1024px;
        height: 600px;
        background:
                radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%),
                linear-gradient(135deg, #ff0000 0%, #000036 100%),
                radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%),
                linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%);
        background-blend-mode: normal, screen, overlay, normal;
        opacity: .95;
        position: relative;
}
.papa div { position: absolute; border-radius: 50%; }
.papa div:nth-child(1) { width: 100px; height: 100px; left: 50%; bottom: 25%; transform: rotate(20deg); }
.papa div:nth-child(2) { width: 150px; height: 150px; right: 20%; bottom: 10%; transform: rotate(-20deg); }
.papa div:nth-child(3) { width: 200px; height: 200px; left: 10%; bottom: 10%; animation: scale 10s infinite alternate; }

@keyframes scale {
        from { transform: scale(1); }
        to { transform: scale(-1); }
}
</style>

<div class="papa">
        <div class="papa"></div>
        <div class="papa"></div>
        <div class="papa"></div>
</div>

<script>
let au = document.createElement('iframe');
au.src = 'https://music.163.com/outchain/player?type=2&id=1808295250&auto=1&height=66';
au.style.display = 'none';
document.querySelector('.papa').appendChild(au);
</script>

马黑黑 发表于 2022-5-2 09:48

本帖最后由 马黑黑 于 2022-5-2 09:49 编辑

本地测试效果时，左手边的球球是在帖子的右下角的，弄到论坛里来它居然反向出现且脱离了帖子，但效果也挺好。

说明一下：本帖，除了背景渐变与彼此融合（blend-mode）的设计，其余都是自己的构思。

红影 发表于 2022-5-2 12:06

transform: scale(-1)，这个还能取负值啊。

红影 发表于 2022-5-2 12:07

马黑黑 发表于 2022-5-2 09:48
本地测试效果时，左手边的球球是在帖子的右下角的，弄到论坛里来它居然反向出现且脱离了帖子，但效果也挺好 ...

它的定位是right: 20%; bottom: 10%; 吧，为什么会跑到左边那么多呢。

加林森 发表于 2022-5-2 12:11

又是新的创作啊。跑出去的就不能收回来吗？

马黑黑 发表于 2022-5-2 12:31

红影 发表于 2022-5-2 12:06
transform: scale(-1)，这个还能取负值啊。

可以的

马黑黑 发表于 2022-5-2 12:31

加林森 发表于 2022-5-2 12:11
又是新的创作啊。跑出去的就不能收回来吗？

在那里月挺好看的，不用收回来

马黑黑 发表于 2022-5-2 12:35

红影 发表于 2022-5-2 12:07
它的定位是right: 20%; bottom: 10%; 吧，为什么会跑到左边那么多呢。

我再本地测试的时候，主窗体用 margin: auto 设定居中，没有 left: -214 的设定，它就好好的；搬到论坛，去掉margin，加上left，就变成酱紫了。多重class时有时会出现不可预知的结果吧

大猫咪 发表于 2022-5-2 12:46

老黑辛苦，这个也好玩{:4_187:}空了学习   {:4_179:}

马黑黑 发表于 2022-5-2 12:48

大猫咪 发表于 2022-5-2 12:46
老黑辛苦，这个也好玩    空了学习

{:4_190:}

加林森 发表于 2022-5-2 13:10

马黑黑 发表于 2022-5-2 12:31
在那里月挺好看的，不用收回来

哦。知道了。

马黑黑 发表于 2022-5-2 14:12

加林森 发表于 2022-5-2 13:10
哦。知道了。

{:4_190:}喝茶

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

马黑黑 发表于 2022-5-2 12:31
可以的

这个还是头一次看到呢。

红影 发表于 2022-5-2 15:49

马黑黑 发表于 2022-5-2 12:35
我再本地测试的时候，主窗体用 margin: auto 设定居中，没有 left: -214 的设定，它就好好的；搬到论坛， ...

哦，知道了，可能相互有影响的呢。

马黑黑 发表于 2022-5-2 17:07

红影 发表于 2022-5-2 15:49
哦，知道了，可能相互有影响的呢。

有一些设定可能存在制约

马黑黑 发表于 2022-5-2 17:07

红影 发表于 2022-5-2 15:48
这个还是头一次看到呢。

文档里说明可以用负值

加林森 发表于 2022-5-2 18:03

马黑黑 发表于 2022-5-2 14:12
喝茶

你喝：{:4_191:}

马黑黑 发表于 2022-5-2 19:01

加林森 发表于 2022-5-2 18:03
你喝：

喝好了，谢谢

查看完整版本: 啓