css3动画旋转综合应用

主页 M

css3动画旋转综合应用

2022-08-23 网页编程网 网页编程网

<style>
.wrap{
background:red;
width:100%;
height:100px;
}
.wrap>div{
position:absolute;
top:0;
left:0;
width:300px;
height:100px;
background:green;
transition:all 1s;
background-size:cover;
}
/*css3选择器，先选择其父*/
.wrap div:nth-child(1){
	background-image:url('http://www.youkud.com/image/logo.png');
	transition-delay:0.2s;
}
.wrap div:nth-child(2){
	background-image:url('http://www.youkud.com/image/logo.png');
	transition-delay:0.4s;
}
.wrap div:nth-child(3){
	background-image:url('http://www.youkud.com/image/logo.png');
	transition-delay:0.6s;
}
.wrap div:nth-child(4){
	background-image:url('http://www.youkud.com/image/logo.png');
	transition-delay:0.8s;
}
.wrap div:nth-child(5){
	background-image:url('http://www.youkud.com/image/logo.png');
	transition-delay:1s;
}
.wrap:hover div:nth-child(1){
	top:600px;
	left:0;
	transform:rotateY(360deg);
}
.wrap:hover div:nth-child(2){
	top:500px;
	left:300px;
	transform:rotateY(360deg);
}
.wrap:hover div:nth-child(3){
	top:400px;
	left:600px;
	transform:rotateY(360deg);
}
.wrap:hover div:nth-child(4){
	top:300px;
	left:900px;
	transform:rotateY(360deg);
}
.wrap:hover div:nth-child(5){
	top:200px;
	left:1200px;
	transform:rotateY(360deg);
}
</style>
<div class="wrap">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

阅读原文

阅读 2964

123 显示电脑版