<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3江景房帆船动画邮票</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
background-color: #F5483A;
}
.stamp {
position: relative;
width: 380px;
height: 380px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.stamp:before,
.stamp:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
content: "";
display: block;
background: radial-gradient(#F5483A 42%, transparent 43%), radial-gradient(#F5483A 42%, transparent 43%), #FFFFFF;
background-size: 11% 11%;
}
.stamp:before {
width: 380px;
height: 350px;
border-top: 15px solid #FFFFFF;
border-bottom: 15px solid #FFFFFF;
background-repeat: repeat-y;
background-position: -7% 0, 107% 0;
}
.stamp:after {
width: 350px;
height: 380px;
background-repeat: repeat-x;
background-position: 0 -7%, 0 107%;
}
.scene {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: relative;
width: 320px;
height: 320px;
overflow: hidden;
background-color: #8CD5FE;
background: linear-gradient(to bottom, #8CD5FE, #ddf3ff 25%, #ddf3ff);
z-index: 1;
}
.moon {
position: absolute;
top: 30px;
left: 30px;
width: 30px;
height: 30px;
background-color: #FFFFFF;
border-radius: 100%;
}
.canal {
position: absolute;
bottom: 0;
left: -50%;
width: 200%;
height: 80px;
border-top: #1F2A48 solid 25px;
background: linear-gradient(to bottom, #8CD5FE, #ddf3ff);
}
.canal:after {
content: "";
position: absolute;
top: 99%;
left: 0;
width: 100%;
height: 150%;
background-color: #ddf3ff;
}
.boat {
position: absolute;
bottom: 29px;
right: 100%;
width: 63px;
height: 12px;
background-color: #26A158;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-animation: sailing 8s linear infinite;
animation: sailing 8s linear infinite;
z-index: 99;
}
.boat:before,
.boat:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 6px;
height: 100%;
background-color: inherit;
border-radius: 0 0 100px 100px;
}
.boat:before {
left: -3px;
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
}
.boat:after {
right: -3px;
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
}
.mast {
position: absolute;
bottom: 100%;
left: 20px;
width: 4px;
height: 14px;
background-color: #F5483A;
}
.mast:before,
.mast:after {
content: "";
position: absolute;
bottom: 100%;
border-style: solid;
}
.mast:before {
right: 100%;
border-width: 0 0 25px 25px;
border-color: transparent transparent #F5483A transparent;
}
.mast:after {
left: 0;
border-width: 65px 0 0 45px;
border-color: transparent transparent transparent #FEBB34;
}
.houses {
display: flex;
align-items: flex-end;
position: absolute;
left: -116px;
bottom: 80px;
}
.house {
position: relative;
vertical-align: bottom;
width: 48px;
height: auto;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.house:before {
content: "";
position: absolute;
bottom: 0;
left: 100%;
width: 40px;
height: 100%;
background-color: #1F2A48;
}
.house .roof {
position: absolute;
bottom: 100%;
left: 0;
padding: 0 8px;
width: 100%;
height: 40px;
}
.house .roof:before,
.house .roof:after {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.house .roof:before {
right: -40px;
background-color: #1F2A48;
-webkit-transform: skewX(26.6deg);
transform: skewX(26.6deg);
}
.house .roof:after {
left: 0;
background-color: #FD6E34;
-webkit-transform: skewX(-26.6deg);
transform: skewX(-26.6deg);
}
.house .roof-extension {
display: none;
position: absolute;
bottom: calc(100% - 1px);
left: 0;
right: 0;
margin: auto;
}
.house .roof-extension:before,
.house .roof-extension:after {
content: "";
position: absolute;
top: 0;
}
.house .roof-window {
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.house .chimney {
position: absolute;
right: 0;
bottom: 100%;
left: 50%;
margin: auto;
width: 4px;
height: 8px;
}
.house .facade,
.house .entry {
padding: 8px 8px 0;
}
.house .facade:after,
.house .entry:after {
content: "";
display: table;
clear: both;
}
.house .window,
.house .door {
float: left;
display: block;
margin: 0 8px 8px 0;
width: 12px;
height: 20px;
}
.house .door {
height: 30px;
margin-bottom: 0;
}
.house .door:before {
content: "";
position: absolute;
bottom: -1px;
right: 100%;
width: 4px;
height: 5px;
}
.house.col--1 {
width: 28px;
}
.house.col--1 .facade,
.house.col--1 .entry {
display: flex;
flex-wrap: wrap;
}
.house.col--1 .facade > *:nth-child(1n),
.house.col--1 .entry > *:nth-child(1n) {
margin-right: 0;
}
.house.col--1 .facade > *:nth-last-child(-n+1),
.house.col--1 .entry > *:nth-last-child(-n+1) {
margin-bottom: 0;
}
.house.col--2 {
width: 48px;
}
.house.col--2 .facade,
.house.col--2 .entry {
display: flex;
flex-wrap: wrap;
}
.house.col--2 .facade > *:nth-child(2n),
.house.col--2 .entry > *:nth-child(2n) {
margin-right: 0;
}
.house.col--2 .facade > *:nth-last-child(-n+2),
.house.col--2 .entry > *:nth-last-child(-n+2) {
margin-bottom: 0;
}
.house.col--3 {
width: 68px;
}
.house.col--3 .facade,
.house.col--3 .entry {
display: flex;
flex-wrap: wrap;
}
.house.col--3 .facade > *:nth-child(3n),
.house.col--3 .entry > *:nth-child(3n) {
margin-right: 0;
}
.house.col--3 .facade > *:nth-last-child(-n+3),
.house.col--3 .entry > *:nth-last-child(-n+3) {
margin-bottom: 0;
}
.house--1 {
background-color: #F9C068;
}
.house--1 .roof-extension {
position: relative;
background-color: #F9C068;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.house--1 .roof-extension:before {
background-color: #F9C068;
border-color: transparent transparent #F9C068 transparent;
}
.house--1 .roof-window {
background-color: #f1960a;
overflow: hidden;
box-shadow: inset 4px -4px 0 #1F2A48;
}
.house--1 .chimney {
background-color: #F9C068;
box-shadow: 4px 0 0 #1F2A48;
}
.house--1 .window,
.house--1 .door {
position: relative;
background-color: #f1960a;
box-shadow: inset 4px -4px 0 #1F2A48;
}
.house--1 .door {
box-shadow: 0 2px 0 #1F2A48, inset 4px -4px 0 #1F2A48;
}
.house--1 .door:before {
background-color: #1F2A48;
}
.house--1 .door:before {
background-color: #1F2A48;
}
.house--2,
.house--7 {
background-color: #F5483A;
}
.house--2 .roof-extension,
.house--7 .roof-extension {
position: relative;
background-color: #F5483A;
-webkit-transform: translate3d(0, 0, 0);
transform: tr