<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>岳瑞涛的摇摆钟</title>
<style type="text/css">
body {
background-color: #5EC6C4;
text-align: center;
height: 100%;
margin: 0px;
}
#cuckoo {
margin: 14px auto;
position: relative;
height: 510px;
width: 510px;
}
#cuckoo div {
position: absolute;
}
#cuckoo div::before,
#cuckoo div::after {
content: '';
position: absolute;
display: block;
}
.house {
width: 277px;
height: 102px;
background-color: #FFF1DA;
border-top: 5px solid #b44127;
border-bottom: 7px solid #e7c5b4;
top: 221px;
left: 116px;
}
.house::before {
width: 186px;
height: 127px;
background-color: #FFF1DA;
border-top: 5px solid #b44127;
border-bottom: 7px solid #e7c5b4;
left: 45px;
top: -144px;
}
.house::after {
width: 375px;
height: 13px;
background-color: #B44127;
bottom: -20px;
left: -49px;
z-index: 10;
}
.arches {
width: 47px;
height: 57px;
border-radius: 50px 47px 0 0;
background-color: #e7c5b4;
box-shadow: -2px 0px 0 2px #797a7b, -2px 0px 0 5px #B44126, 177px 0px 0 1px #e7c5b4, 179px 0px 0 2px #797a7b, 179px 0px 0 5px #B44126, 58px -160px 0 1px #5EC6C4, 56px -160px 0 2px #797a7b, 56px -160px 0 5px #B44126, 120px -160px 0 1px #5EC6C4, 122px -160px 0 2px #797a7b, 122px -160px 0 5px #B44126;
top: 278px;
left: 142px;
}
.arches::before {
width: 130px;
height: 7px;
background-color: #B44126;
top: -102px;
left: 47px;
}
.arches::after {
width: 65px;
height: 47px;
border-radius: 36px 36px 0 0;
border: 5px solid #b44127;
border-bottom: 5px solid transparent;
background-color: #fff1dc;
top: -248px;
left: 75px;
}
.ornament {
width: 213px;
height: 27px;
background-color: #FFF1DA;
bottom: 135px;
left: 148px;
}
.ornament::before {
width: 143px;
height: 17px;
background-color: #FFF1DA;
top: 27px;
left: 35px;
}
.ornament::after {
width: 53px;
height: 17px;
background-color: #FFF1DA;
top: 44px;
left: 80px;
}
.details::after {
width: 40px;
height: 5px;
background-color: #b44127;
box-shadow: 160px 0 #b44127, 40px 15px #b44127, 120px 15px #b44127, 80px 32px #b44127;
top: 365px;
left: 155px;
}
.details::before {
width: 5px;
height: 17px;
background-color: #b44127;
box-shadow: 195px 0 #b44127, 35px 20px #b44127, 160px 20px #b44127, 80px 32px #b44127, 115px 32px #b44127;
top: 348px;
left: 155px;
}
.trees {
width: 31px;
height: 86px;
border-radius: 15px 15px 0 0;
background-image: linear-gradient( 90deg, #47a748 50%, #c0dd97 50%);
top: 249px;
left: 95px;
}
.trees::before {
width: 31px;
height: 86px;
border-radius: 15px 15px 0 0;
background-image: linear-gradient( 90deg, #c0dd97 50%, #47a748 50%);
left: 287px;
}
.trees::after {
width: 38px;
height: 19px;
border-radius: 19px 19px 0 0;
background-color: #c0dd97;
box-shadow: 329px 0 #c0dd97;
bottom: 0px;
left: -24px;
}
.decor {
width: 360px;
height: 6px;
background-color: #f89c67;
top: 348px;
left: 73px;
}
.decor::before {
width: 8px;
height: 8px;
background-color: #f5926d;
box-shadow: 1px 0px #b44126, 24px 0px #F5926D, 25px 0px #b44126, 128px 0px #F5926D, 129px 0px #b44126, 152px 0px #F5926D, 153px 0px #b44126, -46px 140px #F5926D, -45px 140px #b44126, -22px 140px #F5926D, -21px 140px #b44126, 2px 140px #F5926D, 3px 140px #b44126, 151px 140px #F5926D, 152px 140px #b44126, 175px 140px #F5926D, 176px 140px #b44126, 199px 140px #F5926D, 200px 140px #b44126;
border-radius: 50%;
bottom: 252px;
left: 100px;
}
.decor::after {
width: 12px;
height: 6px;
background-color: #b44126;
border-radius: 6px 6px 0 0;
box-shadow: 12px 0px #b44126, 24px 0px #b44126, 36px 0px #b44126, 48px 0px #b44126, 126px 0px #b44126, 138px 0px #b44126, 150px 0px #b44126, 162px 0px #b44126, 174px 0px #b44126, -45px 138px #b44126, -33px 138px #b44126, -21px 138px #b44126, -9px 138px #b44126, 3px 138px #b44126, 15px 138px #b44126, 27px 138px #b44126, 148px 138px #b44126, 160px 138px #b44126, 172px 138px #b44126, 184px 138px #b44126, 196px 138px #b44126, 208px 138px #b44126, 220px 138px #b44126;
bottom: 270px;
left: 88px;
}
.bell {
width: 15px;
height: 18px;
border-radius: 40px 40px 0 0;
background-color: #f9ed32;
box-shadow: 0px 11px 0 10px #5EC6C4, 0px 11px 0 13px #b44126;
top: 46px;
left: 247px;
}
.bell::before {
width: 19px;
height: 4px;
background-color: #f9ed32;
top: 15px;
left: -2px;
}
.bell::after {
width: 2px;
height: 100px;
background-image: linear-gradient( #444444 50%, transparent 50%);
top: 161px;
left: 6px;
-o-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
animation: tock 60s infinite linear;
-o-animation: tock 60s infinite linear;
-ms-animation: tock 60s infinite linear;
-moz-animation: tock 60s infinite linear;
-webkit-animation: tock 60s infinite linear;
}
@keyframes tock {
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.clock {
width: 10px;
height: 10px;
background-color: #444444;
border-radius: 50%;
border: 48px solid white;
box-shadow: 0 0 0 1px #b5acac, 0 0 0 7px #dbb9b9, 0 0 0 17px #b44126;
top: 204px;
left: 201px;
}
.clock::before {
width: 4px;
height: 30px;
background-color: #444444;
border-radius: 2px 2px 0 0;
top: -28px;
left: 3px;
}
.clock::after {
width: 38px;
height: 4px;
background-color: #444444;
border-radius: 0 2px 2px 0;
bottom: 3px;
left: 3px;
}
.pendulum {
width: 4px;
height: 340px;
background-color: #b44126;
top: 88px;
left: 252px;
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
animation: tick 2s infinite ease;
-o-animation: tick 2s infinite ease;
-ms-animation: tick 2s infinite ease;
-moz-animation: tick 2s infinite ease;
-webkit-animation: tick 2s infinite ease;
}
@keyframes tick {
50% {
transform: rotate(30deg);
}
}
.pendulum::before {
width: 30px;
height: 30px;
border-radius: 15px;
background-color: #B44126;
bottom: -30px;
left: -12px;
}
.people {
width: 20px;
height: 20px;
border-radius: 20px 20px;
background-color: #444444;
box-shadow: 0 28px #444444, 64px 0 #444444, 64px 28px #444444;
top: 128px;
left: 213px;
}
.people::before {
width: 30px;
height: 25px;
border-radius: 20px 20px 0 0;
background-color: #444444;
box-shadow: 64px 0 #444444;
top: 17px;
left: -5px;
}
.people::after {
width: 26px;
height: 3px;
background-color: #444444;
box-shadow: 0 -1px white, 64px 0 #444444, 64px -1px white;
top: 6px;
left: -3px;
}
.door {
width: 49px;
height: 59px;
border-radius: 50px 47px 0 0;
background-color: #e7c5b4;
box-shadow: 63px 0 0 #e7c5b4;
top: 117px;
left: 199px;
animation: cuckoo 60s infinite ease;
-o-animation: cuckoo 60s infinite ease;
-ms-animation: cuckoo 60s infinite ease;
-moz-animation: cuckoo 60s infinite ease;
-webkit-animation: cuckoo 60s 4s infinite linear;
}
@keyframes cuckoo {
1% {
background-color: #e7c5b4;
box-shadow: 63px 0 0 #e7c5b4;
}
2% {
background-color: transparent;
box-shadow: 63px 0 0 transparent;
}
19% {
background-color: transparent;
box-shadow: 63px 0 0 transparent;
}
20% {
background-color: #e7c5b4;
box-shadow: 63px 0 0 #e7c5b4;
}
}
</style>
</head>
<body>
<div id="cuckoo">
<div class="pendulum"></div>
<div class="house"></div>
<div class="arches"></div>
<div class="clock"></div>
<div class="ornament"></div>
<div class="details"></div>
<div class="decor"></div>
<div class="trees"></div>
<div class="bell"></div>
<div class="people"></div>
<div class="door"></div>
</div>
</body>
</html>
2493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
