网页编程网

www.youkud.com

当前位置：主页 >> html5 >> 正文

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

阅读：2881 输入：2022-08-10 15:23:28

<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>

上一篇：强化学习推荐网站
下一篇：js中Promise实例

相关阅读: css3设计伪元素实现太极阴阳图并旋转; css3动画实现跳动的心，相对定位; css3动画来回摇摆的小球（flex布局，vw与vh，变形等）

下载专区: 软件下载（提取码：mtag）

Tag

HTML工具: 进制间转换; 进制转换（带小数）; html代码运行

HTML工具: 字母翻转; 硬盘整数分区; html颜色代码

HTML工具: 除空格回车; 万年历; fojiao

HTML工具: 小游戏; 在线绘画; 更多

手机版
联系微信:jingqishens