[灌水] 啓

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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>