盾牌的动画用鼠标的悬停实现旋转的用法

最新推荐文章于 2022-09-02 13:49:22 发布

程序员小天仙

最新推荐文章于 2022-09-02 13:49:22 发布

阅读量342

点赞数

分类专栏：前端html 文章标签： css过渡动画的属性补间动画 Transition:all 1s; 复合属性

本文链接：https://blog.csdn.net/qq_35307947/article/details/81326953

版权

前端html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	html, body{
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	background-color:green;
	}
	.box{
	height:496px;
	width:420px;
	border:1px solid #000;
	font-size:0;
	}
	img{
	transition:all 1s;
	}
	.box img:nth-child(1){
	transform:translate(580px,450px) rotate(438deg);
	}
	.box img:nth-child(2){
	transform:translate(680px,430px) rotate(638deg);
	}
	.box img:nth-child(3){
	transform:translate(680px,480px) rotate(948deg);
	}
	.box img:nth-child(4){
	transform:translate(480px,330px) rotate(588deg);
	}
	.box:hover img{
	transform:translate(0px,0px) rotate(0deg) ;
	}
	</style>
	</head>
	<body>
	<!--
	.box>img[src="images/shield_1_$$.png"]*9
	-->
	<div class="box">
	<img src="images/shield_1_01.png" alt="">
	<img src="images/shield_1_02.png" alt="">
	<img src="images/shield_1_03.png" alt="">
	<img src="images/shield_1_04.png" alt="">
	<img src="images/shield_1_05.png" alt="">
	<img src="images/shield_1_06.png" alt="">
	<img src="images/shield_1_07.png" alt="">
	<img src="images/shield_1_08.png" alt="">
	<img src="images/shield_1_09.png" alt="">
	</div>
	</body>
	</html> 过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片补间动画：自动完成从起始状态到终止状态的的过渡。关于补间动画更多学习可查看http://mux.alimama.com/posts/1009 特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。 transition-property设置过渡属性 ALL transition-duration设置过渡时间 1s transition-timing-function设置过渡速度 ease-in-out, linear,ease-out transition-delay设置过渡延时 1s Transition:all 1s; 复合属性