这是网页地址：http://trama.cz/prestavitelny-nabytek-combi我想知道在网页中间那个鼠标放上去就由酒红色变成白色的那个div的css3代码是怎么写的，求大神贴出代码指点！！
1 回答
已采纳
Ms_Mavis
TA贡献13条经验 获得超9个赞
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.nav li{
list-style-type: none;
width:200px;
height:50px;
line-height: 50px;
border-left: 1px solid red;
border-right: 3px solid red;
text-align: center;
background:#d05f68;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
position:relative;
}
.nav li b{
color:#ffffff;
position:relative;
}
.nav li span{
color:#e39fa4;
position:relative;
}
.nav li div{
width:100%;
background:#ffffff;
height:0px;
position:absolute;
bottom:0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
transform: skewY(25deg);
-ms-transform: skewY(25deg);
-webkit-transform: skewY(25deg);
-o-transform: skewY(25deg);
-moz-transform: skewY(25deg);
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
}
.nav li:hover{
background:#ffffff;
}
.nav li:hover b{
color:#666666;
}
.nav li:hover span{
color:#666666;
}
.nav li:hover div{
height:100%;
transform: skewY(0deg);
-ms-transform: skewY(0deg);
-webkit-transform: skewY(0deg);
-o-transform: skewY(0deg);
-moz-transform: skewY(0deg);
}
</style>
</head>
<body>
<ul>
<li>
<div></div>
<b>PRIME</b><span>combi</span>
</li>
</ul>
</body>
</html>
- 1 回答
- 0 关注
- 1049 浏览
添加回答
举报
0/150
提交
取消