Skip to content

Instantly share code, notes, and snippets.

@z2n

z2n/cloud.html

Last active April 10, 2020 09:43
Show Gist options
  • Save z2n/a805f05f9b45eba46a54f1c7dd92c350 to your computer and use it in GitHub Desktop.
Save z2n/a805f05f9b45eba46a54f1c7dd92c350 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cloud.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>云</title>
<style>
header {
width: 100%;
height: 200px;
}
/* 033 */
.cloud-bg {
position: relative;
padding-top: 0.5em;
font-size: 100%;
color: hsl(190, 52%, 50%);
background: radial-gradient(
100% 70% at 50% 100%,
white 4.5em,
hsl(145, 34%, 98%) 4em,
hsla(145, 34%, 99%, 0) 0
) -10em 100% / 14em 14em,
radial-gradient(
100% 65% at 50% 90%,
white 1em,
hsla(0, 0%, 100%, 0) 0
) -2.5em 100% / 5em 5em,
radial-gradient(
100% 60% at 50% 100%,
white 1.5em,
hsl(145, 34%, 99%) 2em,
hsla(145, 34%, 99%, 0) 0
)
0em 100% / 5em 5em,
radial-gradient(
100% 60% at 50% 100%,
white 1.6em,
hsl(145, 34%, 99%) 2em,
hsla(145, 34%, 99%, 0) 0
)
0em 100% / 15em 8em,
radial-gradient(
100% 70% at 50% 100%,
white 3em,
hsl(145, 34%, 99%) 3em,
hsla(145, 34%, 99%, 0) 0
)
0 100% / 10em 10em,
radial-gradient(
100% 70% at 50% 100%,
white 3em,
hsl(145, 34%, 98%) 4em,
hsla(145, 34%, 99%, 0) 0
)
0em 100% / 20em 20em;
background-repeat: repeat-x;
background-color: #aadff5;
animation: 15s move infinite linear;
}
@keyframes move {
from {
background-position: -24em 100%, -7.5em 100%, -5em 100%, -15em 100%,
-10em 100%, -20em 100%;
}
}
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<header class="cloud-bg"></header>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment