Home  >  Article  >  Web Front-end  >  CSS3-Rotating Gear_html/css_WEB-ITnose

CSS3-Rotating Gear_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:39:421108browse

CSS3-Rotating Gear

View DEMO

With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScript in many web pages.

First, let’s get to know CSS3 animation

The abbreviation of animation animation: name duration timing-function delay iteration-count direction;

**The second is at keyframes* *

Okay, let’s use the above two attributes to make a rotating gear

<style>	.img {		margin: 0 auto;		text-align: center;		width: 400px;		height: 400px;		padding: 0;		animation-name:myrotate;		animation-duration:3s;		animation-timing-function:linear;		animation-delay:0s;		animation-iteration-count:infinite;		animation-direction:normal;		animation-play-state:running;		-moz-animation-name:myrotate;		-moz-animation-duration:3s;		-moz-animation-timing-function:linear;		-moz-animation-delay:0s;		-moz-animation-iteration-count:infinite;		-moz-animation-direction:normal;		-moz-animation-play-state:running;		-webkit-animation-name:myrotate;		-webkit-animation-duration:3s;		-webkit-animation-timing-function:linear;		-webkit-animation-delay:0s;		-webkit-animation-iteration-count:infinite;		-webkit-animation-direction:normal;		-webkit-animation-play-state:running;		-o-animation-name:myrotate;		-o-animation-duration:3s;		-o-animation-timing-function:linear;		-o-animation-delay:0s;		-o-animation-iteration-count:infinite;		-o-animation-direction:normal;		-o-animation-play-state:running;	}		@keyframes myrotate {		from {transform: rotate(0deg);}		to {transform: rotate(360deg);}	}	@-moz-keyframes myrotate {		from {-moz-transform: rotate(0deg);}		to {-moz-transform: rotate(360deg);}	}	@-webkit-keyframes myrotate {		from {-webkit-transform: rotate(0deg);}		to {-webkit-transform: rotate(360deg);}	}	@-o-keyframes myrotate {		from {-o-transform: rotate(0deg);}		to {-o-transform: rotate(360deg);}	}</style><div class="img">	<img src="chilun.png" alt=""></div>

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn