Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <div class="css_lab">
	<div class="sky">
		<div></div><div></div><div></div>
	</div>
	<div class="sea">
		<p class="sun_set_sea"></p>
		<div></div><div></div><div></div>
		<div></div><div></div><div></div>
		<div></div><div></div><div></div>
		<div></div><div></div><div></div>
		<div></div><div></div><div></div>
		<div></div><div></div><div></div>
		<div></div><div></div><div></div>
		<div></div><div></div><div></div>
		<div></div><div></div><div></div>
		<div></div><div></div>
	</div>
	<div class="mountain1">
		<div></div><div></div>
	</div>
	<div class="mountain2">
		<div></div><div></div>
	</div>
	<div class="mountain3">
		<div></div><div></div>
	</div>
	<div class="bird">
		<div class="bird1"><div></div><div></div><div></div></div>
		<div class="bird2"><div></div><div></div><div></div></div>
		<div class="bird3"><div></div><div></div><div></div></div>
	</div>
	<div class="ship">
		<div></div><div></div><div></div>
	</div>
	<div class="plane">
		<div></div><div></div><div></div>
	</div>
	<div class="tree"></div>
</div>
!

CSS 

              
                html,
body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}
.css_lab{
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
	top:0;
	left:0;
}
.css_lab *{
	position:absolute;
	margin:0;
	padding:0;
}
.css_lab *:before,
.css_lab *:after{
	content:"";
	display:block;
	position:absolute;
}
.sky{
	width:100%;
	height:70%;
	min-height:200px;
	top:0;
	left:0;
	overflow:hidden;
}
.sky:before{
	width:1000px;
	height:1000px;
	bottom:0;
	left:50%;
	margin-left:-700px;
	border-radius:50%;
	background: -webkit-radial-gradient(center, ellipse, rgba(250,230,180,1) 0%,rgba(250,230,180,1) 5%,rgba(252,218,166,1) 6%,rgba(252,218,166,1) 15%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 100%);
	background: -o-radial-gradient(center, ellipse, rgba(250,230,180,1) 0%,rgba(250,230,180,1) 5%,rgba(252,218,166,1) 6%,rgba(252,218,166,1) 15%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 100%);
	background: radial-gradient(ellipse at center, rgba(250,230,180,1) 0%,rgba(250,230,180,1) 5%,rgba(252,218,166,1) 6%,rgba(252,218,166,1) 15%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 100%);
	-webkit-transform-origin:left bottom;
	    -ms-transform-origin:left bottom;
	        transform-origin:left bottom;
	-webkit-transform:  rotate(50deg) translate3d(0,0,0);
	        transform:  rotate(50deg) translate3d(0,0,0);
}
.sea .sun_set_sea{
	top:0px;
	left:50%;
	width:100px;
	height:100%;
	margin-left:-50px;
	background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)),color-stop(10%, rgba(255,199,147,1)),color-stop(35%, rgba(255,199,147,1)),color-stop(40%, rgba(250,230,180,1)), color-stop(60%, rgba(250,230,180,1)), color-stop(65%, rgba(255,199,147,1)), color-stop(90%, rgba(255,199,147,1)), to(rgba(255,255,255,0)));
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,199,147,1) 10%,rgba(255,199,147,1) 35%,rgba(250,230,180,1) 40%, rgba(250,230,180,1) 60%, rgba(255,199,147,1) 65%, rgba(255,199,147,1) 90%, rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,199,147,1) 10%,rgba(255,199,147,1) 35%,rgba(250,230,180,1) 40%, rgba(250,230,180,1) 60%, rgba(255,199,147,1) 65%, rgba(255,199,147,1) 90%, rgba(255,255,255,0) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,199,147,1) 10%,rgba(255,199,147,1) 35%,rgba(250,230,180,1) 40%, rgba(250,230,180,1) 60%, rgba(255,199,147,1) 65%, rgba(255,199,147,1) 90%, rgba(255,255,255,0) 100%);
	border-radius:0;
	border:0;
	opacity:0;
}
.sky div:nth-child(1):before,
.sky div:nth-child(1):after,
.sky div:nth-child(3):after{
	width:2px;
	height:2px;
	top:0;
	left:0;
	border-radius:50%;
}
.sky div:nth-child(3){
	width:100%;
	height:90%;
	top:0;
	left:0;
	overflow:hidden;
}
.sky div:nth-child(3):after{
	opacity:0;
	-webkit-box-shadow:	1538px 558px 0 #fff,	1845px 202px 0 #fff,	637px 609px 0 #fff,	1156px 697px 0 #fff,	1873px 391px 0 #fff,	963px 487px 0 #fff,	1987px 696px 0 #fff,	1296px 65px 0 #fff,	803px 622px 0 #fff,	315px 412px 0 #fff,	1280px 577px 0 #fff,	1632px 273px 0 #fff,	768px 369px 0 #fff,	1051px 237px 0 #fff,	13px 583px 0 #fff,	1259px 515px 0 #fff,	50px 544px 0 #fff,	1292px 386px 0 #fff,	1095px 241px 0 #fff,	1804px 156px 0 #fff,	1839px 339px 0 #fff,	954px 268px 0 #fff,	953px 639px 0 #fff,	1600px 87px 0 #fff,	1426px 615px 0 #fff,	1405px 671px 0 #fff,	694px 247px 0 #fff,	1760px 363px 0 #fff,	1715px 512px 0 #fff,	1128px 284px 0 #fff,	282px 605px 0 #fff,	1280px 135px 0 #fff,	1491px 116px 0 #fff,	1020px 200px 0 #fff,	1020px 205px 0 #fff,	1554px 288px 0 #fff,	1591px 300px 0 #fff,	682px 177px 0 #fff,	758px 190px 0 #fff,	300px 98px 0 #fff,	196px 64px 0 #fff,	889px 597px 0 #fff,	741px 312px 0 #fff,	353px 227px 0 #fff,	1460px 159px 0 #fff,	183px 519px 0 #fff,	1869px 610px 0 #fff,	74px 512px 0 #fff,	35px 476px 0 #fff,	1945px 383px 0 #fff;
	        box-shadow:	1538px 558px 0 #fff,	1845px 202px 0 #fff,	637px 609px 0 #fff,	1156px 697px 0 #fff,	1873px 391px 0 #fff,	963px 487px 0 #fff,	1987px 696px 0 #fff,	1296px 65px 0 #fff,	803px 622px 0 #fff,	315px 412px 0 #fff,	1280px 577px 0 #fff,	1632px 273px 0 #fff,	768px 369px 0 #fff,	1051px 237px 0 #fff,	13px 583px 0 #fff,	1259px 515px 0 #fff,	50px 544px 0 #fff,	1292px 386px 0 #fff,	1095px 241px 0 #fff,	1804px 156px 0 #fff,	1839px 339px 0 #fff,	954px 268px 0 #fff,	953px 639px 0 #fff,	1600px 87px 0 #fff,	1426px 615px 0 #fff,	1405px 671px 0 #fff,	694px 247px 0 #fff,	1760px 363px 0 #fff,	1715px 512px 0 #fff,	1128px 284px 0 #fff,	282px 605px 0 #fff,	1280px 135px 0 #fff,	1491px 116px 0 #fff,	1020px 200px 0 #fff,	1020px 205px 0 #fff,	1554px 288px 0 #fff,	1591px 300px 0 #fff,	682px 177px 0 #fff,	758px 190px 0 #fff,	300px 98px 0 #fff,	196px 64px 0 #fff,	889px 597px 0 #fff,	741px 312px 0 #fff,	353px 227px 0 #fff,	1460px 159px 0 #fff,	183px 519px 0 #fff,	1869px 610px 0 #fff,	74px 512px 0 #fff,	35px 476px 0 #fff,	1945px 383px 0 #fff;}
.sky div:nth-child(1){
	width:150px;
	height:200%;
	left:50%;
	top:-50%;
	margin-left:-75px;
	overflow:hidden;
	-webkit-transform:  rotate(50deg);
	    -ms-transform:  rotate(50deg);
	        transform:  rotate(50deg);
}
.sky div:nth-child(1):before,
.sky div:nth-child(1):after{
	width:2px;
	height:2px;
	top:0px;
	left:1px;
	opacity:1;
	background:#fff;
}
.sky div:nth-child(1):after{
	left:148px;
}
.sky div:nth-child(2){
	width:100%;
	height:50%;
	left:0;
	bottom:0;
}
.sky div:nth-child(2):before,
.sky div:nth-child(2):after{
	width:100%;
	height:100%;
	opacity:0;
	bottom:0;
}
.sky div:nth-child(2):before{
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)),to(rgba(255,199,147,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,199,147,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,199,147,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,199,147,1) 100%);
}
.sky div:nth-child(2):after{
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)),to(rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	opacity:0.5;
}
.plane{
	opacity:0.5;
	width:100%;
	height:100px;
	bottom:60%;
	right:-50px;
	-webkit-transform:  rotate(2deg) translate3d(0,0,0);
	        transform:  rotate(2deg) translate3d(0,0,0);
}
.plane div:nth-child(2),
.plane div:nth-child(3){
	width:40px;
	height:7px;
	border-radius:50px 15px 50px 20px / 25px 0 30px 15px;
	background:#a9a9a9;
	top:100px;
	right:-40px;
}
.plane div:nth-child(2):before{
	width:0px;
	height:0;
	top:-10px;
	left:15px;
	border-top:10px solid rgba(0,0,0,0);
	border-bottom:5px solid rgba(0,0,0,0);
	border-right:5px solid #a9a9a9;
	-webkit-transform: skewX(-10deg);
	    -ms-transform: skewX(-10deg);
	        transform: skewX(-10deg);
}
.plane div:nth-child(2):after{
	width:0px;
	height:0px;
	top:-5px;
	right:0px;
	border-left:3px solid rgba(0,0,0,0);
	border-right:3px solid #a9a9a9;
	border-bottom:5px solid #a9a9a9;
}
.plane div:nth-child(1){
	width:100%;
	height:3px;
	top:103px;
	right:0px;
	overflow:hidden;
}
.plane div:nth-child(1):before{
	width:3px;
	height:3px;
	margin-right:-37px;
	background:#fff;
	background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,1)),to(rgba(255,255,255,0)));
	background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	right:0px;
}
.plane div:nth-child(3){
	background:none;
}
.plane div:nth-child(3):before,
.plane div:nth-child(3):after{
	opacity:1;
	width:5px;
	height:5px;
	bottom:-2px;
	left:15px;
	border-radius:50%;
	background:#f88;
}
.plane div:nth-child(3):after{
	left:36px;
	bottom:2px;
	background:#fff;
}
.sea{
	width:100%;
	height:30%;
	top:70%;
	left:0;
	background:rgba(0,0,10,0.1);
}
.sea div,
.sea div:before,
.sea div:after{
	width:20px;
	height:8px;
	border-radius:50%;
	border:0px solid rgba(0,0,0,0);
	border-bottom:2px solid #222;
}
.sea div{
	top:0;
	left:0;
	opacity:0.2;
}
.sea div:before{
	left:10px;
	top:10px;
}
.sea div:after{
	left:20px;
	top:20px;
}
.sea div:nth-child(2) {top:290px;left:964px;-webkit-animation:wave 3.2s ease 0.5s infinite;animation:wave 3.2s ease 0.5s infinite;}
.sea div:nth-child(2):before{top:290px;left:1356px;}
.sea div:nth-child(2):after{top:50px;left:1365px;-webkit-animation:;animation:}
.sea div:nth-child(3) {top:56px;left:557px;-webkit-animation:wave 3.3s ease 0.5s infinite;animation:wave 3.3s ease 0.5s infinite;}
.sea div:nth-child(3):before{top:160px;left:706px;}
.sea div:nth-child(3):after{top:168px;left:341px;-webkit-animation:;animation:}
.sea div:nth-child(4) {top:57px;left:981px;-webkit-animation:wave 3.4s ease 0.5s infinite;animation:wave 3.4s ease 0.5s infinite;}
.sea div:nth-child(4):before{top:296px;left:1656px;}
.sea div:nth-child(4):after{top:111px;left:736px;-webkit-animation:;animation:}
.sea div:nth-child(5) {top:207px;left:311px;-webkit-animation:wave 3.5s ease 0.5s infinite;animation:wave 3.5s ease 0.5s infinite;}
.sea div:nth-child(5):before{top:275px;left:1753px;}
.sea div:nth-child(5):after{top:261px;left:1302px;-webkit-animation:;animation:}
.sea div:nth-child(6) {top:163px;left:1506px;-webkit-animation:wave 3.6s ease 0.5s infinite;animation:wave 3.6s ease 0.5s infinite;}
.sea div:nth-child(6):before{top:178px;left:1590px;}
.sea div:nth-child(6):after{top:157px;left:858px;-webkit-animation:;animation:}
.sea div:nth-child(7) {top:299px;left:889px;-webkit-animation:wave 3.7s ease 0.5s infinite;animation:wave 3.7s ease 0.5s infinite;}
.sea div:nth-child(7):before{top:108px;left:715px;}
.sea div:nth-child(7):after{top:85px;left:1716px;-webkit-animation:;animation:}
.sea div:nth-child(8) {top:112px;left:450px;-webkit-animation:wave 3.8s ease 0.5s infinite;animation:wave 3.8s ease 0.5s infinite;}
.sea div:nth-child(8):before{top:205px;left:327px;}
.sea div:nth-child(8):after{top:136px;left:1250px;-webkit-animation:;animation:}
.sea div:nth-child(9) {top:106px;left:195px;-webkit-animation:wave 3.9s ease 0.5s infinite;animation:wave 3.9s ease 0.5s infinite;}
.sea div:nth-child(9):before{top:52px;left:689px;}
.sea div:nth-child(9):after{top:243px;left:399px;-webkit-animation:;animation:}
.sea div:nth-child(10) {top:142px;left:481px;-webkit-animation:wave 3.10s ease 0.5s infinite;animation:wave 3.10s ease 0.5s infinite;}
.sea div:nth-child(10):before{top:107px;left:735px;}
.sea div:nth-child(10):after{top:79px;left:502px;-webkit-animation:;animation:}
.sea div:nth-child(11) {top:75px;left:157px;-webkit-animation:wave 3.11s ease 0.5s infinite;animation:wave 3.11s ease 0.5s infinite;}
.sea div:nth-child(11):before{top:289px;left:1034px;}
.sea div:nth-child(11):after{top:58px;left:1116px;-webkit-animation:;animation:}
.sea div:nth-child(12) {top:74px;left:705px;-webkit-animation:wave 3.12s ease 0.5s infinite;animation:wave 3.12s ease 0.5s infinite;}
.sea div:nth-child(12):before{top:242px;left:84px;}
.sea div:nth-child(12):after{top:296px;left:620px;-webkit-animation:;animation:}
.sea div:nth-child(13) {top:193px;left:1641px;-webkit-animation:wave 3.13s ease 0.5s infinite;animation:wave 3.13s ease 0.5s infinite;}
.sea div:nth-child(13):before{top:69px;left:443px;}
.sea div:nth-child(13):after{top:281px;left:367px;-webkit-animation:;animation:}
.sea div:nth-child(14) {top:121px;left:776px;-webkit-animation:wave 3.14s ease 0.5s infinite;animation:wave 3.14s ease 0.5s infinite;}
.sea div:nth-child(14):before{top:249px;left:293px;}
.sea div:nth-child(14):after{top:139px;left:553px;-webkit-animation:;animation:}
.sea div:nth-child(15) {top:188px;left:1031px;-webkit-animation:wave 3.15s ease 0.5s infinite;animation:wave 3.15s ease 0.5s infinite;}
.sea div:nth-child(15):before{top:291px;left:1313px;}
.sea div:nth-child(15):after{top:298px;left:1408px;-webkit-animation:;animation:}
.sea div:nth-child(16) {top:263px;left:172px;-webkit-animation:wave 3.16s ease 0.5s infinite;animation:wave 3.16s ease 0.5s infinite;}
.sea div:nth-child(16):before{top:212px;left:192px;}
.sea div:nth-child(16):after{top:226px;left:1451px;-webkit-animation:;animation:}
.sea div:nth-child(17) {top:96px;left:1239px;-webkit-animation:wave 3.17s ease 0.5s infinite;animation:wave 3.17s ease 0.5s infinite;}
.sea div:nth-child(17):before{top:229px;left:1453px;}
.sea div:nth-child(17):after{top:84px;left:1717px;-webkit-animation:;animation:}
.sea div:nth-child(18) {top:266px;left:1263px;-webkit-animation:wave 3.18s ease 0.5s infinite;animation:wave 3.18s ease 0.5s infinite;}
.sea div:nth-child(18):before{top:283px;left:1284px;}
.sea div:nth-child(18):after{top:275px;left:1695px;-webkit-animation:;animation:}
.sea div:nth-child(19) {top:140px;left:1539px;-webkit-animation:wave 3.19s ease 0.5s infinite;animation:wave 3.19s ease 0.5s infinite;}
.sea div:nth-child(19):before{top:50px;left:353px;}
.sea div:nth-child(19):after{top:170px;left:305px;-webkit-animation:;animation:}
.sea div:nth-child(20) {top:231px;left:663px;-webkit-animation:wave 3.20s ease 0.5s infinite;animation:wave 3.20s ease 0.5s infinite;}
.sea div:nth-child(20):before{top:70px;left:80px;}
.sea div:nth-child(20):after{top:252px;left:1243px;-webkit-animation:;animation:}
.sea div:nth-child(21) {top:242px;left:160px;-webkit-animation:wave 3.21s ease 0.5s infinite;animation:wave 3.21s ease 0.5s infinite;}
.sea div:nth-child(21):before{top:91px;left:1193px;}
.sea div:nth-child(21):after{top:165px;left:761px;-webkit-animation:;animation:}
.sea div:nth-child(22) {top:74px;left:1571px;-webkit-animation:wave 3.22s ease 0.5s infinite;animation:wave 3.22s ease 0.5s infinite;}
.sea div:nth-child(22):before{top:219px;left:1170px;}
.sea div:nth-child(22):after{top:199px;left:1463px;-webkit-animation:;animation:}
.sea div:nth-child(23) {top:177px;left:1467px;-webkit-animation:wave 3.23s ease 0.5s infinite;animation:wave 3.23s ease 0.5s infinite;}
.sea div:nth-child(23):before{top:180px;left:842px;}
.sea div:nth-child(23):after{top:150px;left:802px;-webkit-animation:;animation:}
.sea div:nth-child(24) {top:122px;left:772px;-webkit-animation:wave 3.24s ease 0.5s infinite;animation:wave 3.24s ease 0.5s infinite;}
.sea div:nth-child(24):before{top:201px;left:1378px;}
.sea div:nth-child(24):after{top:280px;left:541px;-webkit-animation:;animation:}
.sea div:nth-child(25) {top:212px;left:172px;-webkit-animation:wave 3.25s ease 0.5s infinite;animation:wave 3.25s ease 0.5s infinite;}
.sea div:nth-child(25):before{top:77px;left:1160px;}
.sea div:nth-child(25):after{top:131px;left:1321px;-webkit-animation:;animation:}
.sea div:nth-child(26) {top:251px;left:1652px;-webkit-animation:wave 3.26s ease 0.5s infinite;animation:wave 3.26s ease 0.5s infinite;}
.sea div:nth-child(26):before{top:193px;left:186px;}
.sea div:nth-child(26):after{top:175px;left:1744px;-webkit-animation:;animation:}
.sea div:nth-child(27) {top:260px;left:87px;-webkit-animation:wave 3.27s ease 0.5s infinite;animation:wave 3.27s ease 0.5s infinite;}
.sea div:nth-child(27):before{top:219px;left:1088px;}
.sea div:nth-child(27):after{top:152px;left:938px;-webkit-animation:;animation:}
.sea div:nth-child(28) {top:131px;left:512px;-webkit-animation:wave 3.28s ease 0.5s infinite;animation:wave 3.28s ease 0.5s infinite;}
.sea div:nth-child(28):before{top:233px;left:1647px;}
.sea div:nth-child(28):after{top:137px;left:1525px;-webkit-animation:;animation:}
.sea div:nth-child(29) {top:116px;left:262px;-webkit-animation:wave 3.29s ease 0.5s infinite;animation:wave 3.29s ease 0.5s infinite;}
.sea div:nth-child(29):before{top:273px;left:1158px;}
.sea div:nth-child(29):after{top:282px;left:1562px;-webkit-animation:;animation:}
.sea div:nth-child(n+30){
	display:none;
}

.ship{
	width:70px;
	height:0;
	top:70.5%;
	margin-top:60px;
	left:-100px;
	background:rgba(0,0,0,0);
	border-left:6px solid rgba(0,0,0,0);
	border-right:15px solid rgba(0,0,0,0);
	border-top:5px solid #545465;
}
.ship:after{
	width:19px;
	height:5px;
	top:-9px;
	left:4px;
	background:#E5E4DF;
}
.ship:before{
	width:6px;
	height:8px;
	top:-18px;
	left:5px;
	background:#9B9A95;
	-webkit-box-shadow:10px 0 0 #9B9A95;
	        box-shadow:10px 0 0 #9B9A95;
}
.ship div:nth-child(1){
	width:70px;
	height:0;
	top:0px;
	left:-5px;
	opacity:0;
	border-left:6px solid rgba(0,0,0,0);
	border-right:15px solid rgba(0,0,0,0);
	border-bottom:5px solid rgba(0,0,0,0.1);
}
.ship div:nth-child(1):before{
	width:19px;
	height:5px;
	top:5px;
	left:2px;
	background:rgba(0,0,0,0.1);
}
.ship div:nth-child(1):after{
	width:6px;
	height:8px;
	top:10px;
	left:4px;
	background: rgba(0,0,0,0.1);
	-webkit-box-shadow:10px 0 0 rgba(0,0,0,0.1);
	        box-shadow:10px 0 0 rgba(0,0,0,0.1);
}
.ship div:nth-child(2){
	width:10px;
	height:2px;
	top:-1px;
	left:-80px;
	opacity:0.2;
	background:rgba(255,255,255,0.5);
	border:0 solid rgba(0,0,0,0);
	border-radius:1px 1px 0 0/1px 0px 0 0;
	-webkit-box-shadow:70px 0 0 rgba(255,255,255,0.5),60px 0 0 rgba(255,255,255,0.5),
			20px 0 0 rgba(255,255,255,0.5),30px 0 0 rgba(255,255,255,0.5),
			40px 0 0 rgba(255,255,255,0.5),50px 0 0 rgba(255,255,255,0.5);
	        box-shadow:70px 0 0 rgba(255,255,255,0.5),60px 0 0 rgba(255,255,255,0.5),
			20px 0 0 rgba(255,255,255,0.5),30px 0 0 rgba(255,255,255,0.5),
			40px 0 0 rgba(255,255,255,0.5),50px 0 0 rgba(255,255,255,0.5);
}
.ship div:nth-child(3){
	background:none;
}
.ship div:nth-child(3):before,
.ship div:nth-child(3):after{
	opacity:1;
	width:5px;
	height:5px;
	top:-22px;
	left:5px;
	border-radius:50%;
	background:#fee;
	-webkit-box-shadow:11px 0 0 #fee;
	        box-shadow:11px 0 0 #fee;
}
.ship div:nth-child(3):after{
	left:60px;
	top:-7px;
	background:#dfe;
	-webkit-box-shadow:11px 0 0 #fff;
	        box-shadow:11px 0 0 #fff;
}
.mountain1{
	width:340px;
	height:10px;
	background:#A9A7A3;
	top:70.5%;
	opacity:0.5;
	right:180px;
	border-radius: 200px 200px 0 0/ 60px 60px 0 0;
}
.mountain1:before{
	width:600px;
	height:20px;
	background:#A9A7A3;
	top:10px;
	left:-60px;
	border-radius:220px 260px 0 0/70px 80px 0 0;
}
.mountain1:after{
	width:380px;
	background:#83827D;
	height:20px;
	top:25px;
	left:250px;
	border-radius:200px 200px 0 0/60px 60px 0 0;
}
.mountain1 div{
	width:600px;
	height:50%;
	width:600px;
	opacity:0;
	background:rgba(0,0,10,0.1);
	top:30px;
	left:-60px;
	border-radius:0 0 220px 260px / 0 0 70px 80px;
}
.mountain1 div:before{
	width:380px;
	background:rgba(0,0,10,0.1);
	height:90%;
	top:15px;
	left:310px;
	border-radius: 0 0 200px 200px/ 0 0 60px 60px;
}
.mountain2{
	width:100px;
	background:#A9A7A3;
	height:30px;
	top:71%;
	opacity:0.5;
	right:840px;
	border-radius:125px 225px 0 0/80px 120px 0 0;
}
.mountain2:before{
	width:260px;
	height:20px;
	background:#A9A7A3;
	left:-210px;
	bottom:0;
	border-radius:400px 120px 0 0/60px 55px 0 0;
}
.mountain2 div{
	width:100px;
	height:50%;
	opacity:0.5;
	top:30px;
	right:0px;
	opacity:0;
	border-radius: 0 0 225px 125px/ 0 0 120px 80px;
}
.mountain2 div:after{
	width:100px;
	background:rgba(0,0,10,0.1);
	height:100%;
	top:0;
	border-radius: 0 0 225px 125px/ 0 0 120px 80px;
}
.mountain2 div:before{
	width:210px;
	height:50%;
	background:rgba(0,0,10,0.1);
	left:-210px;
	top:0px;
	border-radius:0 0 0px 400px / 0 0 0px 60px;
}
.mountain3{
	width:140px;
	height:20px;
	right:730px;
	overflow:hidden;
	bottom:30%;
}
.mountain3:before{
	width:140px;
	height:40px;
	top:5px;
	background:rgba(50,50,50,0.2);
	-webkit-transform:skewX(-15deg);
	    -ms-transform:skewX(-15deg);
	        transform:skewX(-15deg);
	opacity:0.5;
	border-radius:200px 200px 0 0/80px 120px 0 0;
}
.bird1,
.bird2,
.bird3{
	width:20px;
	height:10px;
	border-radius:0px 10px 15px 20px/0px 0px 10px 10px;
	background:#363636;
	bottom:35%;
	left:20%;
	-webkit-transform:rotate(-10deg) translate3d(0,0,0);
	        transform:rotate(-10deg) translate3d(0,0,0);
}
.bird2{
	margin-left:100px;
	bottom:36%;
        -webkit-transform: scale(0.9) rotate(-7deg);
            -ms-transform: scale(0.9) rotate(-7deg);
                transform: scale(0.9) rotate(-7deg);
}
.bird3{
	margin-left:-80px;
	bottom:33%;
        -webkit-transform: scale(0.5) rotate(-12deg);
            -ms-transform: scale(0.5) rotate(-12deg);
                transform: scale(0.5) rotate(-12deg);
}
.bird1:before,
.bird2:before,
.bird3:before{
	width:10px;
	height:8px;
	top:0;
	right:-6px;
	border-radius:0px 15px 20px 0px/ 0 10px 9px 0;
	background:#363636;
}
.bird1:after,
.bird2:after,
.bird3:after{
	width:0;
	height:3px;
	border:1px solid rgba(0,0,0,0);
	border-top:2px solid #363636;
	border-left:8px solid #363636;
	left:-7px;
	top:-0.5px;
	-webkit-transform:  rotate(10deg);
	    -ms-transform:  rotate(10deg);
	        transform:  rotate(10deg);
}
.bird div div:nth-child(1){
	width:20px;
	height:30px;
	top:-10px;
	right:6px;
	-webkit-transform : perspective(30px) rotateX(-10deg);
	        transform : perspective(30px) rotateX(-10deg);
}
.bird div div:nth-child(1):before{
	width:10px;
	height:15px;
	background:#363636;
	top:0px;
	right:0px;
	-webkit-transform:skewX(20deg);
	    -ms-transform:skewX(20deg);
	        transform:skewX(20deg);
}
.bird div div:nth-child(1):after{
	width:10px;
	height:10px;
	background:#363636;
	top:-10px;
	right:7px;
	border-radius:10px 10px 0px 0px;
	-webkit-transform:skewX(40deg);
	    -ms-transform:skewX(40deg);
	        transform:skewX(40deg);
}
.bird div div:nth-child(2){
	width:20px;
	height:30px;
	top:-10px;
	right:5px;
	opacity:0.8;
}
.bird div div:nth-child(2):before{
	width:8px;
	height:12px;
	background:#363636;
	top:0px;
	right:-4px;
	-webkit-transform:skewX(3deg);
	    -ms-transform:skewX(3deg);
	        transform:skewX(3deg);
}
.bird div div:nth-child(2):after{
	width:8px;
	height:8px;
	background:#363636;
	top:-7px;
	right:-4px;
	border-radius:10px 10px 0px 0px;
	-webkit-transform:skewX(-12deg);
	    -ms-transform:skewX(-12deg);
	        transform:skewX(-12deg);
}
.bird div div:nth-child(3){
	width:0;
	height:0;
	border:0px solid rgba(0,0,0,0);
	border-top:3px solid rgba(0,0,0,0);
	border-left:7px solid #363636;
	right:-12px;
	top:3px;
	-webkit-transform:  rotate(-3deg);
	    -ms-transform:  rotate(-3deg);
	        transform:  rotate(-3deg);
}
.tree{
	width:100px;
	background:#789;
	height:40px;
	bottom:-10px;
	left:100px;
	border-radius:100px 225px 0 0/100px 120px 0 0;
	-webkit-box-shadow:-135px 2px 0 #789,-90px -10px 0 #789,-20px -10px 0 #789,20px -5px 0 #789,35px 0px 0 #789,90px -5px 0 #789,135px 13px 0 #789,200px 20px 0 #789;
	        box-shadow:-135px 2px 0 #789,-90px -10px 0 #789,-20px -10px 0 #789,20px -5px 0 #789,35px 0px 0 #789,90px -5px 0 #789,135px 13px 0 #789,200px 20px 0 #789;
}
.tree:before{
	width:5px;
	height:10px;
	background:#665;
	bottom:20px;
	left:20px;
	border-radius:50%;
	-webkit-transform:  rotate(5deg);
	    -ms-transform:  rotate(5deg);
	        transform:  rotate(5deg);
	-webkit-box-shadow:-75px 10px 0 #665,-50px 10px 0 #665,20px -5px 0 #665,35px 0px 0 #665,90px -5px 0 #665,135px -10px 0 #665,200px -10px 0 #665;
	        box-shadow:-75px 10px 0 #665,-50px 10px 0 #665,20px -5px 0 #665,35px 0px 0 #665,90px -5px 0 #665,135px -10px 0 #665,200px -10px 0 #665;
}
.tree:after{
	width:5px;
	height:8px;
	background:#998;
	bottom:20px;
	left:40px;
	border-radius:50%;
	-webkit-transform:  rotate(5deg);
	    -ms-transform:  rotate(5deg);
	        transform:  rotate(5deg);
	-webkit-box-shadow:-105px 5px 0 #998,-50px 0px 0 #998,35px -5px 0 #998,20px 0px 0 #998,90px 2px 0 #998,135px 10px 0 #998,200px -5px 0 #998;
	        box-shadow:-105px 5px 0 #998,-50px 0px 0 #998,35px -5px 0 #998,20px 0px 0 #998,90px 2px 0 #998,135px 10px 0 #998,200px -5px 0 #998;
}
.css_lab{
	-webkit-animation:sky_color 60s linear infinite;
	        animation:sky_color 60s linear infinite;
}
@-webkit-keyframes sky_color{
	0%,100%{
		background-color:#fff;
	}25%,40%{
		background-color:#DADBEF;
	}50%{
		background-color:#fdd;
	}60%{
		background-color:#779;
	}80%{
		background-color:#557;
	}
}
@keyframes sky_color{
	0%,100%{
		background-color:#fff;
	}25%,40%{
		background-color:#DADBEF;
	}50%{
		background-color:#fdd;
	}60%{
		background-color:#779;
	}80%{
		background-color:#557;
	}
}
.sky div:nth-child(3):after,
.sky div:nth-child(1){
	-webkit-animation:stars 60s linear infinite;
	        animation:stars 60s linear infinite;
}
@-webkit-keyframes stars{
	60%{
		opacity:1;
	}0%,50%,100%{
		opacity:0;
	}
}
@keyframes stars{
	60%{
		opacity:1;
	}0%,50%,100%{
		opacity:0;
	}
}
.sky div:nth-child(1){
	-webkit-animation:wide_stars 5s linear infinite;
	        animation:wide_stars 5s linear infinite;
}
@-webkit-keyframes wide_stars{
	50%{
		margin-left:200px;
		width:100px;
	}100%{
		margin-left:100px;
		width:300px;
	}
}
@keyframes wide_stars{
	50%{
		margin-left:200px;
		width:100px;
	}100%{
		margin-left:100px;
		width:300px;
	}
}
.sky div:nth-child(1):before{
	-webkit-animation:mov_stars 3s linear 0s infinite;
	        animation:mov_stars 3s linear 0s infinite;
}
.sky div:nth-child(1):after{
	-webkit-animation:mov_stars 3s linear .5s infinite;
	        animation:mov_stars 3s linear .5s infinite;
}
@-webkit-keyframes mov_stars{
	0%{
		opacity:1;
		top:-2px;
	}30%{
		opacity:1;
		top:1000px;
	}40%,100%{
		top:2000px;
		opacity:0;
	}
}
@keyframes mov_stars{
	0%{
		opacity:1;
		top:-2px;
	}30%{
		opacity:1;
		top:1000px;
	}40%,100%{
		top:2000px;
		opacity:0;
	}
}
.sky:before{
	-webkit-animation:san_set 60s linear infinite;
	        animation:san_set 60s linear infinite;
}
@-webkit-keyframes san_set{
	0%{
		opacity:0;
		-webkit-transform:  rotate(-120deg);
		        transform:  rotate(-120deg);
	}50%{
		opacity:1;
	}30%,60%{
		opacity:0;
	}100%{
		opacity:0;
		-webkit-transform:  rotate(240deg);
		        transform:  rotate(240deg);
	}
}
@keyframes san_set{
	0%{
		opacity:0;
		-webkit-transform:  rotate(-120deg);
		        transform:  rotate(-120deg);
	}50%{
		opacity:1;
	}30%,60%{
		opacity:0;
	}100%{
		opacity:0;
		-webkit-transform:  rotate(240deg);
		        transform:  rotate(240deg);
	}
}
.sky div:nth-child(2):before{
	-webkit-animation:sky_light1 60s linear infinite;
	        animation:sky_light1 60s linear infinite;
}
@-webkit-keyframes sky_light1{
	0%,39%,55%,100%{
		height:0;
		opacity:0;
	}40%{
		height:100%;
		opacity:0;
	}50%{
		height:100%;
		opacity:1;
	}
}
@keyframes sky_light1{
	0%,39%,55%,100%{
		height:0;
		opacity:0;
	}40%{
		height:100%;
		opacity:0;
	}50%{
		height:100%;
		opacity:1;
	}
}
.sea .sun_set_sea{
	-webkit-animation:sun_set2 60s linear infinite;
	        animation:sun_set2 60s linear infinite;
}
@-webkit-keyframes sun_set2{
	0%,39%,70%,100%{
		width:0;
		opacity:0;
	}40%{
		width:100px;
		margin-left:-60px;
		opacity:0;
	}45%{
		width:400px;
		margin-left:-190px;
		opacity:0.5;
	}48%{
		width:400px;
		margin-left:-190px;
		opacity:0;
	}
}
@keyframes sun_set2{
	0%,39%,70%,100%{
		width:0;
		opacity:0;
	}40%{
		width:100px;
		margin-left:-60px;
		opacity:0;
	}45%{
		width:400px;
		margin-left:-190px;
		opacity:0.5;
	}48%{
		width:400px;
		margin-left:-190px;
		opacity:0;
	}
}
.sky div:nth-child(2):after{
	-webkit-animation:sky_light2 60s linear infinite;
	        animation:sky_light2 60s linear infinite;
}
@-webkit-keyframes sky_light2{
	5%,100%{
		height:100%;
		opacity:0;
	}73%{
		height:0%;
		opacity:0;
	}93%{
		height:0%;
		opacity:0.5;
	}
}
@keyframes sky_light2{
	5%,100%{
		height:100%;
		opacity:0;
	}73%{
		height:0%;
		opacity:0;
	}93%{
		height:0%;
		opacity:0.5;
	}
}
.plane div:nth-child(2),
.plane div:nth-child(3){
	-webkit-animation:mov_plane1 120s linear 20s infinite;
	        animation:mov_plane1 120s linear 20s infinite;
}
.plane div:nth-child(1):before{
	-webkit-animation:mov_plane2 120s linear 20s infinite;
	        animation:mov_plane2 120s linear 20s infinite;
}
@-webkit-keyframes mov_plane1{
	0%{
		right:-50px;
	}40%{
		right:2000px;
	}100%{
		opacity:0;
		right:4000px;
	}
}
@keyframes mov_plane1{
	0%{
		right:-50px;
	}40%{
		right:2000px;
	}100%{
		opacity:0;
		right:4000px;
	}
}
@-webkit-keyframes mov_plane2{
	0%{
		width:0;
		right:0px;
	}40%{
		width:1000px;
		right:1000px;
	}100%{
		width:1000px;
		right:2000px;
		opacity:0;
	}
}
@keyframes mov_plane2{
	0%{
		width:0;
		right:0px;
	}40%{
		width:1000px;
		right:1000px;
	}100%{
		width:1000px;
		right:2000px;
		opacity:0;
	}
}
.plane div:nth-child(3):before{
	-webkit-animation:mov_plane3 60s linear infinite;
	        animation:mov_plane3 60s linear infinite;
}
.plane div:nth-child(3):after{
	-webkit-animation:mov_plane3 60s linear 0.1s infinite;
	        animation:mov_plane3 60s linear 0.1s infinite;
}
@-webkit-keyframes mov_plane3{
	0%,50%,54%,58%,62%,66%,70%,74%,78%,82%,86%,90%,94%,100%{
		opacity:0;
	}52%,56%,60%,64%,68%,72%,76%,80%,84%,88%,92%,96%{
		opacity:1;
	}
}
@keyframes mov_plane3{
	0%,50%,54%,58%,62%,66%,70%,74%,78%,82%,86%,90%,94%,100%{
		opacity:0;
	}52%,56%,60%,64%,68%,72%,76%,80%,84%,88%,92%,96%{
		opacity:1;
	}
}
.mountain1 div,
.mountain2 div{
	-webkit-animation:moun-shadow 60s linear infinite;
	        animation:moun-shadow 60s linear infinite;
}
@-webkit-keyframes moun-shadow{
	30%{
		opacity:1;
		height:100%;
	}45%{
		opacity:1;
		height:160%;
	}50%{
		opacity:0;
		height:200%;
	}0%,60%{
		opacity:0;
		height:50%;
	}
}
@keyframes moun-shadow{
	30%{
		opacity:1;
		height:100%;
	}45%{
		opacity:1;
		height:160%;
	}50%{
		opacity:0;
		height:200%;
	}0%,60%{
		opacity:0;
		height:50%;
	}
}
.ship{
	-webkit-animation:mov_ship 180s linear 0s infinite;
	        animation:mov_ship 180s linear 0s infinite;
}
@-webkit-keyframes mov_ship{
	0%{
		left:-100px;
	}50%{
		left:2000px;
	}100%{
		left:4000px;
	}
}
@keyframes mov_ship{
	0%{
		left:-100px;
	}50%{
		left:2000px;
	}100%{
		left:4000px;
	}
}
.ship div:nth-child(1){
	-webkit-animation:ship-shadow 60s linear infinite;
	        animation:ship-shadow 60s linear infinite;
}
@-webkit-keyframes ship-shadow{
	30%,45%{
		opacity:1;
	}0%,50%{
		opacity:0;
	}
}
@keyframes ship-shadow{
	30%,45%{
		opacity:1;
	}0%,50%{
		opacity:0;
	}
}
.ship div:nth-child(3):before{
	-webkit-animation:mov_plane3 60s linear 0s infinite;
	        animation:mov_plane3 60s linear 0s infinite;
}
.ship div:nth-child(3):after{
	-webkit-animation:mov_plane3 60s linear 0.1s infinite;
	        animation:mov_plane3 60s linear 0.1s infinite;
}
@-webkit-keyframes wave{
	30%,80%{
		margin-top:2px;
		border-bottom:1px solid #fff;
	}0%,50%{
		margin-top:0px;
		border-bottom:2px solid #222;
	}
}
@keyframes wave{
	30%,80%{
		margin-top:2px;
		border-bottom:1px solid #fff;
	}0%,50%{
		margin-top:0px;
		border-bottom:2px solid #222;
	}
}
.bird{
	width:100%;
	height:100%;
	opacity:0;
	-webkit-animation:morning_bird 60s linear 21s infinite;
	        animation:morning_bird 60s linear 21s infinite;
}
@-webkit-keyframes morning_bird{
	0%,50%{
		opacity:0;
	}51%,100%{
		opacity:1;
	}
}
@keyframes morning_bird{
	0%,50%{
		opacity:0;
	}51%,100%{
		opacity:1;
	}
}
.bird1,
.bird2,
.bird3{
	opacity:0.5;
	-webkit-animation:fly_bird 60s linear 21s infinite;
	        animation:fly_bird 60s linear 21s infinite;
}
@-webkit-keyframes fly_bird{
	0%{
		left:-2000px;
	}10%,30%,50%,70%,90%{
		margin-bottom:10px;
	}20%,40%,60%,80%{
		margin-bottom:0px;
	}100%{
		left:2000px;
	}
}
@keyframes fly_bird{
	0%{
		left:-2000px;
	}10%,30%,50%,70%,90%{
		margin-bottom:10px;
	}20%,40%,60%,80%{
		margin-bottom:0px;
	}100%{
		left:2000px;
	}
}
.bird1 div:nth-child(1),
.bird1 div:nth-child(2){
	-webkit-animation:mov_wing 4s linear 1.2s infinite;
	        animation:mov_wing 4s linear 1.2s infinite;
}
.bird2 div:nth-child(1),
.bird2 div:nth-child(2){
	-webkit-animation:mov_wing 4s linear 0s infinite;
	        animation:mov_wing 4s linear 0s infinite;
}
.bird3 div:nth-child(1),
.bird3 div:nth-child(2){
	-webkit-animation:mov_wing 4s linear 2s infinite;
	        animation:mov_wing 4s linear 2s infinite;
}
@-webkit-keyframes mov_wing{
	0%,20%,40%{
		-webkit-transform : perspective(30px) rotateX(7deg);
		        transform : perspective(30px) rotateX(7deg);
	}10%,30%,50%{
		-webkit-transform : perspective(30px) rotateX(161deg);
		        transform : perspective(30px) rotateX(161deg);
	}60%,90%{
		-webkit-transform : perspective(30px) rotateX(10deg);
		        transform : perspective(30px) rotateX(10deg);
	}90%{
		-webkit-transform : perspective(30px) rotateX(8deg);
		        transform : perspective(30px) rotateX(8deg);
	}
}
@keyframes mov_wing{
	0%,20%,40%{
		-webkit-transform : perspective(30px) rotateX(7deg);
		        transform : perspective(30px) rotateX(7deg);
	}10%,30%,50%{
		-webkit-transform : perspective(30px) rotateX(161deg);
		        transform : perspective(30px) rotateX(161deg);
	}60%,90%{
		-webkit-transform : perspective(30px) rotateX(10deg);
		        transform : perspective(30px) rotateX(10deg);
	}90%{
		-webkit-transform : perspective(30px) rotateX(8deg);
		        transform : perspective(30px) rotateX(8deg);
	}
}
.css_lab:after{
	content:"Created by WhitePallet";
	display:block;
	width:250px;
	position:absolute;
	bottom:10px;
	left:50%;
	margin-left:-125px;
	text-align:center;
	font-size:10pt;
	color:#666;
}
!

JS 

              
                //http://web.whitepallet.com/css_lab-marugame.html
!
999px

Console