Skip to content

Instantly share code, notes, and snippets.

@SharmaTushar

SharmaTushar/flower-2.html

Created February 12, 2017 10:56
Show Gist options
  • Save SharmaTushar/99f538af2f69996f82ccf7452fc71689 to your computer and use it in GitHub Desktop.
Save SharmaTushar/99f538af2f69996f82ccf7452fc71689 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flower-2.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 {
position: absolute;
list-style: none;
height: 150px;
width: 40px;
border: 2px solid #f8f8ff;
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; }
@keyframes rotate-cw {
0% {
transform: rotate(0) translateY(-200px) skewY(45deg);
}
100% {
transform: rotate(360deg) translateY(-200px) skewY(45deg);
}
}
</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