How to achieve enlargement and rotation animation effect in css3-CSS Tutorial-php.cn

How to achieve enlargement and rotation animation effect in css3

青灯夜游

Release： 2021-12-15 16:48:42

Original

4114 people have browsed it

Method: 1. Use the animation attribute to bind animation to the element; 2. Use "@keyframes animation name {50%{width: the enlarged width value; height: the enlarged height value; transform:rotate(rotate Angle);}}" statement controls the action of the animation to achieve enlargement and rotation.

How to achieve enlargement and rotation animation effect in css3

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css3 realizes the enlargement and rotation animation effect

In HTML, you can use the animation attribute and "@keyframes" to create an element to enlarge Rotating animation. Use the width and height attributes in animation to control element enlargement; transform:rotate() controls element rotation.

Implementation code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 50px;
				height: 50px;
				background: red;
				margin: 100px;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
			}

			@keyframes mymove {
				50% {
					width: 150px;
					height: 150px;
					transform: rotate(360deg);
				}

			}

			@-webkit-keyframes mymove{  /* Safari and Chrome */
				50% {
					width: 100px;
					height: 100px;
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

Copy after login

How to achieve enlargement and rotation animation effect in css3

(Learning video sharing: css video tutorial)

The above is the detailed content of How to achieve enlargement and rotation animation effect in css3. For more information, please follow other related articles on the PHP Chinese website!