一、按钮
input{
-webkit-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
box-shadow: 0px 14px 20px -9px rgba(0, 0, 0,
}
二.块
li{
-webkit-transform: translate3d(0, 0, 0);
}
li:hover{
box-shadow: 0 0 20px rgba(0,0,0,.3);
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
三.鼠标移动
li{
position: relative;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
}
li:after{
content: "";
position: absolute;
left: 51%;
right: 51%;
bottom: 0;
background-color: #36bae8;
height: 2px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
li.on:after{
left: 0;
right: 0;
}
四.border三角形
<div class="border-left"></div>
<div class="border-top"></div>
<div class="border-right"></div>
<div class="border-bottom"></div>
.border-left{
width: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
.border-top{
width: 0;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.border-right{
width: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
.border-bottom{
width: 0;
border-left: 50px solid transparent;
border-bottom: 100px solid red;
border-right: 50px solid transparent;
}
五.空心三角形
<div class="triangle"></div>
.triange{
margin-left: 20px;
position: relative;
display: inline-block;
vertical-align: middle;
}
.triange:before {
content: '';
position: absolute;
top: 10px;
left: -10px;
width: 0;
height: 0;
border-right: 10px solid red;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
.triange:after {
content: '';
position: absolute;
top: 11px;
left: -9px;
width: 0;
height: 0;
border-bottom: 9px solid transparent;
border-right: 9px solid #fff;
border-top: 9px solid transparent;
}