阳光之城alt
阳光之城alt

多说头像CSS样式自定义-让评论更炫酷

9种头像CSS动画效果

效果图
以下效果主要结合CSS3，所以只在Chrome、Firefox、Safari等浏览器中有效果哦~上图

多说头像CSS样式自定义-让评论更炫酷_第1张图片
1.gif
多说头像CSS样式自定义-让评论更炫酷_第2张图片
2.gif
多说头像CSS样式自定义-让评论更炫酷_第3张图片
3.gif
多说头像CSS样式自定义-让评论更炫酷_第4张图片
4.gif
多说头像CSS样式自定义-让评论更炫酷_第5张图片
5.gif
多说头像CSS样式自定义-让评论更炫酷_第6张图片
6.gif
多说头像CSS样式自定义-让评论更炫酷_第7张图片
7.gif
多说头像CSS样式自定义-让评论更炫酷_第8张图片
8.gif
多说头像CSS样式自定义-让评论更炫酷_第9张图片
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; /*设置图像的长和宽，这里要根据自己的评论框情况更改*/  
    border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/  
    -webkit-border-radius: 27px;/*圆角效果：兼容webkit浏览器*/  
    -moz-border-radius:27px;   
    box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/  
    -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;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读）*/  
    -moz-transition: -moz-transform 0.4s ease-out;   
}    
#ds-reset .ds-avatar img:hover{/*设置鼠标悬浮在头像时的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);/*图像旋转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;}   
}

转载原文地址链接
移动端网页重构指南 – CSS篇
移html

你可能感兴趣的:(多说头像CSS样式自定义-让评论更炫酷)

  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • 铭刻于星（四十二） 随风至
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
  • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说 造命者说
    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
  • 一百九十四章. 自相矛盾 巨木擎天
    唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • 谢谢你们，爱你们！ 鹿游儿
    昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
  • c++ 的iostream 和 c++的stdio的区别和联系 黄卷青灯77 c++算法开发语言iostreamstdio
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
  • 《策划经理回忆录之二》 路基雅虎
    话说三年变六年，飘了，飘了……眨眼，2013年5月，老吴回到了他的家乡——油城从新开启他的工作幻想症生涯。很庆幸，这是一家很有追求，同时敢于尝试的，且实力不容低调的新星房企——金源置业(前身泰源置业)更值得庆幸的是第一个盘就是油城十路的标杆之一:金源盛世。2013年5月，到2015年11月，两年的陪伴，迎来了一场大爆发。2000个筹，5万/筹，直接回笼1个亿！！！这……让我开始认真审视这座看似五线
  • 绘本讲师训练营【24期】8/21阅读原创《独生小孩》 1784e22615e0
    24016-孟娟《独生小孩》图片发自App今天我想分享一个蛮特别的绘本，讲的是一个特殊的群体，我也是属于这个群体，80后的独生小孩。这是一本中国绘本，作者郭婧，也是一个80厚。全书一百多页，均为铅笔绘制，虽然为黑白色调，但并不显得沉闷。全书没有文字，犹如“默片”，但并不影响读者对该作品的理解，反而显得神秘，梦幻，給读者留下想象的空间。作者在前蝴蝶页这样写到：“我更希望父母和孩子一起分享这本书，使他
  • 30天风格练习-DAY2 黄希夷
    Day2（重义）在一个周日/一周的最后一天，我来到位于市中心/市区繁华地带的一家购物中心/商场，中心内人很多/熙熙攘攘。我注意到/看见一个独行/孤身一人的年轻女孩/，留着一头引人注目/长过腰际的头发，上身穿一件暗红色/比正红色更深的衣服/穿在身体上的东西。走下扶梯的时候，她摔倒了/跌向地面，在她正要站起来/让身体离开地面的时候，过长/超过一般人长度的头发被支撑身体/躯干的手掌压/按在下面，她赶紧用
  • 活给自己看，笑容才灿烂 听着了么
    白岩松说“有时候，我们活得很累，并非生活过于刻薄，而是我们太容易被外界的氛围所感染，被他人的情绪所左右。”心情是自己的。若只是活在别人的眼里、嘴里，便掌握不了让自己开心的主动权。人活着，不是为了活给别人看的，唯有做最真实的自己，活给自己看，笑容才灿烂。诚然，世事纷繁复杂，人人都有一张嘴，管也管不了。永远有人欣赏你，也永远有人批评你，不可能做到让所有人都满意，开心做自己才是最重要的。人生苦短，有太多
  • 2022-04-18 Apbenz
    语重心长的和我说，不要老是说不行，人至而立之年危机四伏，内在的，外在的，感觉就是心力憔悴，让人无所适从。面对职场的无情，突然好羡慕干体力劳动的外卖小哥。难道命运是想让我去送外卖了吗？干体力活才能让我活下去？fastadmin打卡成功,淘宝金币任务完成。ㅏㅓㅗㅜㅡㅣㅐㅔㅑㅕㅛㅠㅢㅒㅖY行。야자여자요리우유의사얘기예
  • 2019-12-22-22:30 涓涓1016
    今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的
  • 从鸡肉高汤到记忆的魔法再到有效提示的艺术 步子哥 人工智能
    还记得小时候那些天马行空的白日梦吗？也许只要按下键盘上的某个神奇组合，电脑就会发出滴滴的声响，一个隐藏的世界突然在你眼前展开，让你获得超凡的能力，摆脱平凡的生活。这听起来像是玩过太多电子游戏的幻想，但实际上，间隔重复系统给人的感觉惊人地相似。在最佳状态下，这些系统就像魔法一样神奇。本文将以一个看似平凡的鸡肉高汤食谱为例，深入浅出地探讨如何编写有效的间隔重复提示，让你像掌握烹饪技巧一样轻松地掌握记忆
  • LLM 词汇表 落难Coder LLMsNLP大语言模型大模型llama人工智能
    Contextwindow“上下文窗口”是指语言模型在生成新文本时能够回溯和参考的文本量。这不同于语言模型训练时所使用的大量数据集，而是代表了模型的“工作记忆”。较大的上下文窗口可以让模型理解和响应更复杂和更长的提示，而较小的上下文窗口可能会限制模型处理较长提示或在长时间对话中保持连贯性的能力。Fine-tuning微调是使用额外的数据进一步训练预训练语言模型的过程。这使得模型开始表示和模仿微调数
  • 感赏日志133 马姐读书
    图片发自App感赏自己今天买个扫地机，以后可以解放出来多看点书，让这个智能小机器人替我工作了。感赏孩子最近进步很大，每天按时上学，认真听课，认真背书，主动认真完成老师布置的作业。感赏自己明白自己容易受到某人的影响，心情不好，每当此刻我就会舒缓，感赏，让自己尽快抽离，想好的一面。感赏儿子今天在我提醒他事情时，告诉我谢谢妈妈对我的提醒我明白了，而不是说我啰嗦，管事情，孩子更懂事了，懂得感恩了。投射父母
  • 我的黑历史 袖手围观有来有去
    孩子同学与我们一起共进晚餐，俩孩子加我三个人。小同学是一个大方率性礼貌的小孩，我们也都非常喜欢。好了，回到正题上来让我把这个故事讲完。俩孩子都喜欢吃鱼，所以就发生了小孩子之间常会发生的事。我狠狠的盯了我家孩子，孩子表情有些狼狈。和孩子单独一起的时候，见她尚未释怀，并谴责我不该狠盯她，让她没面子。也许是她触动了我的童年往事吧。由此，一狠心，给她讲了一段埋藏心里极深的黑历史：我奶奶有四个儿子，四个儿子
  • 使用 FinalShell 进行远程连接（ssh 远程连接 Linux 服务器） 编程经验分享 开发工具服务器sshlinux
    目录前言基本使用教程新建远程连接连接主机自定义命令路由追踪前言后端开发，必然需要和服务器打交道，部署应用，排查问题，查看运行日志等等。一般服务器都是集中部署在机房中，也有一些直接是云服务器，总而言之，程序员不可能直接和服务器直接操作，一般都是通过ssh连接来登录服务器。刚接触远程连接时，使用的是XSHELL来远程连接服务器，连接上就能够操作远程服务器了，但是仅用XSHELL并没有上传下载文件的功能
  • 关于提高复杂业务逻辑代码可读性的思考 编程经验分享 开发经验java数据库开发语言
    目录前言需求场景常规写法拆分方法领域对象总结前言实际工作中大部分时间都是在写业务逻辑，一般都是三层架构，表示层（Controller）接收客户端请求，并对入参做检验，业务逻辑层（Service）负责处理业务逻辑，一般开发都是在这一层中写具体的业务逻辑。数据访问层（Dao）是直接和数据库交互的，用于查数据给业务逻辑层，或者是将业务逻辑层处理后的数据写入数据库。简单的增删改查接口不用多说，基本上写好一
  • 18-115 一切思考不能有效转化为行动，都TM是扯淡！ 成长时间线
    7月25号写了一篇关于为什么会断更如此严重的反思，然而，之后日更仅仅维持了一周，又出现了这次更严重的现象。从8月2号到昨天8月6号，5天！又是5天没有更文！虽然这次断更时间和上次一样，那为什么说这次更严重？因为上次之后就分析了问题的原因，以及应该如何解决，按理说应该会好转，然而，没过几天严重断更的现象再次出现，想想，经过反思，问题依然没有解决与改变，这让我有些担忧。到底是哪里出了问题，难道我就真的
  • 山东大学小树林支教调研团青青仓木队——翟晓楠 山东大学青青仓木队
    过了半年，又一次启程，又一次回到支教的初心之地。比起上一次的试探与不安，我更多了一丝稳重与熟练。心境、处境也都随着半个学期的过去而变得不同，半个学期中，身体上的，心理上的，太多的逆境让我变得步履维艰，曲曲折折，弯弯绕绕，我仿佛打不起精神，没有胃口，没有动力。感觉走的不顺畅的时候，支教这个旅程，给了我力量。自告奋勇承担起队长这一职务的我，从组织时的复杂和困难的经历，协调各种问题，从无到有，和校长和队
  • 【夜读】提升生活品质的8个建议 茳淮秀水
    停止攀比很多人之所以感觉疲惫，部分原因是来自于跟别人攀比。殊不知，攀比得到的满足只是片刻的，过后往往会感到空虚。过分在意别人的评价，丢失的是自己原有的审美，扰乱的是自己最初的节奏。不妨活得洒脱些，自己内心丰盈了，快乐就能更持久。停止自责想改变自己，先从接纳自己开始。越是过分自责，就越难改变现状，因为如果把精力全耗在自责上，就没有精力用来改变了。遇到问题，我们要用正确的心态去面对。与其一味自责，不如
  • 郎朗大婚娶公主：所有光环的背后，都是十年如一日的自律 简小尘
    近日，关于郎朗大婚的新闻上了热搜，看了新娘的照片，既有天使般的面容，更有魔鬼般的身材，关键是人家还身世好，又有才华，这真的是让所有男人羡慕嫉妒恨哪。有些人不禁会想，“凭什么郎朗的人生就象开挂了一样，可我却每天都活得这么狼狈！”其实，每个开挂的人生背后，都是苦行僧般的自律。01欲戴王冠，必承其重。练琴不能只靠兴趣，更需要自律！我们先来看一下朗朗在小时候的作息时间表：早晨5:45起床，练琴1小时。中午
  • 我在意的 Yuexiaofeng
    我所在意的，往往是你最容易忽略的，这让我感到为难。我所感动的，你却无动于衷，这使我感到惭愧。我所做的，你却视而不见，这让我不知如何是好。
  • 读《人世间》有感 一0一
    这个寒假，就如同朋友圈中的一段话：一闭眼，一睁眼假期还有5天，在一闭眼一睁眼假期还有12天；再一闭眼一睁眼假期还有20天；不敢睡，不敢睡啊……受疫情影响，这个假期变得漫长又煎熬，我也无时无刻不关注着疫情的变化。当然这样的一个假期，我还真得要感谢周翔，因为他有个爱看书的习惯，所以家里有不少他看过的书，可以让我随意挑选，因此也让我的假期不至于那么无所事事。这次我选了一本梁晓声的《人世间》，作为一名语文
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 少了生活气息 我爱大草莓
    最近啊，总觉得自己日更的内容缺了点什么。我仔细地想，大概是少了些生活气息。这两三个月减少了许多与别人相处的时间，独自生活，偶尔只是出去买菜，总觉得生活好像变空了许多。买菜的时候会跟档口的阿姨聊一两句话，让自己感觉在真实地生活着。幸好我也不是一宅到底，偶尔周末也会约着跟好朋友见面，面对面交流跟隔着屏幕交流，效果还是不一样的，至少有更为真实的生活感。写作不仅需要有阅读量，有文笔，生活阅历也是非常重要的
  • 2020-04-12每天三百字之连接与替代 冷眼看潮
    不知道是不是好为人师，有时候还真想和别人分享一下我对某些现象的看法或者解释。人类社会不断发展进步的过程，就是不断连接与替代的过程。人类发现了火并应用火以后，告别了茹毛饮血的野兽般的原始生活（火烧、烹饪替代了生食）人类用石器代替了完全手工，工具的使用使人类进步一大步。类似这样的替代还有很多，随着科技的发展，有更多的原始的事物被替代，代之以更高效、更先进的技术。在近现代，汽车替代了马车，高速公路和铁路
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 如何部分格式化提示模板:LangChain中的高级技巧 nseejrukjhad langchainjava服务器python
    标题:如何部分格式化提示模板:LangChain中的高级技巧内容:如何部分格式化提示模板:LangChain中的高级技巧引言在使用大型语言模型(LLM)时,提示工程是一个关键环节。LangChain提供了强大的提示模板功能,让我们能更灵活地构建和管理提示。本文将介绍LangChain中一个高级特性-部分格式化提示模板,这个技巧可以让你的提示管理更加高效和灵活。什么是部分格式化提示模板?部分格式化提
  • 多线程编程之存钱与取钱 周凡杨 javathread多线程存钱取钱
      生活费问题是这样的：学生每月都需要生活费，家长一次预存一段时间的生活费，家长和学生使用统一的一个帐号，在学生每次取帐号中一部分钱，直到帐号中没钱时 通知家长存钱，而家长看到帐户还有钱则不存钱，直到帐户没钱时才存钱。   问题分析：首先问题中有三个实体，学生、家长、银行账户，所以设计程序时就要设计三个类。其中银行账户只有一个，学生和家长操作的是同一个银行账户，学生的行为是
  • java中数组与List相互转换的方法 征客丶 JavaScriptjavajsonp
    1.List转换成为数组。（这里的List是实体是ArrayList) 　　调用ArrayList的toArray方法。 　　toArray 　　public T[] toArray(T[] a)返回一个按照正确的顺序包含此列表中所有元素的数组；返回数组的运行时类型就是指定数组的运行时类型。如果列表能放入指定的数组，则返回放入此列表元素的数组。否则，将根据指定数组的运行时类型和此列表的大小分
  • Shell 流程控制 daizj 流程控制if elsewhilecaseshell
    Shell 流程控制 和Java、PHP等语言不一样，sh的流程控制不可为空，如(以下为PHP流程控制写法)： <?php if(isset($_GET["q"])){ search(q);}else{// 不做任何事情} 在sh/bash里可不能这么写，如果else分支没有语句执行，就不要写这个else，就像这样 if else if if 语句语
  • Linux服务器新手操作之二 周凡杨 Linux 简单 操作
    1.利用关键字搜寻Man Pages    man -k keyword  其中-k 是选项，keyword是要搜寻的关键字 如果现在想使用whoami命令，但是只记住了前3个字符who，就可以使用 man -k who来搜寻关键字who的man命令       [haself@HA5-DZ26 ~]$ man -k
  • socket聊天室之服务器搭建 朱辉辉33 socket
    因为我们做的是聊天室，所以会有多个客户端，每个客户端我们用一个线程去实现，通过搭建一个服务器来实现从每个客户端来读取信息和发送信息。    我们先写客户端的线程。 public class ChatSocket extends Thread{ Socket socket; public ChatSocket(Socket socket){ this.sock
  • 利用finereport建设保险公司决策分析系统的思路和方法 老A不折腾 finereport金融保险分析系统报表系统项目开发
    决策分析系统呈现的是数据页面，也就是俗称的报表，报表与报表间、数据与数据间都按照一定的逻辑设定，是业务人员查看、分析数据的平台，更是辅助领导们运营决策的平台。底层数据决定上层分析，所以建设决策分析系统一般包括数据层处理（数据仓库建设）。   项目背景介绍 通常，保险公司信息化程度很高，基本上都有业务处理系统（像集团业务处理系统、老业务处理系统、个人代理人系统等）、数据服务系统（通过
  • 始终要页面在ifream的最顶层 林鹤霄
    index.jsp中有ifream，但是session消失后要让login.jsp始终显示到ifream的最顶层。。。始终没搞定，后来反复琢磨之后，得到了解决办法，在这儿给大家分享下。。 index.jsp--->主要是加了颜色的那一句 <html> <iframe name="top" ></iframe> <ifram
  • MySQL binlog恢复数据 aigo mysql
    1，先确保my.ini已经配置了binlog：   # binlog log_bin = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.log log_bin_index = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.index log_error = D:/mysql-5.6.21-win
  • OCX打成CBA包并实现自动安装与自动升级 alxw4616 ocxcab
    近来手上有个项目,需要使用ocx控件 (ocx是什么? http://baike.baidu.com/view/393671.htm) 在生产过程中我遇到了如下问题. 1. 如何让 ocx 自动安装?     a) 如何签名?     b) 如何打包?     c) 如何安装到指定目录? 2.
  • Hashmap队列和PriorityQueue队列的应用 百合不是茶 Hashmap队列PriorityQueue队列
      HashMap队列已经是学过了的,但是最近在用的时候不是很熟悉,刚刚重新看以一次,   HashMap是K,v键 ,值     put()添加元素      //下面试HashMap去掉重复的 package com.hashMapandPriorityQueue; import java.util.H
  • JDK1.5 returnvalue实例 bijian1013 javathreadjava多线程returnvalue
    Callable接口： 返回结果并且可能抛出异常的任务。实现者定义了一个不带任何参数的叫做 call 的方法。 Callable 接口类似于 Runnable，两者都是为那些其实例可能被另一个线程执行的类设计的。但是 Runnable 不会返回结果，并且无法抛出经过检查的异常。        ExecutorService接口方
  • angularjs指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效 bijian1013 JavaScriptAngularJS
            在directive的link中有一个$http请求，当请求完成后根据返回的值动态做element.append('......');这个操作，能显示没问题，可问题是我动态组的HTML里面有ng-click，发现显示出来的内容根本不执行ng-click绑定的方法！     
  • 【Java范型二】Java范型详解之extend限定范型参数的类型 bit1129 extend
    在第一篇中，定义范型类时，使用如下的方式：   public class Generics<M, S, N> { //M,S,N是范型参数 }  这种方式定义的范型类有两个基本的问题：   1. 范型参数定义的实例字段，如private M m = null;由于M的类型在运行时才能确定，那么我们在类的方法中，无法使用m，这跟定义pri
  • 【HBase十三】HBase知识点总结 bit1129 hbase
    1. 数据从MemStore flush到磁盘的触发条件有哪些？    a.显式调用flush，比如flush 'mytable'    b.MemStore中的数据容量超过flush的指定容量，hbase.hregion.memstore.flush.size,默认值是64M 2. Region的构成是怎么样？ 1个Region由若干个Store组成
  • 服务器被DDOS攻击防御的SHELL脚本 ronin47
    mkdir /root/bin vi /root/bin/dropip.sh #!/bin/bash/bin/netstat -na|grep ESTABLISHED|awk ‘{print $5}’|awk -F:‘{print $1}’|sort|uniq -c|sort -rn|head -10|grep -v -E ’192.168|127.0′|awk ‘{if($2!=null&a
  • java程序员生存手册-craps 游戏-一个简单的游戏 bylijinnan java
    import java.util.Random; public class CrapsGame { /** * *一个简单的赌*博游戏，游戏规则如下： *玩家掷两个骰子，点数为1到6，如果第一次点数和为7或11，则玩家胜， *如果点数和为2、3或12，则玩家输， *如果和为其它点数，则记录第一次的点数和，然后继续掷骰，直至点数和等于第一次掷出的点
  • TOMCAT启动提示NB: JAVA_HOME should point to a JDK not a JRE解决 开窍的石头 JAVA_HOME
    当tomcat是解压的时候，用eclipse启动正常，点击startup.bat的时候启动报错; 报错如下：   The JAVA_HOME environment variable is not defined correctly This environment variable is needed to run this program NB: JAVA_HOME shou
  • [操作系统内核]操作系统与互联网 comsci 操作系统
         我首先申明：我这里所说的问题并不是针对哪个厂商的，仅仅是描述我对操作系统技术的一些看法       操作系统是一种与硬件层关系非常密切的系统软件，按理说，这种系统软件应该是由设计CPU和硬件板卡的厂商开发的，和软件公司没有直接的关系，也就是说，操作系统应该由做硬件的厂商来设计和开发
  • 富文本框ckeditor_4.4.7 文本框的简单使用 支持IE11 cuityang 富文本框
    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>知识库内容编辑</tit
  • Property null not found darrenzhu datagridFlexAdvancedpropery null
    When you got error message like "Property null not found ***", try to fix it by the following way: 1)if you are using AdvancedDatagrid, make sure you only update the data in the data prov
  • MySQl数据库字符串替换函数使用 dcj3sjt126com mysql函数替换
    需求：需要将数据表中一个字段的值里面的所有的  .   替换成  _   原来的数据是  site.title  site.keywords  .... 替换后要为     site_title  site_keywords   使用的SQL语句如下：   updat
  • mac上终端起动MySQL的方法 dcj3sjt126com mysqlmac
    首先去官网下载: http://www.mysql.com/downloads/ 我下载了5.6.11的dmg然后安装,安装完成之后..如果要用终端去玩SQL.那么一开始要输入很长的:/usr/local/mysql/bin/mysql 这不方便啊,好想像windows下的cmd里面一样输入mysql -uroot -p1这样...上网查了下..可以实现滴. 打开终端,输入: 1
  • Gson使用一（Gson） eksliang jsongson
    转载请出自出处：http://eksliang.iteye.com/blog/2175401 一.概述 从结构上看Json，所有的数据（data）最终都可以分解成三种类型： 第一种类型是标量（scalar），也就是一个单独的字符串（string）或数字（numbers），比如"ickes"这个字符串。 第二种类型是序列（sequence），又叫做数组（array）
  • android点滴4 gundumw100 android
    Android 47个小知识 http://www.open-open.com/lib/view/open1422676091314.html Android实用代码七段（一） http://www.cnblogs.com/over140/archive/2012/09/26/2611999.html http://www.cnblogs.com/over140/arch
  • JavaWeb之JSP基本语法 ihuning javaweb
      目录   JSP模版元素  JSP表达式  JSP脚本片断  EL表达式  JSP注释  特殊字符序列的转义处理  如何查找JSP页面中的错误   JSP模版元素    JSP页面中的静态HTML内容称之为JSP模版元素，在静态的HTML内容之中可以嵌套JSP
  • App Extension编程指南（iOS8/OS X v10.10）中文版 啸笑天 ext
             当iOS 8.0和OS X v10.10发布后，一个全新的概念出现在我们眼前，那就是应用扩展。顾名思义，应用扩展允许开发者扩展应用的自定义功能和内容，能够让用户在使用其他app时使用该项功能。你可以开发一个应用扩展来执行某些特定的任务，用户使用该扩展后就可以在多个上下文环境中执行该任务。比如说，你提供了一个能让用户把内容分
  • SQLServer实现无限级树结构 macroli oraclesqlSQL Server
    表结构如下： 数据库id path titlesort 排序 1 0 首页 0 2 0,1 新闻 1 3 0,2 JAVA 2 4 0,3 JSP 3 5 0,2,3 业界动态 2 6 0,2,3 国内新闻 1 创建一个存储过程来实现，如果要在页面上使用可以设置一个返回变量将至传过去   create procedure test as begin decla
  • Css居中div，Css居中img，Css居中文本，Css垂直居中div qiaolevip 众观千象学习永无止境每天进步一点点css
    /**********Css居中Div**********/ div.center { width: 100px; margin: 0 auto; } /**********Css居中img**********/ img.center { display: block; margin-left: auto; margin-right: auto; }
  • Oracle 常用操作(实用) 吃猫的鱼 oracle
    SQL>select text from all_source where owner=user and name=upper('&plsql_name');  SQL>select * from user_ind_columns where index_name=upper('&index_name');  将表记录恢复到指定时间段以前
  • iOS中使用RSA对数据进行加密解密 witcheryne iosrsaiPhoneobjective c
      RSA算法是一种非对称加密算法,常被用于加密数据传输.如果配合上数字摘要算法, 也可以用于文件签名. 本文将讨论如何在iOS中使用RSA传输加密数据. 本文环境 mac os  openssl-1.0.1j, openssl需要使用1.x版本, 推荐使用[homebrew](http://brew.sh/)安装. Java 8 RSA基本原理 RS
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他