css3运用opacity实现旋转的菜单，背景图，类选择等

主页 M

css3运用opacity实现旋转的菜单，背景图，类选择等

2022-08-10 网页编程网 网页编程网

<style>
.wrap{
width:100px;
height:60px;
background:red;
margin:0 auto;
}
.wrap > div{
opacity:0;/*完全不见*/
width:100px;
height:60px;
background:green;
transition:all 2s;/*不能对已消失的元素生效*/
}
.wrap > .active{
opacity:1;
}
.wrap:hover div{
opacity:1;
transform:rotateY(360deg) translateZ(300px);
}
.wrap div:nth-child(2){
/*加背景图片*/
background-size:cover;
background-image:url('http://www.youkud.com/image/logo.png');
transition-delay:0.2s;
}
.wrap div:nth-child(3){
	transition-delay:0.4s;
}
.wrap div:nth-child(4){
	transition-delay:0.6s;
}
.wrap div:nth-child(5){
	transition-delay:0.8s;
}
</style>
<div class="wrap">
	<div class="active"></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

阅读原文

阅读 2883

123 显示电脑版