JavaScript之动画

动画

  • transform
  • 动画
      • 动画的小练习

transform

/* 元素进行平移 translate(x,y) translateX(x)  */
	/* transform: translate(20px,50px); */
				
				/* 进行 缩放  scale(x,y)  scaleX()*/
				/* transform: scale(); */
			
				/* 旋转 */
				/* transform: rotate(10deg ); */

/* 过渡效果 */
			/* transition: width 10s ; */
			
			/* 多个 */
			/* transition:width 10s , height 10s ; */
			
			/* 透明 */
			/* transition: opacity 10s; */
			
			/* 所有 */
			/* transition: all 8s; */
			
			/*加延迟时间 第一个是持续时间,第二个是延迟时间  */
			/* transition: all 5s 2s; */
			
			/* ease 慢快慢 */
			/* transition:all 15s ease; */
			
			/* 执行动画,执行时间  线性 延迟  循环几次(infinite 无限次)
			从开始到结束,再返回到开始   保持最后状态(forwards),backwards
			在延迟的时间内,动画已经进行应用了。
			*/
	
	/* 
			animation: first 1s linear  infinite ;
 			animation-name
			animation-duration
			animation-timing-function: ;
			animation-delay:
			animation-iteration-count: 播放次数 */
/* 			animation-direction: ; 逆向播放 normal默认 逆向alternate
			 animation-play-state: ; 运行 暂停
			 animation-fill-mode:  动画状态 默认是 none 保持最后状态(forwards),backwards
			在延迟的时间内,动画已经进行应用了。 */

动画

/* 动画 */
			@keyframes first{
				
			/* 	//开始
				from{
					background-color: antiquewhite;
				}
			 //结束 
				 to{
					background-color: #00008B;
				} 
		
			}
			 */

//第2中方式:
//这种方式 是按照动画进行的百分比进行动画的。
                 0%{
					background-color: cadetblue;
					transform: translate(230px,-60px);
				}
				25%{
					background-color:aqua;
					transform: translateY(200px);
				}
			
				50%{
					background-color:#F0F8FF ;
					transform: translateX(-200px);
					}
			
				75%{
					background-color:cadetblue;
					transform: translateY(-80px);
				}
			
				100%{
					background-color:red;
					transform: translateX(60px);	
				}


			}

动画的小练习

<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<style>
			.ma{
				width: 300px;
				height: 300px;
				transform: translate(200px,200px);
			}
			.box{
				position: absolute;
				top: 0;
				left: 0;
				width: 300px;
				height: 300px;
				border-radius: 10px;
				backface-visibility: hidden;
				/* 鼠标:小手 */
				cursor: pointer;
				transition: all 2s;
			}
			.b1{
				background-color: #00008B;
			}
			.b2{
				background-color: #FF0000;
				transform: rotateY(-108deg);
			}
		</style>
	</head>
	<body>
		<div class="ma">
			<div class="box b1" id="ss"></div>
			<div class="box b2"></div>
			
		</div>
	</body>
	<script>
		
		var bt1=document.querySelector(".b1");
		var bt2=document.querySelector(".b2");
		
		
		bt1.onclick = function(){
			console.log(1);
			bt1.style.transform="rotateX(180deg)";
			bt2.style.transform="rotateX(0deg)"
		}
		bt2.onclick=function(){
			bt1.style.transform="rotateX(0deg)";
			bt2.style.transform="rotateX(180deg)"
		}
	</script>
</html>

你可能感兴趣的:(String,js)