SharmaTushar/flower.html

## flower.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 2s;
            transform:translateY(-200px) skewY(45deg);
            transform-origin: 22% 0;
            animation: rotate-cw 8s 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; }

        @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> </ul>
</body>
</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 2s;
	transform:translateY(-200px) skewY(45deg);
	transform-origin: 22% 0;
	animation: rotate-cw 8s 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; }

	@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> </ul>
	</body>
	</html>