css3应用transition-duration实现九宫格图片旋转动画

主页 M

css3应用transition-duration实现九宫格图片旋转动画

2022-08-15 网页编程网 网页编程网

<style>
img{margin:0;padding:0;}
.box{
width:750px;
height:750px;
/*background:green;*/
margin:50px auto;
}
.content{
float:left;
width:150px;
height:150px;
margin:40px;
}
img{
width:100%;
filter:grayscale(1);/*哀悼模式*/
transition-duration:0.5s;//
}
img:hover{
transform:rotate(360deg) scale(2);
filter:grayscale(0);
}
</style>
<div class="box">
	<div class="content"><img src='http://www.youkud.com/image/logo.png' /></div>
	<div class="content"><img src='http://www.youkud.com/image/logo.png' /></div>
	<div class="content"><img src='http://www.youkud.com/image/logo.png' /></div>
	<div class="content"><img src='http://www.youkud.com/image/logo.png' /></div>
	<div class="content"><img src='http://www.youkud.com/image/logo.png' /></div>
	<div class="content"><img src='http://www.youkud.com/image/logo.png' /></div>
	<div class="content"><img src='http://www.youkud.com/image/logo.png' /></div>
	<div class="content"><img src='http://www.youkud.com/image/logo.png' /></div>
	<div class="content"><img src='http://www.youkud.com/image/logo.png' /></div>	
</div>

阅读原文

阅读 2426

123 显示电脑版