H5、CSS3、JS学习笔记（二）——下雨的窗户
龙嘉誉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen - Rainy Day</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block
}
body {
line-height: 1
}
ol,
ul {
list-style: none
}
blockquote,
q {
quotes: none
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
</style>
<style>
:root {
--size: 50vmin;
--pull: 1vmin;
--height-sill: calc(var(--size) / 4);
--height-ac: calc(var(--size) / 2.75);
--height-curtain-rod: calc(var(--size) / 40);
--color-wall: hsl(8, 72%, 72%);
--color-frame: hsl(0, 100%, 100%);
--color-ac-unit: hsl(72, 2%, 97%);
--color-ac-unit-inner: hsl(0, 0%, 70%);
--color-outside: hsl(213, 74%, 40%);
--color-curtain-rod: hsl(18, 80%, 10%);
--color-book-1: hsl(55, 100%, 48%);
--color-book-2: hsl(178, 93%, 21%);
--color-book-3: hsl(194, 100%, 48%);
--color-planter: hsl(0, 100%, 100%);
--color-leaf: hsl(72, 40%, 43%);
--border-frame: 2.5vmin;
--border-radius: 0.25vmin;
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
display: grid;
place-items: center;
background-color: var(--color-wall);
background-image: url(../img/wall2.jpg);
}
.frame {
display: grid;
position: relative;
margin-top: calc(var(--height-sill) * -1);
width: var(--size);
height: calc(var(--size) * 1.5);
border-radius: var(--border-radius) var(--border-radius) 0 0;
background-color: var(--color-frame);
}
.outside {
position: absolute;
width: 100%;
height: 100%;
background-color: var(--color-outside);
overflow: hidden;
-webkit-animation: flash 10s linear infinite;
animation: flash 10s linear infinite;
}
.rain {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
.drop {
position: absolute;
background-color: rgba(255, 255, 255, 0.3);
width: 1px;
height: 4vmin;
-webkit-animation: fall 200ms linear infinite;
animation: fall 200ms linear infinite;
}
.drop:nth-child(1) {
top: 38%;
left: 4%;
-webkit-animation-delay: -0.03s;
animation-delay: -0.03s;
-webkit-animation-duration: 207ms;
animation-duration: 207ms;
}
.drop:nth-child(2) {
top: 40%;
left: 34%;
-webkit-animation-delay: -0.06s;
animation-delay: -0.06s;
-webkit-animation-duration: 203ms;
animation-duration: 203ms;
}
.drop:nth-child(3) {
top: 14%;
left: 92%;
-webkit-animation-delay: -0.09s;
animation-delay: -0.09s;
-webkit-animation-duration: 207ms;
animation-duration: 207ms;
}
.drop:nth-child(4) {
top: 24%;
left: 76%;
-webkit-animation-delay: -0.12s;
animation-delay: -0.12s;
-webkit-animation-duration: 201ms;
animation-duration: 201ms;
}
.drop:nth-child(5) {
top: 18%;
left: 14%;
-webkit-animation-delay: -0.15s;
animation-delay: -0.15s;
-webkit-animation-duration: 209ms;
animation-duration: 209ms;
}
.drop:nth-child(6) {
top: 8%;
left: 78%;
-webkit-animation-delay: -0.18s;
animation-delay: -0.18s;
-webkit-animation-duration: 205ms;
animation-duration: 205ms;
}
.drop:nth-child(7) {
top: 14%;
left: 14%;
-webkit-animation-delay: -0.21s;
animation-delay: -0.21s;
-webkit-animation-duration: 203ms;
animation-duration: 203ms;
}
.drop:nth-child(8) {
top: 48%;
left: 2%;
-webkit-animation-delay: -0.24s;
animation-delay: -0.24s;
-webkit-animation-duration: 201ms;
animation-duration: 201ms;
}
.drop:nth-child(9) {
top: 28%;
left: 98%;
-webkit-animation-delay: -0.27s;
animation-delay: -0.27s;
-webkit-animation-duration: 203ms;
animation-duration: 203ms;
}
.drop:nth-child(10) {
top: 56%;
left: 66%;
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
-webkit-animation-duration: 210ms;
animation-duration: 210ms;
}
.drop:nth-child(11) {
top: 58%;
left: 22%;
-webkit-animation-delay: -0.33s;
animation-delay: -0.33s;
-webkit-animation-duration: 208ms;
animation-duration: 208ms;
}
.drop:nth-child(12) {
top: 64%;
left: 24%;
-webkit-animation-delay: -0.36s;
animation-delay: -0.36s;
-webkit-animation-duration: 209ms;
animation-duration: 209ms;
}
.drop:nth-child(13) {
top: 28%;
left: 64%;
-webkit-animation-delay: -0.39s;
animation-delay: -0.39s;
-webkit-animation-duration: 204ms;
animation-duration: 204ms;
}
.drop:nth-child(14) {
top: 46%;
left: 58%;
-webkit-animation-delay: -0.42s;
animation-delay: -0.42s;
-webkit-animation-duration: 208ms;
animation-duration: 208ms;
}
.drop:nth-child(15) {
top: 52%;
left: 74%;
-webkit-animation-delay: -0.45s;
animation-delay: -0.45s;
-webkit-animation-duration: 203ms;
animation-duration: 203ms;
}
.drop:nth-child(16) {
top: 70%;
left: 28%;
-webkit-animation-delay: -0.48s;
animation-delay: -0.48s;
-webkit-animation-duration: 209ms;
animation-duration: 209ms;
}
.drop:nth-child(17) {
top: 90%;
left: 86%;
-webkit-animation-delay: -0.51s;
animation-delay: -0.51s;
-webkit-animation-duration: 204ms;
animation-duration: 204ms;
}
.drop:nth-child(18) {
top: 64%;
left: 66%;
-webkit-animation-delay: -0.54s;
animation-delay: -0.54s;
-webkit-animation-duration: 210ms;
animation-duration: 210ms;
}
.drop:nth-child(19) {
top: 96%;
left: 18%;
-webkit-animation-delay: -0.57s;
animation-delay: -0.57s;
-webkit-animation-duration: 205ms;
animation-duration: 205ms;
}
.drop:nth-child(20) {
top: 50%;
left: 96%;
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
-webkit-animation-duration: 207ms;
animation-duration: 207ms;
}
.drop:nth-child(21) {
top: 8%;
left: 66%;
-webkit-animation-delay: -0.63s;
animation-delay: -0.63s;
-webkit-animation-duration: 205ms;
animation-duration: 205ms;
}
.drop:nth-child(22) {
top: 98%;
left: 94%;
-webkit-animation-delay: -0.66s;
animation-delay: -0.66s;
-webkit-animation-duration: 201ms;
animation-duration: 201ms;
}
.drop:nth-child(23) {
top: 40%;
left: 22%;
-webkit-animation-delay: -0.69s;
animation-delay: -0.69s;
-webkit-animation-duration: 210ms;
animation-duration: 210ms;
}
.drop:nth-child(24) {
top: 8%;
left: 30%;
-webkit-animation-delay: -0.72s;
animation-delay: -0.72s;
-webkit-animation-duration: 204ms;
animation-duration: 204ms;
}
.drop:nth-child(25) {
top: 14%;
left: 76%;
-webkit-animation-delay: -0.75s;
animation-delay: -0.75s;
-webkit-animation-duration: 203ms;
animation-duration: 203ms;
}
.drop:nth-child(26) {
top: 74%;
left: 40%;
-webkit-animation-delay: -0.78s;
animation-delay: -0.78s;
-webkit-animation-duration: 204ms;
animation-duration: 204ms;
}
.drop:nth-child(27) {
top: 78%;
left: 34%;
-webkit-animation-delay: -0.81s;
animation-delay: -0.81s;
-webkit-animation-duration: 209ms;
animation-duration: 209ms;
}
.drop:nth-child(28) {
top: 70%;
left: 6%;
-webkit-animation-delay: -0.84s;
animation-delay: -0.84s;
-webkit-animation-duration: 204ms;
animation-duration: 204ms;
}
.drop:nth-child(29) {
top: 2%;
left: 36%;
-webkit-animation-delay: -0.87s;
animation-delay: -0.87s;
-webkit-animation-duration: 202ms;
animation-duration: 202ms;
}
.drop:nth-child(30) {
top: 62%;
left: 98%;
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
-webkit-animation-duration: 203ms;
animation-duration: 203ms;
}
.curtain-rod {
position: absolute;
top: calc(var(--border-frame) / 4);
left: 50%;
width: calc(100% + (var(--pull) * 4) - 0.5vmin);
height: var(--height-curtain-rod);
background-color: var(--color-curtain-rod);
border-radius: var(--border-radius);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.curtain {
position: absolute;
top: calc((var(--border-frame) / 4) - 0.25vmin);
height: calc(100% - var(--height-ac));
width: 40%;
background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 2px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 2px);
border-radius: calc(var(--border-radius) * 2) 0 100% calc(var(--border-radius) * 2);
box-shadow: rgba(0, 0, 0, 0.06) 1vmin 1vmin 2vmin;
}
.curtain::before,
.curtain::after {
content: "";
position: absolute;
top: 0;
height: 100%;
border-radius: inherit;
background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 2px, transparent 2px, transparent 3px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 2px, transparent 2px, transparent 3px);
}
.curtain::before {
left: 5%;
width: 80%;
}
.curtain::after {
left: 5%;
width: 60%;
}
.curtain.left {
left: -1vmin;
}
.curtain.right {
right: -1vmin;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.window {
position: relative;
background-color: transparent;
border: var(--border-frame) solid var(--color-frame);
border-radius: inherit;
z-index: 0;
}
.window.top {
box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 4vmin;
}
.window.bottom {
top: calc(var(--height-ac) * -1);
box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 4vmin, rgba(0, 0, 0, 0.1) 0 -2vmin 1.5vmin -1vmin;
}
.ac {
display: -webkit-box;
display: flex;
position: absolute;
bottom: 0;
width: 100%;
height: var(--height-ac);
background-color: var(--color-frame);
box-shadow: rgba(0, 0, 0, 0.05) 0 -2vmin 1vmin -2vmin;
z-index: 0;
}
.ac .unit {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 3fr;
grid-gap: 1vmin;
padding: 1vmin;
position: relative;
margin: auto;
width: 45%;
height: 80%;
top: 0.5vmin;
background-color: var(--color-ac-unit);
border-radius: var(--border-radius);
box-shadow: rgba(0, 0, 0, 0.1) 0 0.5vmin 1.5vmin;
}
.ac .unit::before {
position: absolute;
bottom: 100%;
display: block;
content: "";
width: 100%;
height: calc(var(--size) / 40);
background-color: inherit;
box-shadow: inset rgba(0, 0, 0, 0.075) 0 0.5vmin 1.5vmin;
-webkit-clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
}
.vent.small {
grid-column: span 2;
display: grid;
grid-gap: 1px;
}
.vent.large {
grid-column: span 3;
display: grid;
grid-gap: 1px;
}
.vent .slot {
background-color: var(--color-ac-unit-inner);
background-image: repeating-linear-gradient(to right, transparent, transparent 32%, var(--color-ac-unit) 32%, var(--color-ac-unit) 34%);
border-radius: 360px;
}
.controls {
background-color: var(--color-ac-unit-inner);
border-radius: 0.5vmin;
}
.sill {
position: absolute;
top: calc(100% + 2vmin - 1px);
left: 50%;
width: calc(var(--size) * 1.1);
height: var(--height-sill);
border-radius: 0 0 var(--border-radius) var(--border-radius);
background-color: var(--color-frame);
box-shadow: inset rgba(0, 0, 0, 0.05) 0 3vmin 2.5vmin, rgba(0, 0, 0, 0.1) 0 1vmin 1.5vmin -0.5vmin;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 1;
}
.sill::before,
.sill::after {
position: relative;
display: block;
content: "";
width: 110%;
top: -2vmin;
left: -5%;
height: calc(var(--size) / 20);
background-color: inherit;
}
.sill::before {
box-shadow: inset rgba(0, 0, 0, 0.075) 0 0.5vmin 1.5vmin;
-webkit-clip-path: polygon(8.75% 0, 91.25% 0, 100% 100%, 0% 100%);
clip-path: polygon(8.75% 0, 91.25% 0, 100% 100%, 0% 100%);
}
.sill::after {
margin-top: -1px;
border-radius: var(--border-radius);
}
.sill .items {
position: absolute;
right: var(--pull);
bottom: calc(100% + 0.5vmin);
width: 100%;
height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-align: end;
align-items: flex-end;
-webkit-box-pack: end;
justify-content: flex-end;
}
.planter {
position: relative;
width: 15%;
height: 65%;
background-image: -webkit-gradient(linear, left top, right top, from(#f2f2f2), color-stop(20%, var(--color-planter)), color-stop(70%, var(--color-planter)), to(#cccccc));
background-image: linear-gradient(90deg, #f2f2f2 0%, var(--color-planter) 20%, var(--color-planter) 70%, #cccccc 100%);
z-index: 0;
}
.planter::before,
.planter::after {
content: "";
position: absolute;
width: 100%;
height: 15%;
}
.planter::before {
bottom: 95%;
background-image: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#333333));
background-image: linear-gradient(to bottom, #cccccc, #333333);
border-radius: 100%;
}
.planter::after {
top: 90%;
border-radius: 0 0 100% 100%;
background-image: inherit;
z-index: -1;
box-shadow: rgba(0, 0, 0, 0.1) 0.25vmin 1vmin 2vmin;
}
.leaf {
position: absolute;
bottom: 100%;
width: 50%;
height: 50%;
background-color: var(--color-leaf);
border-radius: 360px 0 360px 0;
z-index: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-shadow: inset rgba(0, 0, 0, 0.1) -0.5vmin -0.5vmin 0.5vmin;
}
.leaf:nth-child(1) {
left: 16%;
bottom: 90%;
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.leaf:nth-child(2) {
left: 50%;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
box-shadow: inset rgba(0, 0, 0, 0.2) 0.5vmin -0.5vmin 1vmin;
}
.leaf:nth-child(3) {
left: 45%;
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.books {
display: -webkit-box;
display: flex;
-webkit-box-align: end;
align-items: flex-end;
-webkit-box-pack: end;
justify-content: flex-end;
width: 11%;
height: 110%;
z-index: 1;
}
.book {
border-radius: var(--border-radius);
box-shadow: inset rgba(0, 0, 0, 0.1) -0.5vmin -0.5vmin 1vmin;
}
.book:nth-child(1) {
background-color: var(--color-book-1);
width: 30%;
height: 98%;
}
.book:nth-child(2) {
background-color: var(--color-book-2);
width: 40%;
height: 100%;
}
.book:nth-child(3) {
background-color: var(--color-book-3);
width: 30%;
height: 92%;
}
@-webkit-keyframes fall {
0% {
-webkit-transform: translateY(-300%);
transform: translateY(-300%);
}
90% {
-webkit-transform: translateY(300%) scaleY(1);
transform: translateY(300%) scaleY(1);
}
100% {
-webkit-transform: translateY(300%) scaleY(0);
transform: translateY(300%) scaleY(0);
}
}
@keyframes fall {
0% {
-webkit-transform: translateY(-300%);
transform: translateY(-300%);
}
90% {
-webkit-transform: translateY(300%) scaleY(1);
transform: translateY(300%) scaleY(1);
}
100% {
-webkit-transform: translateY(300%) scaleY(0);
transform: translateY(300%) scaleY(0);
}
}
@-webkit-keyframes flash {
0%,
1% {
opacity: 1;
}
1.1%,
1.5% {
opacity: 0.2;
}
1.6%,
4% {
opacity: 1;
}
4.1%,
4.3% {
opacity: 0.2;
}
4.4%,
4.5% {
opacity: 1;
}
4.6%,
4.8% {
opacity: 0.2;
}
4.9%,
7.4% {
opacity: 1;
}
7.5%,
7.7% {
opacity: 0.5;
}
7.8%,
100% {
opacity: 1;
}
}
@keyframes flash {
0%,
1% {
opacity: 1;
}
1.1%,
1.5% {
opacity: 0.2;
}
1.6%,
4% {
opacity: 1;
}
4.1%,
4.3% {
opacity: 0.2;
}
4.4%,
4.5% {
opacity: 1;
}
4.6%,
4.8% {
opacity: 0.2;
}
4.9%,
7.4% {
opacity: 1;
}
7.5%,
7.7% {
opacity: 0.5;
}
7.8%,
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="frame">
<div class="outside">
<div class="rain">
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
</div>
</div>
<div class="window top"></div>
<div class="window bottom"></div>
<div class="ac">
<div class="unit">
<div class="vent small">
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
</div>
<div class="vent small">
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
</div>
<div class="controls"></div>
<div class="vent large">
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
</div>
</div>
</div>
<div class="curtain-rod"></div>
<div class="curtain left"></div>
<div class="curtain right"></div>
<div class="sill">
<div class="items">
<div class="planter">
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
</div>
<div class="books">
<div class="book"></div>
<div class="book"></div>
<div class="book"></div>
</div>
</div>
</div>
</div>
<!-- partial -->
</body>
</html>
类似资料：