<div class="sea"></div>
.sea{
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
--waveSize: 6.5em;
--waveColor1: blue;
--waveColor2: dodgerblue;
background:
radial-gradient(circle at 50% calc(100% - var(--waveSize)),
transparent 50%, var(--waveColor1) 50%) left 102% / var(--waveSize) var(--waveSize) repeat-x,
radial-gradient(circle at 50% 10%,
transparent 50%, var(--waveColor2) 50%) center bottom / var(--waveSize) var(--waveSize) repeat-x,
linear-gradient(to bottom, midnightblue, dodgerblue, lightblue);
background-attachment: fixed;
}
補足
radial-gradient()で 波を作って海を表現しています。
radial-gradient(幅 高さ at 中心のX座標 中心のY座標, 開始色, 終了色);
中心のY座標を調節して円が半分隠れた図形
を作ります。
radial-gradient(circle at 50% calc(100% - 96px),
transparent 50%, blue 50%) left 102% /96px 96px no-repeat;
図形ができたらX方向にのみ繰り返し表示します
上記のCSS末尾の no-repeat
を repeat-x
と書き換えてください
radial-gradient(circle at 50% calc(100% - 96px),
transparent 50%, blue 50%) left 102% /96px 96px repeat-x;
完成。
ブラウザ
Chrome と Firefox, Safariに対応
おまけ
<div class="sea_whale"><div>
.sea_whale{
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
--waveSize: 6.5em;
--waveColor1: blue;
--waveColor2: dodgerblue;
--whaleLength: 300px;
--whalePosX: 25%;
--whalePosY: 100%;
--whaleColor: black;
--eyeSize: 15px;
--eyePosX: var(--whalePosX);
--eyePosY: calc(var(--whaleLength) * 0.33);
--eyeColor1: black;
--eyeColor2: white;
--tailLength1: 150px;
--tailLength2: calc(var(--tailLength1) / 1.2);
--tail1PosX: 30px;
--tail2PosX: calc(var(--tail1PosX) + var(--tailLength2) / 1.815);
--tailPosY: calc(var(--whalePosY) + var(--tailLength1) * 0.15);
--tailColor: black;
/* wave, whale(eye, body, tail) */
background:
radial-gradient(circle at 50% calc(100% - var(--waveSize)),
transparent 50%, var(--waveColor1) 50%) left 102% / var(--waveSize) var(--waveSize) repeat-x,
radial-gradient(circle at 50% 10%,
transparent 50%, var(--waveColor2) 50%) center bottom / var(--waveSize) var(--waveSize) repeat-x,
/* クジラ */
radial-gradient(100% 100% at 50% 50%,
var(--eyeColor1) 35%, var(--eyeColor2) 35%, var(--eyeColor2) 50%, transparent 50%)
var(--eyePosX) calc(var(--whalePosY) - var(--eyePosY)) / var(--eyeSize) var(--eyeSize) no-repeat,
radial-gradient(100% 100% at 50% 100%,
var(--whaleColor) 50%, transparent 50%)
var(--whalePosX) var(--whalePosY) / var(--whaleLength) var(--whaleLength) no-repeat,
radial-gradient(circle at 25% 50%,
transparent 30%, var(--tailColor) 30%, var(--tailColor) 60%, transparent 60%)
calc(var(--whalePosX) + var(--whaleLength) + var(--tail1PosX)) var(--tailPosY) / calc(var(--tailLength1) / 1.36) var(--tailLength1) no-repeat,
radial-gradient(circle at 75% 50%,
transparent 30%, var(--tailColor) 30%, var(--tailColor) 60%, transparent 60%)
calc(var(--whalePosX) + var(--whaleLength) + var(--tail2PosX)) var(--tailPosY) / calc(var(--tailLength2) / 1.36) var(--tailLength2) no-repeat,
/* 空 */
linear-gradient(to bottom, midnightblue, dodgerblue, lightblue);
/* 背景画像(gradientも含む)位置を固定 */
background-attachment: fixed;
}
変数を弄ればある程度の編集は可能。
ブラウザ
Chrome と Firefox に対応