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