css3 动画 示例
/* animation */
.a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}
.a-fadein,.a-fadeinT,.a-fadeinR,.a-fadeinB,.a-fadeinL,.a-bouncein,.a-bounceinT,.a-bounceinR,.a-bounceinB,.a-bounceinL,.a-rotatein,.a-rotateinLT,.a-rotateinLB,.a-rotateinRT,.a-rotateinRB,.a-flipin,.a-flipinX,.a-flipinY{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards;}
.a-fadeout,.a-fadeoutT,.a-fadeoutR,.a-fadeoutB,.a-fadeoutL,.a-bounceout,.a-bounceoutT,.a-bounceoutR,.a-bounceoutB,.a-bounceoutL,.a-rotateout,.a-rotateoutLT,.a-rotateoutLB,.a-rotateoutRT,.a-rotateoutRB,.a-flipout,.a-flipoutX,.a-flipoutY{-webkit-animation:1s ease-in forwards;-moz-animation:1s ease-in forwards;-ms-animation:1s ease-in forwards;animation:1s ease-in forwards;}
/* 淡入 */
.a-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein;}
/* 淡入-从上 */
.a-fadeinT{-webkit-animation-name:fadeinT;-moz-animation-name:fadeinT;-ms-animation-name:fadeinT;animation-name:fadeinT;}
/* 淡入-从右 */
.a-fadeinR{-webkit-animation-name:fadeinR;-moz-animation-name:fadeinR;-ms-animation-name:fadeinR;animation-name:fadeinR;}
/* 淡入-从下 */
.a-fadeinB{-webkit-animation-name:fadeinB;-moz-animation-name:fadeinB;-ms-animation-name:fadeinB;animation-name:fadeinB;}
/* 淡入-从左 */
.a-fadeinL{-webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL;}
/* 淡出 */
.a-fadeout{-webkit-animation-name:fadeout;-moz-animation-name:fadeout;-ms-animation-name:fadeout;animation-name:fadeout;}
/* 淡出-向上 */
.a-fadeoutT{-webkit-animation-name:fadeoutT;-moz-animation-name:fadeoutT;-ms-animation-name:fadeoutT;animation-name:fadeoutT;}
/* 淡出-向右 */
.a-fadeoutR{-webkit-animation-name:fadeoutR;-moz-animation-name:fadeoutR;-ms-animation-name:fadeoutR;animation-name:fadeoutR;}
/* 淡出-向下 */
.a-fadeoutB{-webkit-animation-name:fadeoutB;-moz-animation-name:fadeoutB;-ms-animation-name:fadeoutB;animation-name:fadeoutB;}
/* 淡出-向左 */
.a-fadeoutL{-webkit-animation-name:fadeoutL;-moz-animation-name:fadeoutL;-ms-animation-name:fadeoutL;animation-name:fadeoutL;}
/* 弹跳 */
.a-bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;animation-name:bounce;}
/* 弹入 */
.a-bouncein{-webkit-animation-name:bouncein;-moz-animation-name:bouncein;-ms-animation-name:bouncein;animation-name:bouncein;}
/* 弹入-从上 */
.a-bounceinT{-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT;}
/* 弹入-从右 */
.a-bounceinR{-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR;}
/* 弹入-从下 */
.a-bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB;}
/* 弹入-从左 */
.a-bounceinL{-webkit-animation-name:bounceinL;-moz-animation-name:bounceinL;-ms-animation-name:bounceinL;animation-name:bounceinL;}
/* 弹出 */
.a-bounceout{-webkit-animation-name:bounceout;-moz-animation-name:bounceout;-ms-animation-name:bounceout;animation-name:bounceout;}
/* 弹出-向上 */
.a-bounceoutT{-webkit-animation-name:bounceoutT;-moz-animation-name:bounceoutT;-ms-animation-name:bounceoutT;animation-name:bounceoutT;}
/* 弹出-向右 */
.a-bounceoutR{-webkit-animation-name:bounceoutR;-moz-animation-name:bounceoutR;-ms-animation-name:bounceoutR;animation-name:bounceoutR;}
/* 弹出-向下 */
.a-bounceoutB{-webkit-animation-name:bounceoutB;-moz-animation-name:bounceoutB;-ms-animation-name:bounceoutB;animation-name:bounceoutB;}
/* 弹出-向左 */
.a-bounceoutL{-webkit-animation-name:bounceoutL;-moz-animation-name:bounceoutL;-ms-animation-name:bounceoutL;animation-name:bounceoutL;}
/* 转入 */
.a-rotatein{-webkit-animation-name:rotatein;-moz-animation-name:rotatein;-ms-animation-name:rotatein;animation-name:rotatein;}
/* 转入-从左上 */
.a-rotateinLT{-webkit-animation-name:rotateinLT;-moz-animation-name:rotateinLT;-ms-animation-name:rotateinLT;animation-name:rotateinLT;}
/* 转入-从左下 */
.a-rotateinLB{-webkit-animation-name:rotateinLB;-moz-animation-name:rotateinLB;-ms-animation-name:rotateinLB;animation-name:rotateinLB;}
/* 转入-从右上 */
.a-rotateinRT{-webkit-animation-name:rotateinRT;-moz-animation-name:rotateinRT;-ms-animation-name:rotateinRT;animation-name:rotateinRT;}
/* 转入-从右下*/
.a-rotateinRB{-webkit-animation-name:rotateinRB;-moz-animation-name:rotateinRB;-ms-animation-name:rotateinRB;animation-name:rotateinRB;}
/* 转出 */
.a-rotateout{-webkit-animation-name:rotateout;-moz-animation-name:rotateout;-ms-animation-name:rotateout;animation-name:rotateout;}
/* 转出-向左上 */
.a-rotateoutLT{-webkit-animation-name:rotateoutLT;-moz-animation-name:rotateoutLT;-ms-animation-name:rotateoutLT;animation-name:rotateoutLT;}
/* 转出-向左下 */
.a-rotateoutLB{-webkit-animation-name:rotateoutLB;-moz-animation-name:rotateoutLB;-ms-animation-name:rotateoutLB;animation-name:rotateoutLB;}
/* 转出-向右上 */
.a-rotateoutRT{-webkit-animation-name:rotateoutRT;-moz-animation-name:rotateoutRT;-ms-animation-name:rotateoutRT;animation-name:rotateoutRT;}
/* 转出-向右下 */
.a-rotateoutRB{-webkit-animation-name:rotateoutRB;-moz-animation-name:rotateoutRB;-ms-animation-name:rotateoutRB;animation-name:rotateoutRB;}
/* 翻转 */
.a-flip{-webkit-animation-name:flip;-moz-animation-name:flip;-ms-animation-name:flip;animation-name:flip;}
/* 翻入-X轴 */
.a-flipinX{-webkit-animation-name:flipinX;-moz-animation-name:flipinX;-ms-animation-name:flipinX;animation-name:flipinX;}
/* 翻入-Y轴 */
.a-flipin,.a-flipinY{-webkit-animation-name:flipinY;-moz-animation-name:flipinY;-ms-animation-name:flipinY;animation-name:flipinY;}
/* 翻出-X轴 */
.a-flipoutX{-webkit-animation-name:flipoutX;-moz-animation-name:flipoutX;-ms-animation-name:flipoutX;animation-name:flipoutX;}
/* 翻出-Y轴 */
.a-flipout,.a-flipoutY{-webkit-animation-name:flipoutY;-moz-animation-name:flipoutY;-ms-animation-name:flipoutY;animation-name:flipoutY;}
/* 闪烁 */
.a-flash{-webkit-animation-name:flash;-moz-animation-name:flash;-ms-animation-name:flash;animation-name:flash;}
/* 震颤 */
.a-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-ms-animation-name:shake;animation-name:shake;}
/* 摇摆 */
.a-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing;}
/* 摇晃 */
.a-wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-ms-animation-name:wobble;animation-name:wobble;}
/* 震铃 */
.a-ring{-webkit-animation-name:ring;-moz-animation-name:ring;-ms-animation-name:ring;animation-name:ring;}
/* define */
/* 淡入 */
@-webkit-keyframes fadein{
0%{opacity:;}
100%{opacity:;}
}
@-moz-keyframes fadein{
0%{opacity:;}
100%{opacity:;}
}
@-ms-keyframes fadein{
0%{opacity:;}
100%{opacity:;}
}
@keyframes fadein{
0%{opacity:;}
100%{opacity:;}
}
/* 淡入-从上 */
@-webkit-keyframes fadeinT{
0%{opacity:;-webkit-transform:translateY(-100px);}
100%{opacity:;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeinT{
0%{opacity:;-moz-transform:translateY(-100px);}
100%{opacity:;-moz-transform:translateY(0);}
}
@-ms-keyframes fadeinT{
0%{opacity:;-ms-transform:translateY(-100px);}
100%{opacity:;-ms-transform:translateY(0);}
}
@keyframes fadeinT{
0%{opacity:;transform:translateY(-100px);}
100%{opacity:;transform:translateY(0);}
}
/* 淡入-从右 */
@-webkit-keyframes fadeinR{
0%{opacity:;-webkit-transform:translateX(100px);}
100%{opacity:;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeinR{
0%{opacity:;-moz-transform:translateX(100px);}
100%{opacity:;-moz-transform:translateX(0);}
}
@-ms-keyframes fadeinR{
0%{opacity:;-ms-transform:translateX(100px);}
100%{opacity:;-ms-transform:translateX(0);}
}
@keyframes fadeinR{
0%{opacity:;transform:translateX(100px);}
100%{opacity:;transform:translateX(0);}
}
/* 淡入-从下 */
@-webkit-keyframes fadeinB{
0%{opacity:;-webkit-transform:translateY(100px);}
100%{opacity:;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeinB{
0%{opacity:;-moz-transform:translateY(100px);}
100%{opacity:;-moz-transform:translateY(0);}
}
@-ms-keyframes fadeinB{
0%{opacity:;-ms-transform:translateY(100px);}
100%{opacity:;-ms-transform:translateY(0);}
}
@keyframes fadeinB{
0%{opacity:;transform:translateY(100px);}
100%{opacity:;transform:translateY(0);}
}
/* 淡入-从左 */
@-webkit-keyframes fadeinL{
0%{opacity:;-webkit-transform:translateX(-100px);}
100%{opacity:;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeinL{
0%{opacity:;-moz-transform:translateX(-100px);}
100%{opacity:;-moz-transform:translateX(0);}
}
@-ms-keyframes fadeinL{
0%{opacity:;-ms-transform:translateX(-100px);}
100%{opacity:;-ms-transform:translateX(0);}
}
@keyframes fadeinL{
0%{opacity:;transform:translateX(-100px);}
100%{opacity:;transform:translateX(0);}
}
/* 淡出 */
@-webkit-keyframes fadeout{
0%{opacity:;}
100%{opacity:;}
}
@-moz-keyframes fadeout{
0%{opacity:;}
100%{opacity:;}
}
@-ms-keyframes fadeout{
0%{opacity:;}
100%{opacity:;}
}
@keyframes fadeout{
0%{opacity:;}
100%{opacity:;}
}
/* 淡出-向上 */
@-webkit-keyframes fadeoutT{
0%{opacity:;-webkit-transform:translateY(0);}
100%{opacity:;-webkit-transform:translateY(-100px);}
}
@-moz-keyframes fadeoutT{
0%{opacity:;-moz-transform:translateY(0);}
100%{opacity:;-moz-transform:translateY(-100px);}
}
@-ms-keyframes fadeoutT{
0%{opacity:;-ms-transform:translateY(0);}
100%{opacity:;-ms-transform:translateY(-100px);}
}
@keyframes fadeoutT{
0%{opacity:;transform:translateY(0);}
100%{opacity:;transform:translateY(-100px);}
}
/* 淡出-向右 */
@-webkit-keyframes fadeoutR{
0%{opacity:;-webkit-transform:translateX(0);}
100%{opacity:;-webkit-transform:translateX(100px);}
}
@-moz-keyframes fadeoutR{
0%{opacity:;-moz-transform:translateX(0);}
100%{opacity:;-moz-transform:translateX(100px);}
}
@-ms-keyframes fadeoutR{
0%{opacity:;-ms-transform:translateX(0);}
100%{opacity:;-ms-transform:translateX(100px);}
}
@keyframes fadeoutR{
0%{opacity:;transform:translateX(0);}
100%{opacity:;transform:translateX(100px);}
}
/* 淡出-向下 */
@-webkit-keyframes fadeoutB{
0%{opacity:;-webkit-transform:translateY(0);}
100%{opacity:;-webkit-transform:translateY(100px);}
}
@-moz-keyframes fadeoutB{
0%{opacity:;-moz-transform:translateY(0);}
100%{opacity:;-moz-transform:translateY(100px);}
}
@-ms-keyframes fadeoutB{
0%{opacity:;-ms-transform:translateY(0);}
100%{opacity:;-ms-transform:translateY(100px);}
}
@keyframes fadeoutB{
0%{opacity:;transform:translateY(0);}
100%{opacity:;transform:translateY(100px);}
}
/* 淡出-向左 */
@-webkit-keyframes fadeoutL{
0%{opacity:;-webkit-transform:translateX(0);}
100%{opacity:;-webkit-transform:translateX(-100px);}
}
@-moz-keyframes fadeoutL{
0%{opacity:;-moz-transform:translateX(0);}
100%{opacity:;-moz-transform:translateX(-100px);}
}
@-ms-keyframes fadeoutL{
0%{opacity:;-ms-transform:translateX(0);}
100%{opacity:;-ms-transform:translateX(-100px);}
}
@keyframes fadeoutL{
0%{opacity:;transform:translateX(0);}
100%{opacity:;transform:translateX(-100px);}
}
/* 弹跳 */
@-webkit-keyframes bounce{
0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
40%{-webkit-transform:translateY(-30px);}
60%{-webkit-transform:translateY(-15px);}
}
@-moz-keyframes bounce{
0%,20%,50%,80%,100%{-moz-transform:translateY(0);}
40%{-moz-transform:translateY(-30px);}
60%{-moz-transform:translateY(-15px);}
}
@-ms-keyframes bounce{
0%,20%,50%,80%,100%{-ms-transform:translateY(0);}
40%{-ms-transform:translateY(-30px);}
60%{-ms-transform:translateY(-15px);}
}
@keyframes bounce{
0%,20%,50%,80%,100%{transform:translateY(0);}
40%{transform:translateY(-30px);}
60%{transform:translateY(-15px);}
}
/* 弹入 */
@-webkit-keyframes bouncein{
0%{opacity:;-webkit-transform:scale(0.3);}
50%{opacity:;-webkit-transform:scale(1.05);}
70%{-webkit-transform:scale(0.9);}
100%{-webkit-transform:scale(1);}
}
@-moz-keyframes bouncein{
0%{opacity:;-moz-transform:scale(0.3);}
50%{opacity:;-moz-transform:scale(1.05);}
70%{-moz-transform:scale(0.9);}
100%{-moz-transform:scale(1);}
}
@-ms-keyframes bouncein{
0%{opacity:;-ms-transform:scale(0.3);}
50%{opacity:;-ms-transform:scale(1.05);}
70%{-ms-transform:scale(0.9);}
100%{-ms-transform:scale(1);}
}
@keyframes bouncein{
0%{opacity:;transform:scale(0.3);}
50%{opacity:;transform:scale(1.05);}
70%{transform:scale(0.9);}
100%{transform:scale(1);}
}
/* 弹入-从上 */
@-webkit-keyframes bounceinT{
0%{opacity:;-webkit-transform:translateY(-100px);}
60%{opacity:;-webkit-transform:translateY(30px);}
80%{-webkit-transform:translateY(-10px);}
100%{-webkit-transform:translateY(0);}
}
@-moz-keyframes bounceinT{
0%{opacity:;-moz-transform:translateY(-100px);}
60%{opacity:;-moz-transform:translateY(30px);}
80%{-moz-transform:translateY(-10px);}
100%{-moz-transform:translateY(0);}
}
@-ms-keyframes bounceinT{
0%{opacity:;-ms-transform:translateY(-100px);}
60%{opacity:;-ms-transform:translateY(30px);}
80%{-ms-transform:translateY(-10px);}
100%{-ms-transform:translateY(0);}
}
@keyframes bounceinT{
0%{opacity:;transform:translateY(-100px);}
60%{opacity:;transform:translateY(30px);}
80%{transform:translateY(-10px);}
100%{transform:translateY(0);}
}
/* 弹入-从右 */
@-webkit-keyframes bounceinR{
0%{opacity:;-webkit-transform:translateX(100px);}
60%{opacity:;-webkit-transform:translateX(-30px);}
80%{-webkit-transform:translateX(10px);}
100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes bounceinR{
0%{opacity:;-moz-transform:translateX(100px);}
60%{opacity:;-moz-transform:translateX(-30px);}
80%{-moz-transform:translateX(10px);}
100%{-moz-transform:translateX(0);}
}
@-ms-keyframes bounceinR{
0%{opacity:;-ms-transform:translateX(100px);}
60%{opacity:;-ms-transform:translateX(-30px);}
80%{-ms-transform:translateX(10px);}
100%{-ms-transform:translateX(0);}
}
@keyframes bounceinR{
0%{opacity:;transform:translateX(100px);}
60%{opacity:;transform:translateX(-30px);}
80%{transform:translateX(10px);}
100%{transform:translateX(0);}
}
/* 弹入-从下 */
@-webkit-keyframes bounceinB{
0%{opacity:;-webkit-transform:translateY(100px);}
60%{opacity:;-webkit-transform:translateY(-30px);}
80%{-webkit-transform:translateY(10px);}
100%{-webkit-transform:translateY(0);}
}
@-moz-keyframes bounceinB{
0%{opacity:;-moz-transform:translateY(100px);}
60%{opacity:;-moz-transform:translateY(-30px);}
80%{-moz-transform:translateY(10px);}
100%{-moz-transform:translateY(0);}
}
@-ms-keyframes bounceinB{
0%{opacity:;-ms-transform:translateY(100px);}
60%{opacity:;-ms-transform:translateY(-30px);}
80%{-ms-transform:translateY(10px);}
100%{-ms-transform:translateY(0);}
}
@keyframes bounceinB{
0%{opacity:;transform:translateY(100px);}
60%{opacity:;transform:translateY(-30px);}
80%{transform:translateY(10px);}
100%{transform:translateY(0);}
}
/* 弹入-从左 */
@-webkit-keyframes bounceinL{
0%{opacity:;-webkit-transform:translateX(-100px);}
60%{opacity:;-webkit-transform:translateX(30px);}
80%{-webkit-transform:translateX(-10px);}
100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes bounceinL{
0%{opacity:;-moz-transform:translateX(-100px);}
60%{opacity:;-moz-transform:translateX(30px);}
80%{-moz-transform:translateX(-10px);}
100%{-moz-transform:translateX(0);}
}
@-ms-keyframes bounceinL{
0%{opacity:;-ms-transform:translateX(-100px);}
60%{opacity:;-ms-transform:translateX(30px);}
80%{-ms-transform:translateX(-10px);}
100%{-ms-transform:translateX(0);}
}
@keyframes bounceinL{
0%{opacity:;transform:translateX(-100px);}
60%{opacity:;transform:translateX(30px);}
80%{transform:translateX(-10px);}
100%{transform:translateX(0);}
}
/* 弹出 */
@-webkit-keyframes bounceout{
0%{-webkit-transform:scale(1);}
25%{-webkit-transform:scale(0.95);}
50%{opacity:;-webkit-transform:scale(1.1);}
100%{opacity:;-webkit-transform:scale(0.3);}
}
@-moz-keyframes bounceout{
0%{-moz-transform:scale(1);}
25%{-moz-transform:scale(0.95);}
50%{opacity:;-moz-transform:scale(1.1);}
100%{opacity:;-moz-transform:scale(0.3);}
}
@-ms-keyframes bounceout{
0%{-ms-transform:scale(1);}
25%{-ms-transform:scale(0.95);}
50%{opacity:;-ms-transform:scale(1.1);}
100%{opacity:;-ms-transform:scale(0.3);}
}
@keyframes bounceout{
0%{transform:scale(1);}
25%{transform:scale(0.95);}
50%{opacity:;transform:scale(1.1);}
100%{opacity:;transform:scale(0.3);}
}
/* 弹出-向上*/
@-webkit-keyframes bounceoutT{
0%{-webkit-transform:translateY(0);}
20%{opacity:;-webkit-transform:translateY(20px);}
100%{opacity:;-webkit-transform:translateY(-100px);}
}
@-moz-keyframes bounceoutT{
0%{-moz-transform:translateY(0);}
20%{opacity:;-moz-transform:translateY(20px);}
100%{opacity:;-moz-transform:translateY(-100px);}
}
@-ms-keyframes bounceoutT{
0%{-ms-transform:translateY(0);}
20%{opacity:;-ms-transform:translateY(20px);}
100%{opacity:;-ms-transform:translateY(-100px);}
}
@keyframes bounceoutT{
0%{transform:translateY(0);}
20%{opacity:;transform:translateY(20px);}
100%{opacity:;transform:translateY(-100px);}
}
/* 弹出-向右*/
@-webkit-keyframes bounceoutR{
0%{-webkit-transform:translateX(0);}
20%{opacity:;-webkit-transform:translateX(-20px);}
100%{opacity:;-webkit-transform:translateX(100px);}
}
@-moz-keyframes bounceoutR{
0%{-moz-transform:translateX(0);}
20%{opacity:;-moz-transform:translateX(-20px);}
100%{opacity:;-moz-transform:translateX(100px);}
}
@-ms-keyframes bounceoutR{
0%{-ms-transform:translateX(0);}
20%{opacity:;-ms-transform:translateX(-20px);}
100%{opacity:;-ms-transform:translateX(100px);}
}
@keyframes bounceoutR{
0%{transform:translateX(0);}
20%{opacity:;transform:translateX(-20px);}
100%{opacity:;transform:translateX(100px);}
}
/* 弹出-向下 */
@-webkit-keyframes bounceoutB{
0%{-webkit-transform:translateY(0);}
20%{opacity:;-webkit-transform:translateY(-20px);}
100%{opacity:;-webkit-transform:translateY(100px);}
}
@-moz-keyframes bounceoutB{
0%{-moz-transform:translateY(0);}
20%{opacity:;-moz-transform:translateY(-20px);}
100%{opacity:;-moz-transform:translateY(100px);}
}
@-ms-keyframes bounceoutB{
0%{-ms-transform:translateY(0);}
20%{opacity:;-ms-transform:translateY(-20px);}
100%{opacity:;-ms-transform:translateY(100px);}
}
@keyframes bounceoutB{
0%{transform:translateY(0);}
20%{opacity:;transform:translateY(-20px);}
100%{opacity:;transform:translateY(100px);}
}
/* 弹出-向左 */
@-webkit-keyframes bounceoutL{
0%{-webkit-transform:translateX(0);}
20%{opacity:;-webkit-transform:translateX(20px);}
100%{opacity:;-webkit-transform:translateX(-100px);}
}
@-moz-keyframes bounceoutL{
0%{-moz-transform:translateX(0);}
20%{opacity:;-moz-transform:translateX(20px);}
100%{opacity:;-moz-transform:translateX(-100px);}
}
@-ms-keyframes bounceoutL{
0%{-ms-transform:translateX(0);}
20%{opacity:;-ms-transform:translateX(20px);}
100%{opacity:;-ms-transform:translateX(-100px);}
}
@keyframes bounceoutL{
0%{transform:translateX(0);}
20%{opacity:;transform:translateX(20px);}
100%{opacity:;transform:translateX(-200px);}
}
/* 转入 */
@-webkit-keyframes rotatein{
0%{opacity:;-webkit-transform:rotate(-200deg);}
100%{opacity:;-webkit-transform:rotate(0);}
}
@-moz-keyframes rotatein{
0%{opacity:;-moz-transform:rotate(-200deg);}
100%{opacity:;-moz-transform:rotate(0);}
}
@-ms-keyframes rotatein{
0%{opacity:;-ms-transform:rotate(-200deg);}
100%{opacity:;-ms-transform:rotate(0);}
}
@keyframes rotatein{
0%{opacity:;transform:rotate(-200deg);}
100%{opacity:;transform:rotate(0);}
}
/* 转入-从左上 */
@-webkit-keyframes rotateinLT{
0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:;}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:;}
}
@-moz-keyframes rotateinLT{
0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:;}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:;}
}
@-ms-keyframes rotateinLT{
0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:;}
100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:;}
}
@keyframes rotateinLT{
0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:;}
100%{transform-origin:left bottom;transform:rotate(0);opacity:;}
}
/* 转入-从左下 */
@-webkit-keyframes rotateineftB{
0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:;}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:;}
}
@-moz-keyframes rotateineftB{
0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:;}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:;}
}
@-ms-keyframes rotateineftB{
0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:;}
100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:;}
}
@keyframes rotateineftB{
0%{transform-origin:left bottom;transform:rotate(90deg);opacity:;}
100%{transform-origin:left bottom;transform:rotate(0);opacity:;}
}
/* 转入-从右上 */
@-webkit-keyframes rotateinRT{
0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:;}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:;}
}
@-moz-keyframes rotateinRT{
0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:;}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:;}
}
@-ms-keyframes rotateinRT{
0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:;}
100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:;}
}
@keyframes rotateinRT{
0%{transform-origin:right bottom;transform:rotate(90deg);opacity:;}
100%{transform-origin:right bottom;transform:rotate(0);opacity:;}
}
/* 转入-从右下*/
@-webkit-keyframes rotateinRB{
0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:;}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:;}
}
@-moz-keyframes rotateinRB{
0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:;}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:;}
}
@-ms-keyframes rotateinRB{
0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:;}
100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:;}
}
@keyframes rotateinRB{
0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:;}
100%{transform-origin:right bottom;transform:rotate(0);opacity:;}
}
/* 转出 */
@-webkit-keyframes rotateout{
0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:;}
100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:;}
}
@-moz-keyframes rotateout{
0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:;}
100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:;}
}
@-ms-keyframes rotateout{
0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:;}
100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:;}
}
@keyframes rotateout{
0%{transform-origin:center center;transform:rotate(0);opacity:;}
100%{transform-origin:center center;transform:rotate(200deg);opacity:;}
}
/* 转出-向左上 */
@-webkit-keyframes rotateoutLT{
0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:;}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:;}
}
@-moz-keyframes rotateoutLT{
0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:;}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:;}
}
@-ms-keyframes rotateoutLT{
0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:;}
100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:;}
}
@keyframes rotateoutLT{
0%{transform-origin:left bottom;transform:rotate(0);opacity:;}
100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:;}
}
/* 转出-向左下 */
@-webkit-keyframes rotateoutLB{
0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:;}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:;}
}
@-moz-keyframes rotateoutLB{
0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:;}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:;}
}
@-ms-keyframes rotateoutLB{
0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:;}
100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:;}
}
@keyframes rotateoutLB{
0%{transform-origin:left bottom;transform:rotate(0);opacity:;}
100%{transform-origin:left bottom;transform:rotate(90deg);opacity:;}
}
/* 转出-向右上 */
@-webkit-keyframes rotateoutRT{
0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:;}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:;}
}
@-moz-keyframes rotateoutRT{
0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:;}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:;}
}
@-ms-keyframes rotateoutRT{
0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:;}
100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:;}
}
@keyframes rotateoutRT{
0%{transform-origin:right bottom;transform:rotate(0);opacity:;}
100%{transform-origin:right bottom;transform:rotate(90deg);opacity:;}
}
/* 转出-向右下 */
@-webkit-keyframes rotateoutBR{
0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:;}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:;}
}
@-moz-keyframes rotateoutBR{
0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:;}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:;}
}
@-ms-keyframes rotateoutBR{
0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:;}
100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:;}
}
@keyframes rotateoutBR{
0%{transform-origin:right bottom;transform:rotate(0);opacity:;}
100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:;}
}
/* 翻转 */
@-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(0.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(0.95);-moz-animation-timing-function:ease-in;}
100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in;}
}
@-ms-keyframes flip{
0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out;}
40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out;}
50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in;}
80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in;}
100%{-ms-transform:perspective(400px) scale(1);-ms-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(0.95);animation-timing-function:ease-in;}
100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;}
}
/* 翻入-X轴 */
@-webkit-keyframes flipinX{
0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:;}
40%{-webkit-transform:perspective(400px) rotateX(-10deg);}
70%{-webkit-transform:perspective(400px) rotateX(10deg);}
100%{-webkit-transform:perspective(400px) rotateX(0);opacity:;}
}
@-moz-keyframes flipinX{
0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:;}
40%{-moz-transform:perspective(400px) rotateX(-10deg);}
70%{-moz-transform:perspective(400px) rotateX(10deg);}
100%{-moz-transform:perspective(400px) rotateX(0);opacity:;}
}
@-ms-keyframes flipinX{
0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:;}
40%{-ms-transform:perspective(400px) rotateX(-10deg);}
70%{-ms-transform:perspective(400px) rotateX(10deg);}
100%{-ms-transform:perspective(400px) rotateX(0);opacity:;}
}
@keyframes flipinX{
0%{transform:perspective(400px) rotateX(90deg);opacity:;}
40%{transform:perspective(400px) rotateX(-10deg);}
70%{transform:perspective(400px) rotateX(10deg);}
100%{transform:perspective(400px) rotateX(0);opacity:;}
}
/* 翻入-Y轴 */
@-webkit-keyframes flipinY{
0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:;}
40%{-webkit-transform:perspective(400px) rotateY(-10deg);}
70%{-webkit-transform:perspective(400px) rotateY(10deg);}
100%{-webkit-transform:perspective(400px) rotateY(0);opacity:;}
}
@-moz-keyframes flipinY{
0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:;}
40%{-moz-transform:perspective(400px) rotateY(-10deg);}
70%{-moz-transform:perspective(400px) rotateY(10deg);}
100%{-moz-transform:perspective(400px) rotateY(0);opacity:;}
}
@-ms-keyframes flipinY{
0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:;}
40%{-ms-transform:perspective(400px) rotateY(-10deg);}
70%{-ms-transform:perspective(400px) rotateY(10deg);}
100%{-ms-transform:perspective(400px) rotateY(0);opacity:;}
}
@keyframes flipinY{
0%{transform:perspective(400px) rotateY(90deg);opacity:;}
40%{transform:perspective(400px) rotateY(-10deg);}
70%{transform:perspective(400px) rotateY(10deg);}
100%{transform:perspective(400px) rotateY(0);opacity:;}
}
/* 翻出-X轴 */
@-webkit-keyframes flipoutX{
0%{-webkit-transform:perspective(400px) rotateX(0);opacity:;}
100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:;}
}
@-moz-keyframes flipoutX{
0%{-moz-transform:perspective(400px) rotateX(0);opacity:;}
100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:;}
}
@-ms-keyframes flipoutX{
0%{-ms-transform:perspective(400px) rotateX(0);opacity:;}
100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:;}
}
@keyframes flipoutX{
0%{transform:perspective(400px) rotateX(0);opacity:;}
100%{transform:perspective(400px) rotateX(90deg);opacity:;}
}
/* 翻出-Y轴 */
@-webkit-keyframes flipoutY{
0%{-webkit-transform:perspective(400px) rotateY(0);opacity:;}
100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:;}
}
@-moz-keyframes flipoutY{
0%{-moz-transform:perspective(400px) rotateY(0);opacity:;}
100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:;}
}
@-ms-keyframes flipoutY{
0%{-ms-transform:perspective(400px) rotateY(0);opacity:;}
100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:;}
}
@keyframes flipoutY{
0%{transform:perspective(400px) rotateY(0);opacity:;}
100%{transform:perspective(400px) rotateY(90deg);opacity:;}
}
/* 闪烁 */
@-webkit-keyframes flash{
0%,50%,100%{opacity:;}
25%,75%{opacity:;}
}
@-moz-keyframes flash{
0%,50%,100%{opacity:;}
25%,75%{opacity:;}
}
@-ms-keyframes flash{
0%,50%,100%{opacity:;}
25%,75%{opacity:;}
}
@keyframes flash{
0%,50%,100%{opacity:;}
25%,75%{opacity:;}
}
/* 震颤 */
@-webkit-keyframes shake{
0%,100%{-webkit-transform:translateX(0);}
10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}
20%,40%,60%,80%{-webkit-transform:translateX(10px);}
}
@-moz-keyframes shake{
0%,100%{-moz-transform:translateX(0);}
10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);}
20%,40%,60%,80%{-moz-transform:translateX(10px);}
}
@-ms-keyframes shake{
0%,100%{-ms-transform:translateX(0);}
10%,30%,50%,70%,90%{-ms-transform:translateX(-10px);}
20%,40%,60%,80%{-ms-transform:translateX(10px);}
}
@keyframes shake{
0%,100%{transform:translateX(0);}
10%,30%,50%,70%,90%{transform:translateX(-10px);}
20%,40%,60%,80%{transform:translateX(10px);}
}
/* 摇摆 */
@-webkit-keyframes swing{
20%{-webkit-transform:rotate(15deg);}
40%{-webkit-transform:rotate(-10deg);}
60%{-webkit-transform:rotate(5deg);}
80%{-webkit-transform:rotate(-5deg);}
100%{-webkit-transform:rotate(0);}
}
@-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(0);}
}
@-ms-keyframes swing{
20%{-ms-transform:rotate(15deg);}
40%{-ms-transform:rotate(-10deg);}
60%{-ms-transform:rotate(5deg);}
80%{-ms-transform:rotate(-5deg);}
100%{-ms-transform:rotate(0);}
}
@keyframes swing{
20%{transform:rotate(15deg);}
40%{transform:rotate(-10deg);}
60%{transform:rotate(5deg);}
80%{transform:rotate(-5deg);}
100%{transform:rotate(0);}
}
/* 摇晃 */
@-webkit-keyframes wobble{
0%{-webkit-transform:translateX(0);}
15%{-webkit-transform:translateX(-100px) rotate(-5deg);}
30%{-webkit-transform:translateX(80px) rotate(3deg);}
45%{-webkit-transform:translateX(-65px) rotate(-3deg);}
60%{-webkit-transform:translateX(40px) rotate(2deg);}
75%{-webkit-transform:translateX(-20px) rotate(-1deg);}
100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes wobble{
0%{-moz-transform:translateX(0);}
15%{-moz-transform:translateX(-100px) rotate(-5deg);}
30%{-moz-transform:translateX(80px) rotate(3deg);}
45%{-moz-transform:translateX(-65px) rotate(-3deg);}
60%{-moz-transform:translateX(40px) rotate(2deg);}
75%{-moz-transform:translateX(-20px) rotate(-1deg);}
100%{-moz-transform:translateX(0);}
}
@-ms-keyframes wobble{
0%{-ms-transform:translateX(0);}
15%{-ms-transform:translateX(-100px) rotate(-5deg);}
30%{-ms-transform:translateX(80px) rotate(3deg);}
45%{-ms-transform:translateX(-65px) rotate(-3deg);}
60%{-ms-transform:translateX(40px) rotate(2deg);}
75%{-ms-transform:translateX(-20px) rotate(-1deg);}
100%{-ms-transform:translateX(0);}
}
@keyframes wobble{
0%{transform:translateX(0);}
15%{transform:translateX(-100px) rotate(-5deg);}
30%{transform:translateX(80px) rotate(3deg);}
45%{transform:translateX(-65px) rotate(-3deg);}
60%{transform:translateX(40px) rotate(2deg);}
75%{transform:translateX(-20px) rotate(-1deg);}
100%{transform:translateX(0);}
}
/* 震铃 */
@-webkit-keyframes ring{
0%{-webkit-transform:scale(1);}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);}
100%{-webkit-transform:scale(1) rotate(0);}
}
@-moz-keyframes ring{
0%{-moz-transform:scale(1);}
10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}
100%{-moz-transform:scale(1) rotate(0);}
}
@-ms-keyframes ring{
0%{-ms-transform:scale(1);}
10%,20%{-ms-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);}
100%{-ms-transform:scale(1) rotate(0);}
}
@keyframes ring{
0%{transform:scale(1);}
10%,20%{transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}
40%,60%,80%{transform:scale(1.1) rotate(-3deg);}
100%{transform:scale(1) rotate(0);}
}
css3 动画 示例的更多相关文章
- CSS3动画效果示例
CSS3动画遵循@kwyframes规则,规定了动画的名称.时长. 1.示例代码 <!DOCTYPE html><html lang="en"><he ...
- CSS3动画事件
CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...
- 【转】CSS3动画帧数科学计算法
本文来源于:财付通TID 原作者:bboy90 总结都浓缩在这个工具里了,想知道工具的地址或想窥探工具诞生的趣事请往下看 . —————————————————————– 华丽丽的开篇 ...
- CSS3学习（CSS3过渡、CSS3动画）
CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...
- 分享7款顶级的CSS3动画特效
1.CSS3 SVG文字背景动画 超酷的文字特效 今天我们来分享一款基于CSS3和SVG的文字特效,文字的背景可以定义一些动画特效,在背景动画播放的同时,我们还可以选中文字.本示例让文字背景展示水波和 ...
- css3学习--css3动画详解一(animation属性）
***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ 一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主 ...
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
- css3动画实例测试
1.css3动画属性分析(2016-5-11) 1.transition: 规定属性变换规则,可以这样讲.transition(a,b,c,d); a:要变换的属性: b:过渡时间: c:运动方式: ...
- CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
随机推荐
- echarts更改坐标轴文字颜色及大小
xAxis: { data: anameArr, axisLabel: { show: true, textStyle: { color: '#c3dbff', //更改坐标轴文字颜色 fontSiz ...
- Java工程师 基础+实战 完整路线图（详解版）
Java工程师 基础+实战 完整路线图(详解版) Java 基础 Java 是一门纯粹的面向对象的编程语言,所以除了基础语法之外,必须得弄懂它的 oop 特性:封装.继承.多态.此外还有泛型.反射 ...
- js 日期增减
js 的 Date 对象提供了许多方法,可以获取日期的年.月.日等信息,也可以修改年.月.日 日期的增减可以使用setFullYear().setMonth().setDate() 等方法 exp: ...
- webpack 三
之前06年写了两篇自己研究webpack的文章,由于webpack已经升到了4.x,今天用起来发现有点小变化,重新自己建一个简单的项目,这里记录一下过程 1.安装webpack和webpack-cli ...
- js强制限制输入允许两位小数
<input type="text" value="@item.CostCash.Value.ToString("#0.00")" c ...
- Linux下搭建Jmeter+Ant+Jenkins自动化测试框架
前言 在之前的文章中,我们学习了通过Ant调用Jmeter脚本生成HTML测试报告,但未实现自动执行脚本生成报告,同时生成的报告是在Linux下,查看报告很不方便.因此,我们将结合Jenkins来进一 ...
- 聊一聊 InnoDB 引擎中的这些索引策略
在上一篇中,我们简单的介绍了一下 InnoDB 引擎的索引类型,这一篇我们继续学习 InnoDB 的索引,聊一聊索引策略,更好的利用好索引,提升数据库的性能,主要聊一聊覆盖索引.最左前缀原则.索引下推 ...
- 百度搜索关键词联想API JSONP使用实例
许多搜索引擎都提供了关键词联想api,且大多数都是jsonp. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获 ...
- Android教程2020 - RecyclerView使用入门
本文介绍RecyclerView的使用入门.这里给出一种比较常见的使用方式. Android教程2020 - 系列总览 本文链接 想必读者朋友对列表的表现形式已经不再陌生.手机上有联系人列表,文件列表 ...
- 获取PHP类的所有属性和所有方法，可通过反射机制
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <?php class Class1{ public $var1 = 'v ...