zhensolid
/
Python-100-Days


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS - 动画效果</title>
		<style>
			#one, #two, #three {
				position: fixed;
				width: 200px;
				height: 200px;
				top: 100px;
			}
			#one {
				background-color: purple;
				left: 100px;
				animation: foo 10s;
			}
			#two {
				background-color: gold;
				left: 400px;
				animation: foo 2s infinite;
			}
			#three {
				background-color: darkgreen;
				left: 700px;
				animation: foo 0.5s infinite;
			}
			@keyframes foo {
				from {
					transform: rotate(0deg);
				}
				to {
					transform: rotate(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div id="one"></div>
		<div id="two"></div>
		<div id="three"></div>
	</body>
</html>