<!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 + SVG海岛浮标</title>
<style>
html {
width: 100%;
height: 100%;
}
body {
position: relative;
width: 100%;
height: 100%;
margin: 0;
background-color: #005d7b;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
}
.buoy-container {
position: absolute;
width: 100%;
top: 12%;
bottom: 45%;
-webkit-animation: bob 3.1s infinite;
animation: bob 3.1s infinite;
}
.buoy {
position: absolute;
display: inline-block;
height: 100%;
bottom: 0;
right: 15%;
-webkit-animation: swing 4.4s infinite;
animation: swing 4.4s infinite;
}
.waves {
position: absolute;
width: 120%;
left: -6%;
background-color: transparent;
background-image: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2064%2064%22%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M50.542%2013.9C46.355%208.7%2041.57%202.8%2032%202.8c-9.57%200-14.355%205.9-18.542%2011.1C9.57%2018.8%206.48%2022.6%200%2022.6v6.6c9.57%200%2014.355-5.9%2018.542-11.1C22.43%2013.2%2025.52%209.4%2032%209.4s9.47%203.8%2013.458%208.7C49.645%2023.3%2054.43%2029.2%2064%2029.2v-6.6c-6.48%200-9.57-3.8-13.458-8.7z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E);
background-size: 10% auto;
-webkit-animation: oscillate 6s infinite;
animation: oscillate 6s infinite;
}
@media (orientation: landscape) {
.waves {
background-size: 6% auto;
}
}
@media (max-width: 400px) {
.waves {
background-size: 12% auto;
}
}
.rear-waves {
top: -10%;
bottom: 47%;
background-position: center bottom;
}
.front-waves {
top: 53.25%;
bottom: 0;
background-position: center top;
}
.alternate {
left: -5.75%;
background-image: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2064%2064%22%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M50.542%2045.9C46.355%2040.7%2041.57%2034.8%2032%2034.8c-9.57%200-14.355%205.9-18.542%2011.1C9.57%2050.8%206.48%2054.6%200%2054.6v6.6c9.57%200%2014.355-5.9%2018.542-11.1C22.43%2045.2%2025.52%2041.4%2032%2041.4s9.47%203.8%2013.458%208.7C49.645%2055.3%2054.43%2061.2%2064%2061.2v-6.6c-6.48%200-9.57-3.8-13.458-8.7z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E);
-webkit-animation: oscillate 6s infinite;
animation: oscillate 6s infinite;
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
.waves-mask {
top: 52.25%;
bottom: 0;
background-image: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2064%2064%22%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M50.7%2028.8c-4.2-5.2-9-11.1-18.6-11.1-9.6%200-14.4%205.9-18.6%2011.1-3.9%204.9-7%208.7-13.5%208.7v6.6c9.6%200%2014.4-5.9%2018.6-11.1%203.9-4.9%207-8.7%2013.5-8.7s9.5%203.8%2013.5%208.7c4.2%205.2%209%2011.1%2018.6%2011.1v-6.6c-6.5%200-9.6-3.8-13.5-8.7z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22nonzero%22%2F%3E%3Cpath%20d%3D%22M64%2019.798V64H0V19.8c.14-.002.28-.004.418-.01.125-.006.25-.015.374-.026.537-.055%201.066-.167%201.564-.38.828-.355%201.534-.95%202.175-1.572.824-.8%201.563-1.685%202.29-2.573.55-.676%201.09-1.36%201.637-2.037%201.254-1.543%202.526-3.072%203.91-4.5%201.86-1.92%203.92-3.656%206.212-5.04%202.068-1.25%204.31-2.202%206.65-2.81C27.47.267%2029.785%200%2032.1%200s4.63.268%206.87.852c2.187.57%204.29%201.438%206.245%202.57%201.374.796%202.672%201.72%203.89%202.737%201.107.922%202.147%201.92%203.135%202.97%201.38%201.463%202.66%203.02%203.92%204.588.353.44.704.883%201.06%201.323.21.26.422.52.636.777.65.773%201.315%201.54%202.056%202.226.634.588%201.338%201.13%202.157%201.43.618.227%201.275.308%201.93.325z%22%20fill%3D%22%23005D7B%22%2F%3E%3C%2Fsvg%3E);
background-color: transparent;
background-position: center top;
}
@-webkit-keyframes bob {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
50% {
-webkit-transform: translate(0, 8px);
transform: translate(0, 8px);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes bob {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
50% {
-webkit-transform: translate(0, 8px);
transform: translate(0, 8px);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@-webkit-keyframes swing {
0% {
-webkit-transform: rotate(-7deg);
transform: rotate(-7deg);
-webkit-transform-origin: 50% 85%;
transform-origin: 50% 85%;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
50% {
-webkit-transform: rotate(7deg);
transform: rotate(7deg);
-webkit-transform-origin: 50% 85%;
transform-origin: 50% 85%;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform: rotate(-7deg);
transform: rotate(-7deg);
-webkit-transform-origin: 50% 85%;
transform-origin: 50% 85%;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes swing {
0% {
-webkit-transform: rotate(-7deg);
transform: rotate(-7deg);
-webkit-transform-origin: 50% 85%;
transform-origin: 50% 85%;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
50% {
-webkit-transform: rotate(7deg);
transform: rotate(7deg);
-webkit-transform-origin: 50% 85%;
transform-origin: 50% 85%;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform: rotate(-7deg);
transform: rotate(-7deg);
-webkit-transform-origin: 50% 85%;
transform-origin: 50% 85%;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@-webkit-keyframes oscillate {
0% {
-webkit-transform: translate(-0.25%, 0px);
transform: translate(-0.25%, 0px);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}