Skip to content

Instantly share code, notes, and snippets.

@SharmaTushar

SharmaTushar/flower-3.html

Created February 12, 2017 13:04
Show Gist options
  • Save SharmaTushar/72bc6feb2ae0ae96b188faf1c7a21e02 to your computer and use it in GitHub Desktop.
Save SharmaTushar/72bc6feb2ae0ae96b188faf1c7a21e02 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flower-3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: #222222;
}
ul {
width: 200px;
height: 200px;
position: absolute;
top: 50%; bottom: 50%; left: 50%; right: 50%;
}
ul li {
border-radius: 50px;
position: absolute;
list-style: none;
height: 150px;
width: 40px;
/*border: 2px solid #f8f8ff;*/
filter: saturate(130%) opacity(97%) drop-shadow(0px 0px 50px rgba(255,0,0,1));
transition: linear 1s;
transform:translateY(-200px) skewY(45deg);
transform-origin: 22% 0;
animation: rotate-cw 16s linear infinite;
}
ul li:nth-child(1) { animation-delay: 0s; }
ul li:nth-child(2) { animation-delay: 1s; }
ul li:nth-child(3) { animation-delay: 2s; }
ul li:nth-child(4) { animation-delay: 3s; }
ul li:nth-child(5) { animation-delay: 4s; }
ul li:nth-child(6) { animation-delay: 5s; }
ul li:nth-child(7) { animation-delay: 6s; }
ul li:nth-child(8) { animation-delay: 7s; }
ul li:nth-child(9) { animation-delay: 8s; }
ul li:nth-child(10) { animation-delay: 9s; }
ul li:nth-child(11) { animation-delay: 10s; }
ul li:nth-child(12) { animation-delay: 11s; }
ul li:nth-child(13) { animation-delay: 12s; }
ul li:nth-child(14) { animation-delay: 13s; }
ul li:nth-child(15) { animation-delay: 14s; }
ul li:nth-child(16) { animation-delay: 15s; }
ul li:nth-child(even) {
z-index: 1;
background: linear-gradient(rgb(255, 0, 0) 0%, rgb(128, 0, 0) 50%, rgb(220, 20, 60) 100%);
}
ul li:nth-child(odd) {
z-index: 0;
background: linear-gradient(rgb(220, 20, 60) 0%, rgb(128, 0, 0) 50%, rgb(255, 0, 0) 100%);
/*background: linear-gradient(
rgb(255, 255, 255) 0%,
rgb(128, 0, 0) 12.5%,
rgb(255,255,255) 25%,
rgb(128, 0, 0) 37.5%,
rgb(255,255,255) 50%,
rgb(128, 0, 0) 62.5%,
rgb(255,255,255) 75%,
rgb(128, 0, 0) 87.5%,
rgb(255,255,255) 100%
);*/
}
@keyframes rotate-cw {
0% {
transform: rotate(0) translateY(-200px) skewY(45deg);
}
50% {
/*background-color: #f8f8ff;*/
}
100% {
transform: rotate(360deg) translateY(-200px) skewY(45deg);
}
}
@keyframes colorize {
0%, 100% {
background: none;
}
50% {
background: #f8f8ff;
}
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment