请大神帮我看看这个CSS3特效是怎么做的
这是网页地址：
http://trama.cz/prestavitelny-nabytek-combi
我想知道在网页中间那个鼠标放上去就由酒红色变成白色的那个div的css3代码是怎么写的，求大神贴出代码指点！！
lost_sky浏览 1076回答 1
1回答
-
Ms_Mavis
<!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>
随时随地看视频慕课网APP