多說(shuō)頭像CSS樣式自定義-讓評(píng)論更炫酷

9種頭像CSS動(dòng)畫效果

效果圖
以下效果主要結(jié)合CSS3，所以只在Chrome、Firefox、Safari等瀏覽器中有效果哦~上圖

1.gif
2.gif
3.gif
4.gif
5.gif
6.gif
7.gif
8.gif
9.gif

效果1

#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{   
    -webkit-animation-fill-mode: both;   
    -moz-animation-fill-mode: both;   
    -ms-animation-fill-mode: both;   
    -o-animation-fill-mode: both;   
    animation-fill-mode: both;   
    -webkit-animation-duration: 0s;   
    -moz-animation-duration: 0s;   
    -ms-animation-duration: 0s;   
    -o-animation-duration: 0s;   
    animation-duration: 0s;   
    -webkit-animation-duration: 1s;   
    -moz-animation-duration: 1s;   
    -ms-animation-duration: 1s;   
    -o-animation-duration: 1s;   
    animation-duration: 1s;   
}   
  
@-webkit-keyframes rotateInDownLeft {   
    0% {   
        -webkit-transform-origin: left bottom;   
        -webkit-transform: rotate(-90deg);   
        opacity: 0;   
    }   
       
    100% {   
        -webkit-transform-origin: left bottom;   
        -webkit-transform: rotate(0);   
        opacity: 1;   
    }   
}   
  
@-moz-keyframes rotateInDownLeft {   
    0% {   
        -moz-transform-origin: left bottom;   
        -moz-transform: rotate(-90deg);   
        opacity: 0;   
    }   
       
    100% {   
        -moz-transform-origin: left bottom;   
        -moz-transform: rotate(0);   
        opacity: 1;   
    }   
}   
  
@-o-keyframes rotateInDownLeft {   
    0% {   
        -o-transform-origin: left bottom;   
        -o-transform: rotate(-90deg);   
        opacity: 0;   
    }   
       
    100% {   
        -o-transform-origin: left bottom;   
        -o-transform: rotate(0);   
        opacity: 1;   
    }   
}   
  
@keyframes rotateInDownLeft {   
    0% {   
        transform-origin: left bottom;   
        transform: rotate(-90deg);   
        opacity: 0;   
    }   
       
    100% {   
        transform-origin: left bottom;   
        transform: rotate(0);   
        opacity: 1;   
    }   
}   
  
#ds-reset .ds-avatar img{   
    -webkit-animation-name: rotateInDownLeft;   
    -moz-animation-name: rotateInDownLeft;   
    -o-animation-name: rotateInDownLeft;   
    animation-name: rotateInDownLeft;   
}   
  
#ds-reset .ds-avatar img:hover{   
    -webkit-animation-name: rotateOutDownLeft;   
    -moz-animation-name: rotateOutDownLeft;   
    -o-animation-name: rotateOutDownLeft;   
    animation-name: rotateOutDownLeft;   
}   
@-webkit-keyframes rotateOutDownLeft {   
    0% {   
        -webkit-transform-origin: left bottom;   
        -webkit-transform: rotate(0);   
        opacity: 1;   
    }   
       
    100% {   
        -webkit-transform-origin: left bottom;   
        -webkit-transform: rotate(90deg);   
        opacity: 0;   
    }   
}   
  
@-moz-keyframes rotateOutDownLeft {   
    0% {   
        -moz-transform-origin: left bottom;   
        -moz-transform: rotate(0);   
        opacity: 1;   
    }   
       
    100% {   
        -moz-transform-origin: left bottom;   
        -moz-transform: rotate(90deg);   
        opacity: 0;   
    }   
}   
  
@-o-keyframes rotateOutDownLeft {   
    0% {   
        -o-transform-origin: left bottom;   
        -o-transform: rotate(0);   
        opacity: 1;   
    }   
       
    100% {   
        -o-transform-origin: left bottom;   
        -o-transform: rotate(90deg);   
        opacity: 0;   
    }   
}   
  
@keyframes rotateOutDownLeft {   
    0% {   
        transform-origin: left bottom;   
        transform: rotate(0);   
        opacity: 1;   
    }   
       
    100% {   
        transform-origin: left bottom;   
        transform: rotate(90deg);   
        opacity: 0;   
    }   
}

效果2

#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{   
    -webkit-animation-fill-mode: both;   
    -moz-animation-fill-mode: both;   
    -ms-animation-fill-mode: both;   
    -o-animation-fill-mode: both;   
    animation-fill-mode: both;   
    -webkit-animation-duration: 0s;   
    -moz-animation-duration: 0s;   
    -ms-animation-duration: 0s;   
    -o-animation-duration: 0s;   
    animation-duration: 0s;   
    -webkit-animation-duration: 0.7s;   
    -moz-animation-duration: 0.7s;   
    -ms-animation-duration: 0.7s;   
    -o-animation-duration: 0.7s;   
    animation-duration: 0.7s;   
}   
  
@-webkit-keyframes bounceIn {   
    0% {   
        opacity: 0;   
        -webkit-transform: scale(.3);   
    }   
       
    50% {   
        opacity: 1;   
        -webkit-transform: scale(1.05);   
    }   
       
    70% {   
        -webkit-transform: scale(.9);   
    }   
       
    100% {   
        -webkit-transform: scale(1);   
    }   
}   
  
@-moz-keyframes bounceIn {   
    0% {   
        opacity: 0;   
        -moz-transform: scale(.3);   
    }   
       
    50% {   
        opacity: 1;   
        -moz-transform: scale(1.05);   
    }   
       
    70% {   
        -moz-transform: scale(.9);   
    }   
       
    100% {   
        -moz-transform: scale(1);   
    }   
}   
  
@-o-keyframes bounceIn {   
    0% {   
        opacity: 0;   
        -o-transform: scale(.3);   
    }   
       
    50% {   
        opacity: 1;   
        -o-transform: scale(1.05);   
    }   
       
    70% {   
        -o-transform: scale(.9);   
    }   
       
    100% {   
        -o-transform: scale(1);   
    }   
}   
  
@keyframes bounceIn {   
    0% {   
        opacity: 0;   
        transform: scale(.3);   
    }   
       
    50% {   
        opacity: 1;   
        transform: scale(1.05);   
    }   
       
    70% {   
        transform: scale(.9);   
    }   
       
    100% {   
        transform: scale(1);   
    }   
}   
  
#ds-reset .ds-avatar img {   
    -webkit-animation-name: bounceIn;   
    -moz-animation-name: bounceIn;   
    -o-animation-name: bounceIn;   
    animation-name: bounceIn;   
}   
@-webkit-keyframes bounceOut {   
    0% {   
        -webkit-transform: scale(1);   
    }   
       
    25% {   
        -webkit-transform: scale(.95);   
    }   
       
    50% {   
        opacity: 1;   
        -webkit-transform: scale(1.1);   
    }   
       
    100% {   
        opacity: 0;   
        -webkit-transform: scale(.3);   
    }      
}   
  
@-moz-keyframes bounceOut {   
    0% {   
        -moz-transform: scale(1);   
    }   
       
    25% {   
        -moz-transform: scale(.95);   
    }   
       
    50% {   
        opacity: 1;   
        -moz-transform: scale(1.1);   
    }   
       
    100% {   
        opacity: 0;   
        -moz-transform: scale(.3);   
    }      
}   
  
@-o-keyframes bounceOut {   
    0% {   
        -o-transform: scale(1);   
    }   
       
    25% {   
        -o-transform: scale(.95);   
    }   
       
    50% {   
        opacity: 1;   
        -o-transform: scale(1.1);   
    }   
       
    100% {   
        opacity: 0;   
        -o-transform: scale(.3);   
    }      
}   
  
@keyframes bounceOut {   
    0% {   
        transform: scale(1);   
    }   
       
    25% {   
        transform: scale(.95);   
    }   
       
    50% {   
        opacity: 1;   
        transform: scale(1.1);   
    }   
       
    100% {   
        opacity: 0;   
        transform: scale(.3);   
    }      
}   
  
#ds-reset .ds-avatar img:hover{   
    -webkit-animation-name: bounceOut;   
    -moz-animation-name: bounceOut;   
    -o-animation-name: bounceOut;   
    animation-name: bounceOut;   
}

效果3

#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{   
    -webkit-animation-fill-mode: both;   
    -moz-animation-fill-mode: both;   
    -ms-animation-fill-mode: both;   
    -o-animation-fill-mode: both;   
    animation-fill-mode: both;   
    -webkit-animation-duration: 0s;   
    -moz-animation-duration: 0s;   
    -ms-animation-duration: 0s;   
    -o-animation-duration: 0s;   
    animation-duration: 0s;   
    -webkit-animation-duration: 0.7s;   
    -moz-animation-duration: 0.7s;   
    -ms-animation-duration: 0.7s;   
    -o-animation-duration: 0.7s;   
    animation-duration: 0.7s;   
}   
  
@-webkit-keyframes rotateIn {   
    0% {   
        -webkit-transform-origin: center center;   
        -webkit-transform: rotate(-150deg);   
        opacity: 0;   
    }   
       
    100% {   
        -webkit-transform-origin: center center;   
        -webkit-transform: rotate(0);   
        opacity: 1;   
    }   
}   
@-moz-keyframes rotateIn {   
    0% {   
        -moz-transform-origin: center center;   
        -moz-transform: rotate(-150deg);   
        opacity: 0;   
    }   
       
    100% {   
        -moz-transform-origin: center center;   
        -moz-transform: rotate(0);   
        opacity: 1;   
    }   
}   
@-o-keyframes rotateIn {   
    0% {   
        -o-transform-origin: center center;   
        -o-transform: rotate(-150deg);   
        opacity: 0;   
    }   
       
    100% {   
        -o-transform-origin: center center;   
        -o-transform: rotate(0);   
        opacity: 1;   
    }   
}   
@keyframes rotateIn {   
    0% {   
        transform-origin: center center;   
        transform: rotate(-150deg);   
        opacity: 0;   
    }   
       
    100% {   
        transform-origin: center center;   
        transform: rotate(0);   
        opacity: 1;   
    }   
}   
  
#ds-reset .ds-avatar img{   
    -webkit-animation-name: rotateIn;   
    -moz-animation-name: rotateIn;   
    -o-animation-name: rotateIn;   
    animation-name: rotateIn;   
}   
@-webkit-keyframes rotateOut {   
    0% {   
        -webkit-transform-origin: center center;   
        -webkit-transform: rotate(0);   
        opacity: 1;   
    }   
       
    100% {   
        -webkit-transform-origin: center center;   
        -webkit-transform: rotate(150deg);   
        opacity: 0;   
    }   
}   
  
@-moz-keyframes rotateOut {   
    0% {   
        -moz-transform-origin: center center;   
        -moz-transform: rotate(0);   
        opacity: 1;   
    }   
       
    100% {   
        -moz-transform-origin: center center;   
        -moz-transform: rotate(150deg);   
        opacity: 0;   
    }   
}   
  
@-o-keyframes rotateOut {   
    0% {   
        -o-transform-origin: center center;   
        -o-transform: rotate(0);   
        opacity: 1;   
    }   
       
    100% {   
        -o-transform-origin: center center;   
        -o-transform: rotate(150deg);   
        opacity: 0;   
    }   
}   
  
@keyframes rotateOut {   
    0% {   
        transform-origin: center center;   
        transform: rotate(0);   
        opacity: 1;   
    }   
       
    100% {   
        transform-origin: center center;   
        transform: rotate(150deg);   
        opacity: 0;   
    }   
}   
  
#ds-reset .ds-avatar img:hover{   
    -webkit-animation-name: rotateOut;   
    -moz-animation-name: rotateOut;   
    -o-animation-name: rotateOut;   
    animation-name: rotateOut;   
}

效果4

#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{   
    -webkit-animation-fill-mode: both;   
    -moz-animation-fill-mode: both;   
    -ms-animation-fill-mode: both;   
    -o-animation-fill-mode: both;   
    animation-fill-mode: both;   
    -webkit-animation-duration: 0s;   
    -moz-animation-duration: 0s;   
    -ms-animation-duration: 0s;   
    -o-animation-duration: 0s;   
    animation-duration: 0s;   
    -webkit-animation-duration: 0.7s;   
    -moz-animation-duration: 0.7s;   
    -ms-animation-duration: 0.7s;   
    -o-animation-duration: 0.7s;   
    animation-duration: 0.7s;   
}   
  
@-webkit-keyframes rollIn {   
    0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }   
    100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }   
}   
  
@-moz-keyframes rollIn {   
    0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }   
    100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }   
}   
  
@-o-keyframes rollIn {   
    0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }   
    100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }   
}   
  
@keyframes rollIn {   
    0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }   
    100% { opacity: 1; transform: translateX(0px) rotate(0deg); }   
}   
  
#ds-reset .ds-avatar img{   
    -webkit-animation-name: rollIn;   
    -moz-animation-name: rollIn;   
    -o-animation-name: rollIn;   
    animation-name: rollIn;   
}   
  
  
@-webkit-keyframes rollOut {   
    0% {   
        opacity: 1;   
        -webkit-transform: translateX(0px) rotate(0deg);   
    }   
  
    100% {   
        opacity: 0;   
        -webkit-transform: translateX(100%) rotate(120deg);   
    }   
}   
  
@-moz-keyframes rollOut {   
    0% {   
        opacity: 1;   
        -moz-transform: translateX(0px) rotate(0deg);   
    }   
  
    100% {   
        opacity: 0;   
        -moz-transform: translateX(100%) rotate(120deg);   
    }   
}   
  
@-o-keyframes rollOut {   
    0% {   
        opacity: 1;   
        -o-transform: translateX(0px) rotate(0deg);   
    }   
  
    100% {   
        opacity: 0;   
        -o-transform: translateX(100%) rotate(120deg);   
    }   
}   
  
@keyframes rollOut {   
    0% {   
        opacity: 1;   
        transform: translateX(0px) rotate(0deg);   
    }   
  
    100% {   
        opacity: 0;   
        transform: translateX(100%) rotate(120deg);   
    }   
}   
  
#ds-reset .ds-avatar img:hover{   
    -webkit-animation-name: rollOut;   
    -moz-animation-name: rollOut;   
    -o-animation-name: rollOut;   
    animation-name: rollOut;   
}

效果5

#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{   
    -webkit-animation-fill-mode: both;   
    -moz-animation-fill-mode: both;   
    -ms-animation-fill-mode: both;   
    -o-animation-fill-mode: both;   
    animation-fill-mode: both;   
    -webkit-animation-duration: 0s;   
    -moz-animation-duration: 0s;   
    -ms-animation-duration: 0s;   
    -o-animation-duration: 0s;   
    animation-duration: 0s;   
    -webkit-animation-duration: 0.7s;   
    -moz-animation-duration: 0.7s;   
    -ms-animation-duration: 0.7s;   
    -o-animation-duration: 0.7s;   
    animation-duration: 0.7s;   
}   
  
@-webkit-keyframes swing {   
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }   
    20% { -webkit-transform: rotate(15deg); }      
    40% { -webkit-transform: rotate(-10deg); }   
    60% { -webkit-transform: rotate(5deg); }       
    80% { -webkit-transform: rotate(-5deg); }      
    100% { -webkit-transform: rotate(0deg); }   
}   
  
@-moz-keyframes swing {   
    20% { -moz-transform: rotate(15deg); }     
    40% { -moz-transform: rotate(-10deg); }   
    60% { -moz-transform: rotate(5deg); }      
    80% { -moz-transform: rotate(-5deg); }     
    100% { -moz-transform: rotate(0deg); }   
}   
  
@-o-keyframes swing {   
    20% { -o-transform: rotate(15deg); }       
    40% { -o-transform: rotate(-10deg); }   
    60% { -o-transform: rotate(5deg); }    
    80% { -o-transform: rotate(-5deg); }       
    100% { -o-transform: rotate(0deg); }   
}   
  
@keyframes swing {   
    20% { transform: rotate(15deg); }      
    40% { transform: rotate(-10deg); }   
    60% { transform: rotate(5deg); }       
    80% { transform: rotate(-5deg); }      
    100% { transform: rotate(0deg); }   
}   
  
#ds-reset .ds-avatar img:hover{   
    -webkit-transform-origin: top center;   
    -moz-transform-origin: top center;   
    -o-transform-origin: top center;   
    transform-origin: top center;   
    -webkit-animation-name: swing;   
    -moz-animation-name: swing;   
    -o-animation-name: swing;   
    animation-name: swing;   
}

效果6

#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{   
    -webkit-animation-fill-mode: both;   
    -moz-animation-fill-mode: both;   
    -ms-animation-fill-mode: both;   
    -o-animation-fill-mode: both;   
    animation-fill-mode: both;   
    -webkit-animation-duration: 0s;   
    -moz-animation-duration: 0s;   
    -ms-animation-duration: 0s;   
    -o-animation-duration: 0s;   
    animation-duration: 0s;   
    -webkit-animation-duration: 0.7s;   
    -moz-animation-duration: 0.7s;   
    -ms-animation-duration: 0.7s;   
    -o-animation-duration: 0.7s;   
    animation-duration: 0.7s;   
}   
  
@-webkit-keyframes pulse {   
    0% { -webkit-transform: scale(1); }    
    50% { -webkit-transform: scale(1.1); }   
    100% { -webkit-transform: scale(1); }   
}   
@-moz-keyframes pulse {   
    0% { -moz-transform: scale(1); }       
    50% { -moz-transform: scale(1.1); }   
    100% { -moz-transform: scale(1); }   
}   
@-o-keyframes pulse {   
    0% { -o-transform: scale(1); }     
    50% { -o-transform: scale(1.1); }   
    100% { -o-transform: scale(1); }   
}   
@keyframes pulse {   
    0% { transform: scale(1); }    
    50% { transform: scale(1.1); }   
    100% { transform: scale(1); }   
}   
  
#ds-reset .ds-avatar img:hover {   
    -webkit-animation-name: pulse;   
    -moz-animation-name: pulse;   
    -o-animation-name: pulse;   
    animation-name: pulse;   
}

效果7

#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{   
    -webkit-animation-fill-mode: both;   
    -moz-animation-fill-mode: both;   
    -ms-animation-fill-mode: both;   
    -o-animation-fill-mode: both;   
    animation-fill-mode: both;   
    -webkit-animation-duration: 0s;   
    -moz-animation-duration: 0s;   
    -ms-animation-duration: 0s;   
    -o-animation-duration: 0s;   
    animation-duration: 0s;   
    -webkit-animation-duration: 0.7s;   
    -moz-animation-duration: 0.7s;   
    -ms-animation-duration: 0.7s;   
    -o-animation-duration: 0.7s;   
    animation-duration: 0.7s;   
}   
  
@-webkit-keyframes wobble {   
  0% { -webkit-transform: translateX(0%); }   
  15% { -webkit-transform: translateX(-25%) rotate(-5deg); }   
  30% { -webkit-transform: translateX(20%) rotate(3deg); }   
  45% { -webkit-transform: translateX(-15%) rotate(-3deg); }   
  60% { -webkit-transform: translateX(10%) rotate(2deg); }   
  75% { -webkit-transform: translateX(-5%) rotate(-1deg); }   
  100% { -webkit-transform: translateX(0%); }   
}   
  
@-moz-keyframes wobble {   
  0% { -moz-transform: translateX(0%); }   
  15% { -moz-transform: translateX(-25%) rotate(-5deg); }   
  30% { -moz-transform: translateX(20%) rotate(3deg); }   
  45% { -moz-transform: translateX(-15%) rotate(-3deg); }   
  60% { -moz-transform: translateX(10%) rotate(2deg); }   
  75% { -moz-transform: translateX(-5%) rotate(-1deg); }   
  100% { -moz-transform: translateX(0%); }   
}   
  
@-o-keyframes wobble {   
  0% { -o-transform: translateX(0%); }   
  15% { -o-transform: translateX(-25%) rotate(-5deg); }   
  30% { -o-transform: translateX(20%) rotate(3deg); }   
  45% { -o-transform: translateX(-15%) rotate(-3deg); }   
  60% { -o-transform: translateX(10%) rotate(2deg); }   
  75% { -o-transform: translateX(-5%) rotate(-1deg); }   
  100% { -o-transform: translateX(0%); }   
}   
  
@keyframes wobble {   
  0% { transform: translateX(0%); }   
  15% { transform: translateX(-25%) rotate(-5deg); }   
  30% { transform: translateX(20%) rotate(3deg); }   
  45% { transform: translateX(-15%) rotate(-3deg); }   
  60% { transform: translateX(10%) rotate(2deg); }   
  75% { transform: translateX(-5%) rotate(-1deg); }   
  100% { transform: translateX(0%); }   
}   
  
#ds-reset .ds-avatar img:hover{   
    -webkit-animation-name: wobble;   
    -moz-animation-name: wobble;   
    -o-animation-name: wobble;   
    animation-name: wobble;   
}

效果8

#ds-reset .ds-avatar img{   
    width:54px;height:54px; /*設(shè)置圖像的長(zhǎng)和寬，這里要根據(jù)自己的評(píng)論框情況更改*/  
    border-radius: 27px;/*設(shè)置圖像圓角效果,在這里我直接設(shè)置了超過(guò)width/2的像素，即為圓形了*/  
    -webkit-border-radius: 27px;/*圓角效果：兼容webkit瀏覽器*/  
    -moz-border-radius:27px;   
    box-shadow: inset 0 -1px 0 #3333sf;/*設(shè)置圖像陰影效果*/  
    -webkit-box-shadow: inset 0 -1px 0 #3333sf;   
    -webkit-transition: 0.4s;      
    -webkit-transition: -webkit-transform 0.4s ease-out;   
    transition: transform 0.4s ease-out;/*變化時(shí)間設(shè)置為0.4秒(變化動(dòng)作即為下面的圖像旋轉(zhuǎn)360讀）*/  
    -moz-transition: -moz-transform 0.4s ease-out;   
}    
#ds-reset .ds-avatar img:hover{/*設(shè)置鼠標(biāo)懸浮在頭像時(shí)的CSS樣式*/  
    box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);   
    -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);   
    transform: rotateZ(360deg);/*圖像旋轉(zhuǎn)360度*/  
    -webkit-transform: rotateZ(360deg);   
    -moz-transform: rotateZ(360deg);   
}

效果9

#ds-reset .ds-avatar img:hover {   
    -webkit-animation-fill-mode: both;   
    -moz-animation-fill-mode: both;   
    -ms-animation-fill-mode: both;   
    -o-animation-fill-mode: both;   
    animation-fill-mode: both;   
    -webkit-animation-duration: 0s;   
    -moz-animation-duration: 0s;   
    -ms-animation-duration: 0s;   
    -o-animation-duration: 0s;   
    animation-duration: 0s;   
    -webkit-animation-duration: 1s;   
    -moz-animation-duration: 1s;   
    -ms-animation-duration: 1s;   
    -o-animation-duration: 1s;   
    animation-duration: 1s;   
    -webkit-transform-style: preserve-3d;   
    -moz-transform-style: preserve-3d;   
    -o-transform-style: preserve-3d;   
    transform-style: preserve-3d;   
    -webkit-backface-visibility: visible !important;   
    -webkit-animation-name: flip;   
    -moz-backface-visibility: visible !important;   
    -moz-animation-name: flip;   
    -o-backface-visibility: visible !important;   
    -o-animation-name: flip;   
    backface-visibility: visible !important;   
    animation-name: flip;   
}   
 @-webkit-keyframes flip {     
 0% {-webkit-transform: perspective(400px) rotateY(0);-webkit-animation-timing-function: ease-out;}   
 40% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function: ease-out;}   
 50% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function: ease-in;}   
 80% {-webkit-transform: perspective(400px) rotateY(360deg) scale(.95);-webkit-animation-timing-function: ease-in;}   
 100% {-webkit-transform: perspective(400px) scale(1);-webkit-animation-timing-function: ease-in;}   
}   
  
@-moz-keyframes flip {     
0% {-moz-transform: perspective(400px) rotateY(0);-moz-animation-timing-function: ease-out;}   
 40% {-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function: ease-out;}   
 50% {-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function: ease-in;}   
 80% {-moz-transform: perspective(400px) rotateY(360deg) scale(.95);-moz-animation-timing-function: ease-in;}   
 100% {-moz-transform: perspective(400px) scale(1);-moz-animation-timing-function: ease-in;}   
}   
@-o-keyframes flip {     
0% {-o-transform: perspective(400px) rotateY(0);-o-animation-timing-function: ease-out;}   
 40% {-o-transform: perspective(400px) translateZ(150px) rotateY(170deg);-o-animation-timing-function: ease-out;}   
 50% {-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-o-animation-timing-function: ease-in;}   
 80% {-o-transform: perspective(400px) rotateY(360deg) scale(.95); -o-animation-timing-function: ease-in;}   
 100% {-o-transform: perspective(400px) scale(1);-o-animation-timing-function: ease-in;}   
}   
@keyframes flip {     
0% {transform: perspective(400px) rotateY(0);animation-timing-function: ease-out;}   
 40% {transform: perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function: ease-out;}   
 50% {transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function: ease-in;}   
 80% {transform: perspective(400px) rotateY(360deg) scale(.95);animation-timing-function: ease-in;}   
 100% {transform: perspective(400px) scale(1);animation-timing-function: ease-in;}   
}

轉(zhuǎn)載原文地址鏈接
移動(dòng)端網(wǎng)頁(yè)重構(gòu)指南 – CSS篇
移html

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末说搅，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子虏等，更是在濱河造成了極大的恐慌弄唧，老刑警劉巖，帶你破解...
    沈念sama閱讀 222,183評(píng)論 6贊 516
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件霍衫，死亡現(xiàn)場(chǎng)離奇詭異候引，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)敦跌，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評(píng)論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門澄干，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人柠傍，你說(shuō)我怎么就攤上這事麸俘。” “怎么了惧笛？”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,766評(píng)論 0贊 361
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵从媚，是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我患整，道長(zhǎng)拜效，這世上最難降的妖魔是什么喷众？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,854評(píng)論 1贊 299
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮紧憾，結(jié)果婚禮上到千，老公的妹妹穿的比我還像新娘。我一直安慰自己赴穗，他們只是感情好憔四，可當(dāng)我...
    茶點(diǎn)故事閱讀 68,871評(píng)論 6贊 398
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著般眉，像睡著了一般了赵。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上煤篙，一...
    開(kāi)封第一講書(shū)人閱讀 52,457評(píng)論 1贊 311
  • 城市分裂傳說(shuō)
    那天斟览，我揣著相機(jī)與錄音毁腿，去河邊找鬼辑奈。 笑死，一個(gè)胖子當(dāng)著我的面吹牛已烤，可吹牛的內(nèi)容都是我干的鸠窗。 我是一名探鬼主播，決...
    沈念sama閱讀 40,999評(píng)論 3贊 422
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼胯究，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼稍计！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起裕循，我...
    開(kāi)封第一講書(shū)人閱讀 39,914評(píng)論 0贊 277
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤臣嚣，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后剥哑，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體硅则，經(jīng)...
    沈念sama閱讀 46,465評(píng)論 1贊 319
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,543評(píng)論 3贊 342
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年株婴，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了怎虫。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,675評(píng)論 1贊 353
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡困介，死狀恐怖大审，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情座哩，我是刑警寧澤徒扶，帶...
    沈念sama閱讀 36,354評(píng)論 5贊 351
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站根穷，受9級(jí)特大地震影響酷愧，放射性物質(zhì)發(fā)生泄漏驾诈。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,029評(píng)論 3贊 335
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一溶浴、第九天 我趴在偏房一處隱蔽的房頂上張望乍迄。 院中可真熱鬧，春花似錦士败、人聲如沸闯两。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,514評(píng)論 0贊 25
  • 一樁弒父案谅将，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)漾狼。三九已至，卻和暖如春饥臂，著一層夾襖步出監(jiān)牢的瞬間逊躁，已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,616評(píng)論 1贊 274
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工隅熙， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留稽煤，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,091評(píng)論 3贊 378
  • 代替公主和親
    正文 我出身青樓囚戚，卻偏偏與公主長(zhǎng)得像酵熙，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子驰坊，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,685評(píng)論 2贊 360

推薦閱讀更多精彩內(nèi)容

  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color匾二，font，text－align拳芙，li...
    wzhiq896閱讀 1,760評(píng)論 0贊 2
  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color察藐，font，text－align舟扎，li...
    love2013閱讀 2,316評(píng)論 0贊 11
  • 1.前言 最近有很多朋友問(wèn)我有沒(méi)有相關(guān)的書(shū)籍推薦分飞，希望能夠自學(xué)一下前端。 正好最近在查閱文章的時(shí)候浆竭，發(fā)現(xiàn)有朋友已經(jīng)...
    MR_LIXP閱讀 115,779評(píng)論 223贊 4,484
  • 相信在默默積蓄力量浸须、用心沉淀的過(guò)程中，歲月最終會(huì)在合適的時(shí)間給予恩賜邦泄，成就人生的綻放删窒。 面對(duì)生命中的磨礪自己用積極...
    昌悟道閱讀 113評(píng)論 0贊 0
  • 昨晚的街頭上， 邂逅過(guò)一只 北方的兔子顺囊。 兔子啊肌索，我的歌聲 是否打動(dòng)了你？ 你紅色的眼睛特碳， 和我一起 望著街頭诚亚。 ...
    劉賢裕V閱讀 220評(píng)論 0贊 0