Playing At Sunset

Developer

Size

12,065 Kb

Views

20,240

Playing At Sunset Previews
Playing At Sunset HTML Codes
Playing At Sunset CSS Codes
Playing At Sunset JS Codes

How do I make an playing at sunset?

A calm sunset achieved using a combination of CSS effects over green fields and a waving weather vane.. What is a playing at sunset? How do you make a playing at sunset? This script and codes were developed by Yogev Ahuvia on 11 September 2022, Sunday.

Playing At Sunset Previews

Playing At Sunset - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Playing At Sunset</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .sky, .ground { position: absolute; bottom: 0; width: 100%; height: 220px; background: green;
}
.sky { top: 0; bottom: auto; height: 75%; z-index: 1000; box-shadow: 0px 0px 10px #fefcea; border-bottom-right-radius: 50% 180px; border-bottom-left-radius: 50% 180px; background-color: #014a7f; -webkit-filter: brightness(0.2) grayscale(1); -moz-filter: brightness(0.2) grayscale(1); animation: darken-sky 60s; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF014A7F', endColorstr='#FFD8B688'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAxNGE3ZiIvPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMTQ4N2MiLz48c3RvcCBvZmZzZXQ9IjclIiBzdG9wLWNvbG9yPSIjMDE1MzhiIi8+PHN0b3Agb2Zmc2V0PSIxNSUiIHN0b3AtY29sb3I9IiMwMDY0OTgiLz48c3RvcCBvZmZzZXQ9IjIzJSIgc3RvcC1jb2xvcj0iIzAwNzZhNiIvPjxzdG9wIG9mZnNldD0iMjMlIiBzdG9wLWNvbG9yPSIjMDA3M2E5Ii8+PHN0b3Agb2Zmc2V0PSIyMyUiIHN0b3AtY29sb3I9IiMwMDc2YTgiLz48c3RvcCBvZmZzZXQ9IjIzJSIgc3RvcC1jb2xvcj0iIzAxNzZhYyIvPjxzdG9wIG9mZnNldD0iMjMlIiBzdG9wLWNvbG9yPSIjMDA3MmE2Ii8+PHN0b3Agb2Zmc2V0PSIyMyUiIHN0b3AtY29sb3I9IiMwMDc2YTgiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1jb2xvcj0iIzAwODJiMyIvPjxzdG9wIG9mZnNldD0iMzAlIiBzdG9wLWNvbG9yPSIjMDA4NGI0Ii8+PHN0b3Agb2Zmc2V0PSIzNyUiIHN0b3AtY29sb3I9IiMwMjkzYzAiLz48c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzA3OTFjMCIvPjxzdG9wIG9mZnNldD0iMzclIiBzdG9wLWNvbG9yPSIjMDk5M2MyIi8+PHN0b3Agb2Zmc2V0PSIzNyUiIHN0b3AtY29sb3I9IiMwYTkyYzIiLz48c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzA5OWFjNyIvPjxzdG9wIG9mZnNldD0iMzclIiBzdG9wLWNvbG9yPSIjMDA4ZWJjIi8+PHN0b3Agb2Zmc2V0PSI0NCUiIHN0b3AtY29sb3I9IiMzM2EzY2IiLz48c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzJjYTJjNiIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjMmI5ZmM4Ii8+PHN0b3Agb2Zmc2V0PSI0NCUiIHN0b3AtY29sb3I9IiMyZTlmYzciLz48c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzJlYTRjYSIvPjxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjNGNhZmNlIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiM0YWFkY2QiLz48c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzUyYWZkMCIvPjxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjNGRiMGNmIi8+PHN0b3Agb2Zmc2V0PSI1OCUiIHN0b3AtY29sb3I9IiM2ZGJiZDEiLz48c3RvcCBvZmZzZXQ9IjU4JSIgc3RvcC1jb2xvcj0iIzY4YmFjZiIvPjxzdG9wIG9mZnNldD0iNjUlIiBzdG9wLWNvbG9yPSIjOGJjOGNkIi8+PHN0b3Agb2Zmc2V0PSI2NSUiIHN0b3AtY29sb3I9IiM4OGM0Y2MiLz48c3RvcCBvZmZzZXQ9IjY1JSIgc3RvcC1jb2xvcj0iIzhhYzdjYyIvPjxzdG9wIG9mZnNldD0iNzElIiBzdG9wLWNvbG9yPSIjYTNjYmMzIi8+PHN0b3Agb2Zmc2V0PSI3MSUiIHN0b3AtY29sb3I9IiM5ZWM3YzEiLz48c3RvcCBvZmZzZXQ9IjcxJSIgc3RvcC1jb2xvcj0iI2ExY2FjNiIvPjxzdG9wIG9mZnNldD0iNzElIiBzdG9wLWNvbG9yPSIjOWZjN2JmIi8+PHN0b3Agb2Zmc2V0PSI3NyUiIHN0b3AtY29sb3I9IiNiMWM4YjQiLz48c3RvcCBvZmZzZXQ9Ijc3JSIgc3RvcC1jb2xvcj0iI2IzY2NiNyIvPjxzdG9wIG9mZnNldD0iNzclIiBzdG9wLWNvbG9yPSIjYjRjY2I2Ii8+PHN0b3Agb2Zmc2V0PSI3NyUiIHN0b3AtY29sb3I9IiNiMmNiYjYiLz48c3RvcCBvZmZzZXQ9Ijc3JSIgc3RvcC1jb2xvcj0iI2IwYzliNCIvPjxzdG9wIG9mZnNldD0iODMlIiBzdG9wLWNvbG9yPSIjYzBjM2E0Ii8+PHN0b3Agb2Zmc2V0PSI4MyUiIHN0b3AtY29sb3I9IiNjM2M3YTYiLz48c3RvcCBvZmZzZXQ9IjgzJSIgc3RvcC1jb2xvcj0iI2MyYzVhNiIvPjxzdG9wIG9mZnNldD0iODklIiBzdG9wLWNvbG9yPSIjZDNiNjhjIi8+PHN0b3Agb2Zmc2V0PSI4OSUiIHN0b3AtY29sb3I9IiNkMWI5OGQiLz48c3RvcCBvZmZzZXQ9Ijg5JSIgc3RvcC1jb2xvcj0iI2QwYjM4NyIvPjxzdG9wIG9mZnNldD0iOTUlIiBzdG9wLWNvbG9yPSIjZDdiNzg4Ii8+PHN0b3Agb2Zmc2V0PSI5NSUiIHN0b3AtY29sb3I9IiNkNWI1ODYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNWIzODUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNWIzODUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkOGI2ODgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #014a7f), color-stop(0%, #01487c), color-stop(7%, #01538b), color-stop(15%, #006498), color-stop(23%, #0076a6), color-stop(23%, #0073a9), color-stop(23%, #0076a8), color-stop(23%, #0176ac), color-stop(23%, #0072a6), color-stop(23%, #0076a8), color-stop(30%, #0082b3), color-stop(30%, #0084b4), color-stop(37%, #0293c0), color-stop(37%, #0791c0), color-stop(37%, #0993c2), color-stop(37%, #0a92c2), color-stop(37%, #099ac7), color-stop(37%, #008ebc), color-stop(44%, #33a3cb), color-stop(44%, #2ca2c6), color-stop(44%, #2b9fc8), color-stop(44%, #2e9fc7), color-stop(44%, #2ea4ca), color-stop(51%, #4cafce), color-stop(51%, #4aadcd), color-stop(51%, #52afd0), color-stop(51%, #4db0cf), color-stop(58%, #6dbbd1), color-stop(58%, #68bacf), color-stop(65%, #8bc8cd), color-stop(65%, #88c4cc), color-stop(65%, #8ac7cc), color-stop(71%, #a3cbc3), color-stop(71%, #9ec7c1), color-stop(71%, #a1cac6), color-stop(71%, #9fc7bf), color-stop(77%, #b1c8b4), color-stop(77%, #b3ccb7), color-stop(77%, #b4ccb6), color-stop(77%, #b2cbb6), color-stop(77%, #b0c9b4), color-stop(83%, #c0c3a4), color-stop(83%, #c3c7a6), color-stop(83%, #c2c5a6), color-stop(89%, #d3b68c), color-stop(89%, #d1b98d), color-stop(89%, #d0b387), color-stop(95%, #d7b788), color-stop(95%, #d5b586), color-stop(100%, #d5b385), color-stop(100%, #d5b385), color-stop(100%, #d8b688)); background-image: -moz-linear-gradient(top, #014a7f 0%, #01487c 0%, #01538b 7%, #006498 15%, #0076a6 23%, #0073a9 23%, #0076a8 23%, #0176ac 23%, #0072a6 23%, #0076a8 23%, #0082b3 30%, #0084b4 30%, #0293c0 37%, #0791c0 37%, #0993c2 37%, #0a92c2 37%, #099ac7 37%, #008ebc 37%, #33a3cb 44%, #2ca2c6 44%, #2b9fc8 44%, #2e9fc7 44%, #2ea4ca 44%, #4cafce 51%, #4aadcd 51%, #52afd0 51%, #4db0cf 51%, #6dbbd1 58%, #68bacf 58%, #8bc8cd 65%, #88c4cc 65%, #8ac7cc 65%, #a3cbc3 71%, #9ec7c1 71%, #a1cac6 71%, #9fc7bf 71%, #b1c8b4 77%, #b3ccb7 77%, #b4ccb6 77%, #b2cbb6 77%, #b0c9b4 77%, #c0c3a4 83%, #c3c7a6 83%, #c2c5a6 83%, #d3b68c 89%, #d1b98d 89%, #d0b387 89%, #d7b788 95%, #d5b586 95%, #d5b385 100%, #d5b385 100%, #d8b688 100%); background-image: -webkit-linear-gradient(top, #014a7f 0%, #01487c 0%, #01538b 7%, #006498 15%, #0076a6 23%, #0073a9 23%, #0076a8 23%, #0176ac 23%, #0072a6 23%, #0076a8 23%, #0082b3 30%, #0084b4 30%, #0293c0 37%, #0791c0 37%, #0993c2 37%, #0a92c2 37%, #099ac7 37%, #008ebc 37%, #33a3cb 44%, #2ca2c6 44%, #2b9fc8 44%, #2e9fc7 44%, #2ea4ca 44%, #4cafce 51%, #4aadcd 51%, #52afd0 51%, #4db0cf 51%, #6dbbd1 58%, #68bacf 58%, #8bc8cd 65%, #88c4cc 65%, #8ac7cc 65%, #a3cbc3 71%, #9ec7c1 71%, #a1cac6 71%, #9fc7bf 71%, #b1c8b4 77%, #b3ccb7 77%, #b4ccb6 77%, #b2cbb6 77%, #b0c9b4 77%, #c0c3a4 83%, #c3c7a6 83%, #c2c5a6 83%, #d3b68c 89%, #d1b98d 89%, #d0b387 89%, #d7b788 95%, #d5b586 95%, #d5b385 100%, #d5b385 100%, #d8b688 100%); background-image: linear-gradient(to bottom, #014a7f 0%, #01487c 0%, #01538b 7%, #006498 15%, #0076a6 23%, #0073a9 23%, #0076a8 23%, #0176ac 23%, #0072a6 23%, #0076a8 23%, #0082b3 30%, #0084b4 30%, #0293c0 37%, #0791c0 37%, #0993c2 37%, #0a92c2 37%, #099ac7 37%, #008ebc 37%, #33a3cb 44%, #2ca2c6 44%, #2b9fc8 44%, #2e9fc7 44%, #2ea4ca 44%, #4cafce 51%, #4aadcd 51%, #52afd0 51%, #4db0cf 51%, #6dbbd1 58%, #68bacf 58%, #8bc8cd 65%, #88c4cc 65%, #8ac7cc 65%, #a3cbc3 71%, #9ec7c1 71%, #a1cac6 71%, #9fc7bf 71%, #b1c8b4 77%, #b3ccb7 77%, #b4ccb6 77%, #b2cbb6 77%, #b0c9b4 77%, #c0c3a4 83%, #c3c7a6 83%, #c2c5a6 83%, #d3b68c 89%, #d1b98d 89%, #d0b387 89%, #d7b788 95%, #d5b586 95%, #d5b385 100%, #d5b385 100%, #d8b688 100%);
}
.sky:after { content: ''; display: block; position: absolute; opacity: 0.6; bottom: 0px; z-index: -10; left: 50%; margin-left: -30px; width: 60px; height: 0px; box-shadow: 0px 0px 0px 0px yellow; animation: sunset 60s; border-top-right-radius: 50% 100%; border-top-left-radius: 50% 100%; background-color: #ffc662; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFC662', endColorstr='#FFF07C57'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYzY2MiIvPjxzdG9wIG9mZnNldD0iOCUiIHN0b3AtY29sb3I9IiNmZGNiNWEiLz48c3RvcCBvZmZzZXQ9IjE0JSIgc3RvcC1jb2xvcj0iI2ZmYzI1YiIvPjxzdG9wIG9mZnNldD0iMTglIiBzdG9wLWNvbG9yPSIjZmZiMDViIi8+PHN0b3Agb2Zmc2V0PSIyMyUiIHN0b3AtY29sb3I9IiNmY2E1NTgiLz48c3RvcCBvZmZzZXQ9IjIzJSIgc3RvcC1jb2xvcj0iI2ZmYWI1ZSIvPjxzdG9wIG9mZnNldD0iMjglIiBzdG9wLWNvbG9yPSIjZmM5ZDU5Ii8+PHN0b3Agb2Zmc2V0PSIzNSUiIHN0b3AtY29sb3I9IiNmYTk5NTQiLz48c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0iI2ZmOWU1ZCIvPjxzdG9wIG9mZnNldD0iNDIlIiBzdG9wLWNvbG9yPSIjZmY5MjVhIi8+PHN0b3Agb2Zmc2V0PSI0OCUiIHN0b3AtY29sb3I9IiNmOThhNTUiLz48c3RvcCBvZmZzZXQ9IjU0JSIgc3RvcC1jb2xvcj0iI2ZlOGY1YSIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjZmU4ZjVhIi8+PHN0b3Agb2Zmc2V0PSI2NyUiIHN0b3AtY29sb3I9IiNmZDhlNTciLz48c3RvcCBvZmZzZXQ9Ijc0JSIgc3RvcC1jb2xvcj0iI2Y5ODM1YiIvPjxzdG9wIG9mZnNldD0iODElIiBzdG9wLWNvbG9yPSIjZjY4MTU2Ii8+PHN0b3Agb2Zmc2V0PSI4NyUiIHN0b3AtY29sb3I9IiNmNDdlNTYiLz48c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iI2Y1N2Y1NyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YwN2M1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffc662), color-stop(8%, #fdcb5a), color-stop(14%, #ffc25b), color-stop(18%, #ffb05b), color-stop(23%, #fca558), color-stop(23%, #ffab5e), color-stop(28%, #fc9d59), color-stop(35%, #fa9954), color-stop(35%, #ff9e5d), color-stop(42%, #ff925a), color-stop(48%, #f98a55), color-stop(54%, #fe8f5a), color-stop(60%, #fe8f5a), color-stop(67%, #fd8e57), color-stop(74%, #f9835b), color-stop(81%, #f68156), color-stop(87%, #f47e56), color-stop(95%, #f57f57), color-stop(100%, #f07c57)); background-image: -moz-linear-gradient(top, #ffc662 0%, #fdcb5a 8%, #ffc25b 14%, #ffb05b 18%, #fca558 23%, #ffab5e 23%, #fc9d59 28%, #fa9954 35%, #ff9e5d 35%, #ff925a 42%, #f98a55 48%, #fe8f5a 54%, #fe8f5a 60%, #fd8e57 67%, #f9835b 74%, #f68156 81%, #f47e56 87%, #f57f57 95%, #f07c57 100%); background-image: -webkit-linear-gradient(top, #ffc662 0%, #fdcb5a 8%, #ffc25b 14%, #ffb05b 18%, #fca558 23%, #ffab5e 23%, #fc9d59 28%, #fa9954 35%, #ff9e5d 35%, #ff925a 42%, #f98a55 48%, #fe8f5a 54%, #fe8f5a 60%, #fd8e57 67%, #f9835b 74%, #f68156 81%, #f47e56 87%, #f57f57 95%, #f07c57 100%); background-image: linear-gradient(to bottom, #ffc662 0%, #fdcb5a 8%, #ffc25b 14%, #ffb05b 18%, #fca558 23%, #ffab5e 23%, #fc9d59 28%, #fa9954 35%, #ff9e5d 35%, #ff925a 42%, #f98a55 48%, #fe8f5a 54%, #fe8f5a 60%, #fd8e57 67%, #f9835b 74%, #f68156 81%, #f47e56 87%, #f57f57 95%, #f07c57 100%);
}
.ground { height: 100%; z-index: 1; -webkit-filter: brightness(0.4) grayscale(0.5); -moz-filter: brightness(0.4) grayscale(0.5); animation: darken-ground 60s; box-shadow: inset 0px -1px 200px 10px rgba(0, 0, 0, 0.5);
}
.vane { z-index: 10000; width: 50px; height: 50px; top: 100%; left: 100px; margin-top: -180px; margin-left: -25px; border-radius: 100%; position: absolute;
}
.vane > ul { animation: wave 10s infinite;
}
.vane:before { content: ''; display: block; position: absolute; width: 120px; height: 4px; top: 101px; left: -93px; transform-origin: 100% 50%; transform: rotate(25deg); opacity: 0.1; animation: vane-shadow 60s; background: #222; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}
.vane:after { content: ''; display: block; position: absolute; width: 4px; height: 80px; top: 50%; left: 50%; margin-left: -2px; background: #222; box-shadow: inset -1px 0px 2px 0px rgba(254, 252, 234, 0.75);
}
ul { margin: 0; padding: 0; position: absolute; width: 100%; height: 100%; z-index: 10000;
}
ul > li { width: 25px; height: 25px; margin: 0; padding: 0; list-style-type: none; display: block; position: absolute; top: 0; left: 0; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); border-top-left-radius: 0px; border-top-right-radius: 0px; transform-origin: 100% 100%; pointer-events: none; transition-delay: 0s; transition-property: transform; transition-duration: 3s; transition-timing-function: ease-in-out;
}
ul > li:nth-child(1) { transform: rotate(0deg); z-index: 8; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#B387E0FD', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM4N2UwZmQiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, rgba(135, 224, 253, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: -webkit-linear-gradient(45deg, rgba(135, 224, 253, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: linear-gradient(45deg, rgba(135, 224, 253, 0.7) 50%, rgba(255, 255, 255, 0) 51%);
}
ul > li:nth-child(2) { transform: rotate(45deg); z-index: 7; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#B3A90329', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNhOTAzMjkiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, rgba(169, 3, 41, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: -webkit-linear-gradient(45deg, rgba(169, 3, 41, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: linear-gradient(45deg, rgba(169, 3, 41, 0.7) 50%, rgba(255, 255, 255, 0) 51%);
}
ul > li:nth-child(3) { transform: rotate(90deg); z-index: 6; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#B3FEFCEA', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZWZjZWEiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, rgba(254, 252, 234, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: -webkit-linear-gradient(45deg, rgba(254, 252, 234, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: linear-gradient(45deg, rgba(254, 252, 234, 0.7) 50%, rgba(255, 255, 255, 0) 51%);
}
ul > li:nth-child(4) { transform: rotate(135deg); z-index: 5; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#B38FC800', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM4ZmM4MDAiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, rgba(143, 200, 0, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: -webkit-linear-gradient(45deg, rgba(143, 200, 0, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: linear-gradient(45deg, rgba(143, 200, 0, 0.7) 50%, rgba(255, 255, 255, 0) 51%);
}
ul > li:nth-child(5) { transform: rotate(180deg); z-index: 4; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#B3FFAF4B', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmFmNGIiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, rgba(255, 175, 75, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: -webkit-linear-gradient(45deg, rgba(255, 175, 75, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: linear-gradient(45deg, rgba(255, 175, 75, 0.7) 50%, rgba(255, 255, 255, 0) 51%);
}
ul > li:nth-child(6) { transform: rotate(225deg); z-index: 3; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#B3FB83FA', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmYjgzZmEiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, rgba(251, 131, 250, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: -webkit-linear-gradient(45deg, rgba(251, 131, 250, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: linear-gradient(45deg, rgba(251, 131, 250, 0.7) 50%, rgba(255, 255, 255, 0) 51%);
}
ul > li:nth-child(7) { transform: rotate(270deg); z-index: 2; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#B3E5E696', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNlNWU2OTYiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, rgba(229, 230, 150, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: -webkit-linear-gradient(45deg, rgba(229, 230, 150, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: linear-gradient(45deg, rgba(229, 230, 150, 0.7) 50%, rgba(255, 255, 255, 0) 51%);
}
ul > li:nth-child(8) { transform: rotate(315deg); z-index: 1; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#B3FCFFF4', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmY2ZmZjQiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, rgba(252, 255, 244, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: -webkit-linear-gradient(45deg, rgba(252, 255, 244, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: linear-gradient(45deg, rgba(252, 255, 244, 0.7) 50%, rgba(255, 255, 255, 0) 51%);
}
.star { position: absolute; display: block; color: #ffe0bc; z-index: 100000; opacity: 0.25; width: 0px; height: 0px; border-right: 10px solid transparent; border-bottom: 7px solid #ffe0bc; border-left: 10px solid transparent; animation: shine 5s infinite; transform: rotate(35deg) scale(0); transition: transform 5s;
}
.star.size1 { transform: rotate(35deg) scale(0.3);
}
.star.size2 { transform: rotate(35deg) scale(0.4);
}
.star.size3 { transform: rotate(35deg) scale(0.5);
}
.star:before { border-bottom: 8px solid #ffe0bc; border-left: 3px solid transparent; border-right: 3px solid transparent; position: absolute; height: 0; width: 0; top: -4.5px; left: -6.5px; display: block; content: ''; transform: rotate(-35deg);
}
.star:after { position: absolute; display: block; color: #ffe0bc; top: 0.3px; left: -10.5px; width: 0px; height: 0px; border-right: 10px solid transparent; border-bottom: 7px solid #ffe0bc; border-left: 10px solid transparent; transform: rotate(-70deg); content: '';
}
@keyframes wave { 0% { transform: rotate(0deg); } 65% { transform: rotate(-360deg); } 100% { transform: rotate(-720deg); }
}
@keyframes sunset { 0% { margin-left: -40px; width: 80px; height: 10px; box-shadow: 0px -10px 200px 40px yellow; } 90% { margin-left: -30px; width: 60px; height: 0px; box-shadow: 0px 0px 0px 0px yellow; } 100% { margin-left: -30px; width: 60px; height: 0px; box-shadow: 0px 0px 0px 0px yellow; }
}
@keyframes vane-shadow { from { transform: rotate(-15deg); opacity: 0.5; } to { transform: rotate(25deg); opacity: 0.1; }
}
@keyframes darken-sky { from { -webkit-filter: brightness(1) grayscale(0); } to { -webkit-filter: brightness(0.2) grayscale(1); }
}
@keyframes darken-ground { from { -webkit-filter: brightness(1) grayscale(0); } to { -webkit-filter: brightness(0.4) grayscale(0.5); }
}
@keyframes shine { from { -webkit-filter: hue-rotate(0deg); } to { -webkit-filter: hue-rotate(30deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="sky"> <div class="vane"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
</div>
<div class="ground"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Playing At Sunset - Script Codes CSS Codes

.sky, .ground { position: absolute; bottom: 0; width: 100%; height: 220px; background: green;
}
.sky { top: 0; bottom: auto; height: 75%; z-index: 1000; box-shadow: 0px 0px 10px #fefcea; border-bottom-right-radius: 50% 180px; border-bottom-left-radius: 50% 180px; background-color: #014a7f; -webkit-filter: brightness(0.2) grayscale(1); -moz-filter: brightness(0.2) grayscale(1); animation: darken-sky 60s; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF014A7F', endColorstr='#FFD8B688'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAxNGE3ZiIvPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMTQ4N2MiLz48c3RvcCBvZmZzZXQ9IjclIiBzdG9wLWNvbG9yPSIjMDE1MzhiIi8+PHN0b3Agb2Zmc2V0PSIxNSUiIHN0b3AtY29sb3I9IiMwMDY0OTgiLz48c3RvcCBvZmZzZXQ9IjIzJSIgc3RvcC1jb2xvcj0iIzAwNzZhNiIvPjxzdG9wIG9mZnNldD0iMjMlIiBzdG9wLWNvbG9yPSIjMDA3M2E5Ii8+PHN0b3Agb2Zmc2V0PSIyMyUiIHN0b3AtY29sb3I9IiMwMDc2YTgiLz48c3RvcCBvZmZzZXQ9IjIzJSIgc3RvcC1jb2xvcj0iIzAxNzZhYyIvPjxzdG9wIG9mZnNldD0iMjMlIiBzdG9wLWNvbG9yPSIjMDA3MmE2Ii8+PHN0b3Agb2Zmc2V0PSIyMyUiIHN0b3AtY29sb3I9IiMwMDc2YTgiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1jb2xvcj0iIzAwODJiMyIvPjxzdG9wIG9mZnNldD0iMzAlIiBzdG9wLWNvbG9yPSIjMDA4NGI0Ii8+PHN0b3Agb2Zmc2V0PSIzNyUiIHN0b3AtY29sb3I9IiMwMjkzYzAiLz48c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzA3OTFjMCIvPjxzdG9wIG9mZnNldD0iMzclIiBzdG9wLWNvbG9yPSIjMDk5M2MyIi8+PHN0b3Agb2Zmc2V0PSIzNyUiIHN0b3AtY29sb3I9IiMwYTkyYzIiLz48c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzA5OWFjNyIvPjxzdG9wIG9mZnNldD0iMzclIiBzdG9wLWNvbG9yPSIjMDA4ZWJjIi8+PHN0b3Agb2Zmc2V0PSI0NCUiIHN0b3AtY29sb3I9IiMzM2EzY2IiLz48c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzJjYTJjNiIvPjxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjMmI5ZmM4Ii8+PHN0b3Agb2Zmc2V0PSI0NCUiIHN0b3AtY29sb3I9IiMyZTlmYzciLz48c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzJlYTRjYSIvPjxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjNGNhZmNlIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiM0YWFkY2QiLz48c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzUyYWZkMCIvPjxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjNGRiMGNmIi8+PHN0b3Agb2Zmc2V0PSI1OCUiIHN0b3AtY29sb3I9IiM2ZGJiZDEiLz48c3RvcCBvZmZzZXQ9IjU4JSIgc3RvcC1jb2xvcj0iIzY4YmFjZiIvPjxzdG9wIG9mZnNldD0iNjUlIiBzdG9wLWNvbG9yPSIjOGJjOGNkIi8+PHN0b3Agb2Zmc2V0PSI2NSUiIHN0b3AtY29sb3I9IiM4OGM0Y2MiLz48c3RvcCBvZmZzZXQ9IjY1JSIgc3RvcC1jb2xvcj0iIzhhYzdjYyIvPjxzdG9wIG9mZnNldD0iNzElIiBzdG9wLWNvbG9yPSIjYTNjYmMzIi8+PHN0b3Agb2Zmc2V0PSI3MSUiIHN0b3AtY29sb3I9IiM5ZWM3YzEiLz48c3RvcCBvZmZzZXQ9IjcxJSIgc3RvcC1jb2xvcj0iI2ExY2FjNiIvPjxzdG9wIG9mZnNldD0iNzElIiBzdG9wLWNvbG9yPSIjOWZjN2JmIi8+PHN0b3Agb2Zmc2V0PSI3NyUiIHN0b3AtY29sb3I9IiNiMWM4YjQiLz48c3RvcCBvZmZzZXQ9Ijc3JSIgc3RvcC1jb2xvcj0iI2IzY2NiNyIvPjxzdG9wIG9mZnNldD0iNzclIiBzdG9wLWNvbG9yPSIjYjRjY2I2Ii8+PHN0b3Agb2Zmc2V0PSI3NyUiIHN0b3AtY29sb3I9IiNiMmNiYjYiLz48c3RvcCBvZmZzZXQ9Ijc3JSIgc3RvcC1jb2xvcj0iI2IwYzliNCIvPjxzdG9wIG9mZnNldD0iODMlIiBzdG9wLWNvbG9yPSIjYzBjM2E0Ii8+PHN0b3Agb2Zmc2V0PSI4MyUiIHN0b3AtY29sb3I9IiNjM2M3YTYiLz48c3RvcCBvZmZzZXQ9IjgzJSIgc3RvcC1jb2xvcj0iI2MyYzVhNiIvPjxzdG9wIG9mZnNldD0iODklIiBzdG9wLWNvbG9yPSIjZDNiNjhjIi8+PHN0b3Agb2Zmc2V0PSI4OSUiIHN0b3AtY29sb3I9IiNkMWI5OGQiLz48c3RvcCBvZmZzZXQ9Ijg5JSIgc3RvcC1jb2xvcj0iI2QwYjM4NyIvPjxzdG9wIG9mZnNldD0iOTUlIiBzdG9wLWNvbG9yPSIjZDdiNzg4Ii8+PHN0b3Agb2Zmc2V0PSI5NSUiIHN0b3AtY29sb3I9IiNkNWI1ODYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNWIzODUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNWIzODUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkOGI2ODgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #014a7f), color-stop(0%, #01487c), color-stop(7%, #01538b), color-stop(15%, #006498), color-stop(23%, #0076a6), color-stop(23%, #0073a9), color-stop(23%, #0076a8), color-stop(23%, #0176ac), color-stop(23%, #0072a6), color-stop(23%, #0076a8), color-stop(30%, #0082b3), color-stop(30%, #0084b4), color-stop(37%, #0293c0), color-stop(37%, #0791c0), color-stop(37%, #0993c2), color-stop(37%, #0a92c2), color-stop(37%, #099ac7), color-stop(37%, #008ebc), color-stop(44%, #33a3cb), color-stop(44%, #2ca2c6), color-stop(44%, #2b9fc8), color-stop(44%, #2e9fc7), color-stop(44%, #2ea4ca), color-stop(51%, #4cafce), color-stop(51%, #4aadcd), color-stop(51%, #52afd0), color-stop(51%, #4db0cf), color-stop(58%, #6dbbd1), color-stop(58%, #68bacf), color-stop(65%, #8bc8cd), color-stop(65%, #88c4cc), color-stop(65%, #8ac7cc), color-stop(71%, #a3cbc3), color-stop(71%, #9ec7c1), color-stop(71%, #a1cac6), color-stop(71%, #9fc7bf), color-stop(77%, #b1c8b4), color-stop(77%, #b3ccb7), color-stop(77%, #b4ccb6), color-stop(77%, #b2cbb6), color-stop(77%, #b0c9b4), color-stop(83%, #c0c3a4), color-stop(83%, #c3c7a6), color-stop(83%, #c2c5a6), color-stop(89%, #d3b68c), color-stop(89%, #d1b98d), color-stop(89%, #d0b387), color-stop(95%, #d7b788), color-stop(95%, #d5b586), color-stop(100%, #d5b385), color-stop(100%, #d5b385), color-stop(100%, #d8b688)); background-image: -moz-linear-gradient(top, #014a7f 0%, #01487c 0%, #01538b 7%, #006498 15%, #0076a6 23%, #0073a9 23%, #0076a8 23%, #0176ac 23%, #0072a6 23%, #0076a8 23%, #0082b3 30%, #0084b4 30%, #0293c0 37%, #0791c0 37%, #0993c2 37%, #0a92c2 37%, #099ac7 37%, #008ebc 37%, #33a3cb 44%, #2ca2c6 44%, #2b9fc8 44%, #2e9fc7 44%, #2ea4ca 44%, #4cafce 51%, #4aadcd 51%, #52afd0 51%, #4db0cf 51%, #6dbbd1 58%, #68bacf 58%, #8bc8cd 65%, #88c4cc 65%, #8ac7cc 65%, #a3cbc3 71%, #9ec7c1 71%, #a1cac6 71%, #9fc7bf 71%, #b1c8b4 77%, #b3ccb7 77%, #b4ccb6 77%, #b2cbb6 77%, #b0c9b4 77%, #c0c3a4 83%, #c3c7a6 83%, #c2c5a6 83%, #d3b68c 89%, #d1b98d 89%, #d0b387 89%, #d7b788 95%, #d5b586 95%, #d5b385 100%, #d5b385 100%, #d8b688 100%); background-image: -webkit-linear-gradient(top, #014a7f 0%, #01487c 0%, #01538b 7%, #006498 15%, #0076a6 23%, #0073a9 23%, #0076a8 23%, #0176ac 23%, #0072a6 23%, #0076a8 23%, #0082b3 30%, #0084b4 30%, #0293c0 37%, #0791c0 37%, #0993c2 37%, #0a92c2 37%, #099ac7 37%, #008ebc 37%, #33a3cb 44%, #2ca2c6 44%, #2b9fc8 44%, #2e9fc7 44%, #2ea4ca 44%, #4cafce 51%, #4aadcd 51%, #52afd0 51%, #4db0cf 51%, #6dbbd1 58%, #68bacf 58%, #8bc8cd 65%, #88c4cc 65%, #8ac7cc 65%, #a3cbc3 71%, #9ec7c1 71%, #a1cac6 71%, #9fc7bf 71%, #b1c8b4 77%, #b3ccb7 77%, #b4ccb6 77%, #b2cbb6 77%, #b0c9b4 77%, #c0c3a4 83%, #c3c7a6 83%, #c2c5a6 83%, #d3b68c 89%, #d1b98d 89%, #d0b387 89%, #d7b788 95%, #d5b586 95%, #d5b385 100%, #d5b385 100%, #d8b688 100%); background-image: linear-gradient(to bottom, #014a7f 0%, #01487c 0%, #01538b 7%, #006498 15%, #0076a6 23%, #0073a9 23%, #0076a8 23%, #0176ac 23%, #0072a6 23%, #0076a8 23%, #0082b3 30%, #0084b4 30%, #0293c0 37%, #0791c0 37%, #0993c2 37%, #0a92c2 37%, #099ac7 37%, #008ebc 37%, #33a3cb 44%, #2ca2c6 44%, #2b9fc8 44%, #2e9fc7 44%, #2ea4ca 44%, #4cafce 51%, #4aadcd 51%, #52afd0 51%, #4db0cf 51%, #6dbbd1 58%, #68bacf 58%, #8bc8cd 65%, #88c4cc 65%, #8ac7cc 65%, #a3cbc3 71%, #9ec7c1 71%, #a1cac6 71%, #9fc7bf 71%, #b1c8b4 77%, #b3ccb7 77%, #b4ccb6 77%, #b2cbb6 77%, #b0c9b4 77%, #c0c3a4 83%, #c3c7a6 83%, #c2c5a6 83%, #d3b68c 89%, #d1b98d 89%, #d0b387 89%, #d7b788 95%, #d5b586 95%, #d5b385 100%, #d5b385 100%, #d8b688 100%);
}
.sky:after { content: ''; display: block; position: absolute; opacity: 0.6; bottom: 0px; z-index: -10; left: 50%; margin-left: -30px; width: 60px; height: 0px; box-shadow: 0px 0px 0px 0px yellow; animation: sunset 60s; border-top-right-radius: 50% 100%; border-top-left-radius: 50% 100%; background-color: #ffc662; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFC662', endColorstr='#FFF07C57'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYzY2MiIvPjxzdG9wIG9mZnNldD0iOCUiIHN0b3AtY29sb3I9IiNmZGNiNWEiLz48c3RvcCBvZmZzZXQ9IjE0JSIgc3RvcC1jb2xvcj0iI2ZmYzI1YiIvPjxzdG9wIG9mZnNldD0iMTglIiBzdG9wLWNvbG9yPSIjZmZiMDViIi8+PHN0b3Agb2Zmc2V0PSIyMyUiIHN0b3AtY29sb3I9IiNmY2E1NTgiLz48c3RvcCBvZmZzZXQ9IjIzJSIgc3RvcC1jb2xvcj0iI2ZmYWI1ZSIvPjxzdG9wIG9mZnNldD0iMjglIiBzdG9wLWNvbG9yPSIjZmM5ZDU5Ii8+PHN0b3Agb2Zmc2V0PSIzNSUiIHN0b3AtY29sb3I9IiNmYTk5NTQiLz48c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0iI2ZmOWU1ZCIvPjxzdG9wIG9mZnNldD0iNDIlIiBzdG9wLWNvbG9yPSIjZmY5MjVhIi8+PHN0b3Agb2Zmc2V0PSI0OCUiIHN0b3AtY29sb3I9IiNmOThhNTUiLz48c3RvcCBvZmZzZXQ9IjU0JSIgc3RvcC1jb2xvcj0iI2ZlOGY1YSIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjZmU4ZjVhIi8+PHN0b3Agb2Zmc2V0PSI2NyUiIHN0b3AtY29sb3I9IiNmZDhlNTciLz48c3RvcCBvZmZzZXQ9Ijc0JSIgc3RvcC1jb2xvcj0iI2Y5ODM1YiIvPjxzdG9wIG9mZnNldD0iODElIiBzdG9wLWNvbG9yPSIjZjY4MTU2Ii8+PHN0b3Agb2Zmc2V0PSI4NyUiIHN0b3AtY29sb3I9IiNmNDdlNTYiLz48c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iI2Y1N2Y1NyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YwN2M1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffc662), color-stop(8%, #fdcb5a), color-stop(14%, #ffc25b), color-stop(18%, #ffb05b), color-stop(23%, #fca558), color-stop(23%, #ffab5e), color-stop(28%, #fc9d59), color-stop(35%, #fa9954), color-stop(35%, #ff9e5d), color-stop(42%, #ff925a), color-stop(48%, #f98a55), color-stop(54%, #fe8f5a), color-stop(60%, #fe8f5a), color-stop(67%, #fd8e57), color-stop(74%, #f9835b), color-stop(81%, #f68156), color-stop(87%, #f47e56), color-stop(95%, #f57f57), color-stop(100%, #f07c57)); background-image: -moz-linear-gradient(top, #ffc662 0%, #fdcb5a 8%, #ffc25b 14%, #ffb05b 18%, #fca558 23%, #ffab5e 23%, #fc9d59 28%, #fa9954 35%, #ff9e5d 35%, #ff925a 42%, #f98a55 48%, #fe8f5a 54%, #fe8f5a 60%, #fd8e57 67%, #f9835b 74%, #f68156 81%, #f47e56 87%, #f57f57 95%, #f07c57 100%); background-image: -webkit-linear-gradient(top, #ffc662 0%, #fdcb5a 8%, #ffc25b 14%, #ffb05b 18%, #fca558 23%, #ffab5e 23%, #fc9d59 28%, #fa9954 35%, #ff9e5d 35%, #ff925a 42%, #f98a55 48%, #fe8f5a 54%, #fe8f5a 60%, #fd8e57 67%, #f9835b 74%, #f68156 81%, #f47e56 87%, #f57f57 95%, #f07c57 100%); background-image: linear-gradient(to bottom, #ffc662 0%, #fdcb5a 8%, #ffc25b 14%, #ffb05b 18%, #fca558 23%, #ffab5e 23%, #fc9d59 28%, #fa9954 35%, #ff9e5d 35%, #ff925a 42%, #f98a55 48%, #fe8f5a 54%, #fe8f5a 60%, #fd8e57 67%, #f9835b 74%, #f68156 81%, #f47e56 87%, #f57f57 95%, #f07c57 100%);
}
.ground { height: 100%; z-index: 1; -webkit-filter: brightness(0.4) grayscale(0.5); -moz-filter: brightness(0.4) grayscale(0.5); animation: darken-ground 60s; box-shadow: inset 0px -1px 200px 10px rgba(0, 0, 0, 0.5);
}
.vane { z-index: 10000; width: 50px; height: 50px; top: 100%; left: 100px; margin-top: -180px; margin-left: -25px; border-radius: 100%; position: absolute;
}
.vane > ul { animation: wave 10s infinite;
}
.vane:before { content: ''; display: block; position: absolute; width: 120px; height: 4px; top: 101px; left: -93px; transform-origin: 100% 50%; transform: rotate(25deg); opacity: 0.1; animation: vane-shadow 60s; background: #222; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}
.vane:after { content: ''; display: block; position: absolute; width: 4px; height: 80px; top: 50%; left: 50%; margin-left: -2px; background: #222; box-shadow: inset -1px 0px 2px 0px rgba(254, 252, 234, 0.75);
}
ul { margin: 0; padding: 0; position: absolute; width: 100%; height: 100%; z-index: 10000;
}
ul > li { width: 25px; height: 25px; margin: 0; padding: 0; list-style-type: none; display: block; position: absolute; top: 0; left: 0; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); border-top-left-radius: 0px; border-top-right-radius: 0px; transform-origin: 100% 100%; pointer-events: none; transition-delay: 0s; transition-property: transform; transition-duration: 3s; transition-timing-function: ease-in-out;
}
ul > li:nth-child(1) { transform: rotate(0deg); z-index: 8; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#B387E0FD', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM4N2UwZmQiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, rgba(135, 224, 253, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: -webkit-linear-gradient(45deg, rgba(135, 224, 253, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: linear-gradient(45deg, rgba(135, 224, 253, 0.7) 50%, rgba(255, 255, 255, 0) 51%);
}
ul > li:nth-child(2) { transform: rotate(45deg); z-index: 7; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#B3A90329', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNhOTAzMjkiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, rgba(169, 3, 41, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: -webkit-linear-gradient(45deg, rgba(169, 3, 41, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: linear-gradient(45deg, rgba(169, 3, 41, 0.7) 50%, rgba(255, 255, 255, 0) 51%);
}
ul > li:nth-child(3) { transform: rotate(90deg); z-index: 6; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#B3FEFCEA', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZWZjZWEiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, rgba(254, 252, 234, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: -webkit-linear-gradient(45deg, rgba(254, 252, 234, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: linear-gradient(45deg, rgba(254, 252, 234, 0.7) 50%, rgba(255, 255, 255, 0) 51%);
}
ul > li:nth-child(4) { transform: rotate(135deg); z-index: 5; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#B38FC800', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM4ZmM4MDAiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, rgba(143, 200, 0, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: -webkit-linear-gradient(45deg, rgba(143, 200, 0, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: linear-gradient(45deg, rgba(143, 200, 0, 0.7) 50%, rgba(255, 255, 255, 0) 51%);
}
ul > li:nth-child(5) { transform: rotate(180deg); z-index: 4; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#B3FFAF4B', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmFmNGIiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, rgba(255, 175, 75, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: -webkit-linear-gradient(45deg, rgba(255, 175, 75, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: linear-gradient(45deg, rgba(255, 175, 75, 0.7) 50%, rgba(255, 255, 255, 0) 51%);
}
ul > li:nth-child(6) { transform: rotate(225deg); z-index: 3; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#B3FB83FA', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmYjgzZmEiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, rgba(251, 131, 250, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: -webkit-linear-gradient(45deg, rgba(251, 131, 250, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: linear-gradient(45deg, rgba(251, 131, 250, 0.7) 50%, rgba(255, 255, 255, 0) 51%);
}
ul > li:nth-child(7) { transform: rotate(270deg); z-index: 2; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#B3E5E696', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNlNWU2OTYiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, rgba(229, 230, 150, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: -webkit-linear-gradient(45deg, rgba(229, 230, 150, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: linear-gradient(45deg, rgba(229, 230, 150, 0.7) 50%, rgba(255, 255, 255, 0) 51%);
}
ul > li:nth-child(8) { transform: rotate(315deg); z-index: 1; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#B3FCFFF4', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmY2ZmZjQiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, rgba(252, 255, 244, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: -webkit-linear-gradient(45deg, rgba(252, 255, 244, 0.7) 50%, rgba(255, 255, 255, 0) 51%); background-image: linear-gradient(45deg, rgba(252, 255, 244, 0.7) 50%, rgba(255, 255, 255, 0) 51%);
}
.star { position: absolute; display: block; color: #ffe0bc; z-index: 100000; opacity: 0.25; width: 0px; height: 0px; border-right: 10px solid transparent; border-bottom: 7px solid #ffe0bc; border-left: 10px solid transparent; animation: shine 5s infinite; transform: rotate(35deg) scale(0); transition: transform 5s;
}
.star.size1 { transform: rotate(35deg) scale(0.3);
}
.star.size2 { transform: rotate(35deg) scale(0.4);
}
.star.size3 { transform: rotate(35deg) scale(0.5);
}
.star:before { border-bottom: 8px solid #ffe0bc; border-left: 3px solid transparent; border-right: 3px solid transparent; position: absolute; height: 0; width: 0; top: -4.5px; left: -6.5px; display: block; content: ''; transform: rotate(-35deg);
}
.star:after { position: absolute; display: block; color: #ffe0bc; top: 0.3px; left: -10.5px; width: 0px; height: 0px; border-right: 10px solid transparent; border-bottom: 7px solid #ffe0bc; border-left: 10px solid transparent; transform: rotate(-70deg); content: '';
}
@keyframes wave { 0% { transform: rotate(0deg); } 65% { transform: rotate(-360deg); } 100% { transform: rotate(-720deg); }
}
@keyframes sunset { 0% { margin-left: -40px; width: 80px; height: 10px; box-shadow: 0px -10px 200px 40px yellow; } 90% { margin-left: -30px; width: 60px; height: 0px; box-shadow: 0px 0px 0px 0px yellow; } 100% { margin-left: -30px; width: 60px; height: 0px; box-shadow: 0px 0px 0px 0px yellow; }
}
@keyframes vane-shadow { from { transform: rotate(-15deg); opacity: 0.5; } to { transform: rotate(25deg); opacity: 0.1; }
}
@keyframes darken-sky { from { -webkit-filter: brightness(1) grayscale(0); } to { -webkit-filter: brightness(0.2) grayscale(1); }
}
@keyframes darken-ground { from { -webkit-filter: brightness(1) grayscale(0); } to { -webkit-filter: brightness(0.4) grayscale(0.5); }
}
@keyframes shine { from { -webkit-filter: hue-rotate(0deg); } to { -webkit-filter: hue-rotate(30deg); }
}

Playing At Sunset - Script Codes JS Codes

$(document).ready(function() { var skyWidth = $('.sky').width(); var skyHeight = $('.sky').height()/2; var starDensity = Math.floor(skyWidth * skyHeight / 6000); for (var i = 0; i < starDensity; i++) { randomDelay = Math.floor((Math.random()*30)+20) * 1000; randomX = Math.floor((Math.random()*skyWidth)); randomY = Math.floor((Math.random()*skyHeight)); randomSize = Math.floor((Math.random()*3)+1); // some JavaScript closure setTimeout((function(randomX, randomY, randomSize) { return function() { // add a star to the sky var $newElem = $('<i class="star" style="top: '+randomY+'px; left: '+randomX+'px;"></i>').appendTo('body'); // make it scale and shine setTimeout((function($newElem, randomSize) { return function() { $newElem.addClass('size'+randomSize); } })($newElem, randomSize),1); } })(randomX, randomY, randomSize), randomDelay); }
});

Home Page	Home
Developer	Yogev Ahuvia
Username	kindofone
Uploaded	September 11, 2022
Rating	3.5
Size	12,065 Kb
Views	20,240

Do you need developer help for Playing At Sunset?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yogev Ahuvia (kindofone) Script Codes

Name	Size
The CodePen Logo	4,259 Kb
3D Cube of 3D Balls	4,507 Kb
Reactive CSS Transitions	4,405 Kb
Ball Bouncing On Text	5,553 Kb
Living Interfaces - Talk	7,280 Kb
Live Bricks	7,014 Kb
Subtle Buttons	4,010 Kb
A Pen by Yogev Ahuvia	1,941 Kb
Bouncy Icon Select Menu	6,673 Kb
CSS Filter Glass	7,188 Kb

Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Parallax with only CSS	Thulioph	2,297 Kb
Toggling Divs with jQuery	Yying6	1,967 Kb
Rows with image hover effect	Amit-webdesigner	12,875 Kb
Haml Calendar	Katydecorah	5,643 Kb
Canvas stripes	Adrianparr	1,948 Kb
The Monty Hall Problem	Melatonind	4,360 Kb
Learning canvas drawing	Aurer	2,204 Kb
Knockout Lists	Marinru	2,531 Kb
Shape Outside - Polygon	Stacy	3,954 Kb
Twinner Spinner II	Katydecorah	2,974 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!