PROMULGATOR

    Mr Mouse

    上海市
    Html
    Css
    Js

    
                        


                        

                            


body,html {
	margin:0;
	padding:0;
}
.content {
	width:70%;
	margin:0 auto;
	display:flex;
	flex-direction:column;
}
main {
	height:fit-content;
	display:flex;
	flex-wrap:wrap;
}
p {
	margin:0;
	padding:10px 0;
}
.w25 {
	width:25%;
}
.h150 {
	height:150px;
}
.mb {
	margin-bottom:50px;
}
.box {
	width:100px;
	height:100px;
	border-radius:4px;
	background:#64B5F6;
	cursor:pointer;
}
/* 淡入 */
.fade-in {
	animation:fade-in 1s;
}
@keyframes fade-in {
	0% {
	opacity:0;
}
100% {
	opacity:1;
}
}/* 闪烁 */
.blink {
	animation:blink 1s;
}
@keyframes blink {
	0% {
	opacity:0;
}
20% {
	opacity:1;
}
40% {
	opacity:0;
}
60% {
	opacity:1;
}
80% {
	opacity:0;
}
100% {
	opacity:1;
}
}/* 旋转 */
.spin {
	animation:spin 1s;
}
@keyframes spin {
	0% {
	transform:rotateZ(0);
}
100% {
	transform:rotateZ(720deg);
}
}/* 旋转进入 */
.spin-in {
	animation:spin-in 1s;
}
@keyframes spin-in {
	0% {
	transform:rotateZ(0) scale(0);
}
100% {
	transform:rotateZ(720deg) scale(1);
}
}/* 从上进入 */
.top-in {
	animation:top-in 1s;
}
@keyframes top-in {
	0% {
	transform:translateY(-200%);
}
100% {
	transform:translateY(0);
}
}/* 从上进入2 */
.top-in2 {
	animation:top-in2 1s;
}
@keyframes top-in2 {
	0% {
	transform:translateY(-200%) scale(0);
}
50% {
	transform:translateY(0) scale(0.4);
}
100% {
	transform:translateY(0) scale(1);
}
}/* 从右进入 */
.right-in {
	animation:right-in 1s;
}
@keyframes right-in {
	0% {
	transform:translateX(200%);
}
100% {
	transform:translateX(0);
}
}/* 从右进入2 */
.right-in2 {
	animation:right-in2 1s;
}
@keyframes right-in2 {
	0% {
	transform:translateX(200%) scale(0);
}
50% {
	transform:translateX(0) scale(0.4);
}
100% {
	transform:translateX(0) scale(1);
}
}/* 从下进入 */
.bottom-in {
	animation:bottom-in 1s;
}
@keyframes bottom-in {
	0% {
	transform:translateY(200%);
}
100% {
	transform:translateY(0);
}
}/* 从左进入 */
.left-in {
	animation:left-in 1s;
}
@keyframes left-in {
	0% {
	transform:translateX(-200%);
}
100% {
	transform:translateX(0);
}
}/* 左右翻转 */
.roll-y {
	animation:roll-y 1s;
}
@keyframes roll-y {
	0% {
	transform:rotateY(0);
}
100% {
	transform:rotateY(360deg);
}
}/* 上下翻转 */
.roll-x {
	animation:roll-x 1s;
}
@keyframes roll-x {
	0% {
	transform:rotateX(0);
}
100% {
	transform:rotateX(360deg);
}
}/* 心动 */
.heart-beat {
	animation:heart-beat 1s;
}
@keyframes heart-beat {
	0% {
	transform:scale(1);
}
25% {
	transform:scale(1.3);
}
50% {
	transform:scale(1);
}
75% {
	transform:scale(1.3);
}
100% {
	transform:scale(1);
}
}/* 反弹 */
.bounce {
	animation:bounce 0.6s;
}
@keyframes bounce {
	0% {
	transform:translateY(0%);
}
40% {
	transform:translateY(-50%);
}
60% {
	transform:translateY(0%);
}
80% {
	transform:translateY(-15%);
}
100% {
	transform:translateY(0);
}
}/* 上下展开 */
.tb-unfold {
	animation:tb-unfold 0.6s;
}
@keyframes tb-unfold {
	0% {
	transform:scale(0,0);
}
50% {
	transform:scale(1,0.01);
}
100% {
	transform:scale(1,1);
}
}/* 左右展开 */
.lr-unfold {
	animation:lr-unfold 0.6s;
}
@keyframes lr-unfold {
	0% {
	transform:scale(0,0);
}
50% {
	transform:scale(0.01,1);
}
100% {
	transform:scale(1,1);
}
}

                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
css简单2D动画（原创）

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
css3，动画，简单，复制即用，2d动画。需要可自取。

                         

                     

                   
                


                
0