前端路线--H5篇（day03）_按照指定轨迹移动的前端h5实现方式-CSDN博客

本文链接：https://blog.csdn.net/Yan9_9/article/details/123326036

transition动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				background-color: aqua;
				transition: all 2s;
			}
			.box:hover{
				height: 400px;
				background-color: pink;
			}
			
			
			/* transition: 要过渡的属性（宽/高） 花费时间  运动曲线  何时开始 
				运动曲线：linear  匀速   ease  逐渐变慢  ease-in 加速  ease-out减速   ease-in-out先加速后减速

			*/
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

案例–手风琴菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
			.box{
				width: 200px;
				height: 300px;
				background-color: #ccc;
				padding: 0px 6px;
			}
			.sub_menu{
				padding-left: 6px;
			}
			.box2{
				height: 27px;
				overflow: hidden;
				transition: height 0.8s linear;
			}
			.box2:hover{
				height:90px;
			}
			.box2 h3{
				border: solid 1px #ccc;
				background-color: #CCCCCC;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li class="box2">
					<h3>主菜单</h3>
					<div class='sub_menu'>子菜单</div>
					<div class='sub_menu'>子菜单</div>
					<div class='sub_menu'>子菜单</div>
				</li>
				<li class="box2">
					<h3>主菜单</h3>
					<div class='sub_menu'>子菜单</div>
					<div class='sub_menu'>子菜单</div>
					<div class='sub_menu'>子菜单</div>
				</li>
				<li class="box2">
					<h3>主菜单</h3>
					<div class='sub_menu'>子菜单</div>
					<div class='sub_menu'>子菜单</div>
					<div class='sub_menu'>子菜单</div>
				</li>
			</ul>
		</div>
	</body>
</html>

transform

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				background-color: aqua;
				
			}
			.box:hover{
				transform: rotate(30deg);
			}
			
			/* 平移 */
			/* transform:translate(x,y) 
						translateX()
						translateY()
						
						scale(1.5)  //缩放
						scaleX(1.5)
						scaleY(1.5)
						
						rotate(30deg)//旋转
						
						skew(15deg)//倾斜
						
						
			transform-origion:X Y;
							X,Y:left right center 
								20%
								15px
						
			
			
			*/
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

案例–小米的放大漂浮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				border: 1px solid orange;
				width: 200px;
				height: 400px;
				background: yellow;
				margin: 100px auto;
				transition: all  0.5s;
			}
			.box:hover{
				transform: translateY(-3px);
				box-shadow: 0 15px 30px rgba(0,0,0,.5);
			}
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

盒子在大盒子里居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father{
				width: 500px;
				height: 500px;
				background-color: #FFA500;
				margin: 0 auto;
				position: relative;
			}
			.son{
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			
			/* 注意：	tranlate是针对自己的位置进行的改变，
						想要居中需要加上定位的top和left为50%,以后不需要进行计算
			*/
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>

案例–风车案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father{
				width: 600px;
				height: 600px;
				/* background-color: #FFA500; */
				margin: 0 auto;
				transition: all 5s;
				margin-top: 80px;
			}
			.father div{
				width: 300px;
				height: 300px;
				float: left;
			}
			.box1,.box4{
				border-radius: 0 100% 0 100%;
			}
			.box2,.box3{
				border-radius: 100% 0 100% 0;
			}
			.box1{
				background-color: red;
			}
			.box4{
				background-color: aqua;
			}
			.box2{
				background-color: pink;
			}
			.box3{
				background-color: black;
			}
			.father:hover{
				transform: rotate(1000deg);
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
			<div class="box4"></div>
		</div>
	</body>
</html>

案例–开门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 500px;
				height: 500px;
				background-color: #FFA500;
				margin: 100px auto;
				perspective: 1000px;
			}
			.left,.right{
				width: 250px;
				height: 500px;
				background-color: #00FFFF;
				float: left;
				transition: 1s linear;
			}
			.box:hover .left{
				transform-origin: left center;
				transform: rotateY(50deg);
			}
			.box:hover .right{
				transform-origin: right center;
				transform: rotateY(-50deg);
			}
			
			/* perspective: 1000px;
				透视：近大远小,加给父级元素。
				
				transform-style:flat;(默认不保留3D)
								preserve-3D(保留3D)
			 */
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

案例–动画轮播

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 750px;
				height: 360px;
				margin: 0 auto;
				position: relative;
				overflow: hidden;
			}

			body:hover .coursel {
				animation: move1 10s linear infinite;
			}

			.coursel {
				width: 600%;
				position: absolute;
				left: 0px;
			}

			.coursel li {
				float: left;
				list-style: none;
			}

			@keyframes move1 {
				0% {
					left: 0px;
				}

				20% {
					left: -750px;
				}

				40% {
					left: -1500px;
				}

				60% {
					left: -2250px;
				}
				80%{
					left: -3000px;
				}
				99.99%{
					left: -3750px;
				}
				100% {
					left: 0px;
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul class="coursel">
				<li><img src="img/pic1.jpg"></li>
				<li><img src="img/pic2.jpg"></li>
				<li><img src="img/pic3.jpg"></li>
				<li><img src="img/pic4.jpg"></li>
				<li><img src="img/pic5.jpg"></li>
				<li><img src="img/pic1.jpg"></li>
			</ul>
		</div>
	</body>
</html>

3D旋转相册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		body{
			/* 需要进行透视，近大远小 */
			perspective: 1000px;
			background-color: #000;
		}
			section{
				width:300px;
				height: 300px;
				transition:1s all;
				position: relative;
				margin: 150px auto;
				transform-style: preserve-3d;  /* 因为子盒子有了3D，所以父亲需要保留3D*/
				animation: rotate1 10s linear infinite;
			}
			section:hover{
				animation-play-state:paused ;
			}
				@keyframes rotate1{
					from{
					    transform: rotateY(0deg);
					  } to{
					    transform: rotateY(360deg);
					  }
				}
			section div{
				width:300px;
				height: 300px;
				position: absolute;
				left: 0;
				top: 0;
			}
			section div img{
				width:100%;
			}
			section div:first-child{
				transform: translateZ(300px);  /* 第一张向Z轴进行一个300px的偏移 */
			}
			/* 一定要先旋转再移动 */
			section div:nth-child(2){
				transform: rotateY(60deg) translateZ(300px); /*其余的依次旋转递增60deg  然后再进行Z轴的偏移*/
			}
			section div:nth-child(3){
				transform: rotateY(120deg) translateZ(300px);;
			}
			section div:nth-child(4){
				transform: rotateY(180deg) translateZ(300px);;
			}
			section div:nth-child(5){
				transform: rotateY(240deg) translateZ(300px);;
			}
			section div:last-child{
				transform: rotateY(300deg) translateZ(300px);;
			}
		</style>
	</head>
	<body>
		<section>
			<div><img src="img/011.jpg" ></div>
			<div><img src="img/02.jpg" ></div>
			<div><img src="img/03.jpg" ></div>
			<div><img src="img/04.jpg" ></div>
			<div><img src="img/05.jpg" ></div>
			<div><img src="img/06.jpg" ></div>
		</section>
	</body>
</html>