一、box-shadow: 0 2px 15px 0 rgba(0,0,0,.15)!important

二、

   
     box-shadow: 0 2px 6px 0 rgba(0,0,0,.4);

三、

.tofu-block-hover {

transition: opacity 0.3s,width 4s,height 4s;

border: 1px solid #e7e7e7;

padding: 18px;

background-color: #fff;

position: absolute;

border: 1px solid #00c1e0;

width: 120%;

height: 120%;

margin-top: -8%;

margin-left: -8%;

box-shadow: 0 0 8px #00c1e0;

z-index: 2;

/* opacity: 0; */

filter: alpha(opacity=0);

-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(0));

}

四、

li:hover {

   　 border: 1px solid #00c1de;

　　 box-shadow: 0 0 20px rgba(0, 198, 226, 0.5);

}

 

 五、图片高亮样式

.figure_pic {

transition: box-shadow .15s linear,-webkit-filter .3s ease-out;

box-shadow: 0 4px 8px rgba(40,40,40,.2);

-webkit-filter: saturate(1.15) contrast(1.15) brightness(1.1);

}

 六、线条样式

.mod_title:before {

content: '';

position: absolute;

top: 50%;

left: 0;

right: 10px;

margin-top: -1px;

height: 2px;

background: #eee;

background: linear-gradient(to right,#eee 80%,transparent 100%);

}

七、旋转

 

八、动画

 

.ic_pagearr {

position: absolute;

bottom: 40px;

left: 50%;

z-index: 10;

background: url(http://www.xunlei.com/v2017/k_pc/public/images/ic_spr24.png) no-repeat -124px 0;

width: 38px;

height: 21px;

margin-left: -19px;

animation: page_arr 1.6s both linear infinite;

-webkit-animation: page_arr 1.6s both linear infinite;

}

@keyframes page_arr {

0% {

transform: translate(0)

}

25% {

transform: translateY(4px)

}

75% {

transform: translateY(-4px)

}

to {

transform: translate(0)

}

}

 九、出场效果

    
                         
     
       
      
       1
      
       
      
       2
      
       
      
       2
      
       
      
       2
      
    
     
    
     
       
      
       1
      
       
      
       2
      
       
      
       2
      
       
      
       2
      
    
     
   
     
       
      
       1
      
       
      
       2
      
       
      
       2
      
       
      
       2