网页样式集合

一、按钮

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三角形

 

.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;
}

 

五.空心三角形

 

.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; 
 }