CSS—2D动画

1.旋转属性:transform

旋转函数 :rotate(value deg) 

value>0:顺时针旋转

value<0:逆时针旋转

倾斜函数 :skew(value deg)

skewX() skewY()

缩放函数:scale(scaleX,scaleY) 

scaleX(value):水平缩放

value>1:水平放大到原来的value倍

0<value<1:水平缩小到原来的value倍

value<0:水平翻转之后在放大或缩小到原来的value倍  

scaleY(value):垂直缩放

value>1:垂直放大到原来的value倍

0<value<1:垂直缩小到原来的value倍

value<0:垂直翻转之后在放大或缩小到原来的value倍  

位移函数:translate(translateX,translateY)

translateX(value px):水平位移,水平向右为正,向左为负

translateY(value px):垂直位移,垂直向下为正,向上为负

2.旋转基点:transform-origin

左上角transform-origin:0 0 
右上角transform-origin:100% 0
左下角transform-origin:0 100%
右下角transform-origin:100% 100%
中心点transform-origin:50% 50%

3.过渡属性:transition

要运动的样式transition-property 
运动时间transition-duration
延迟时间transition-delay
运动形式transition-timing-function

运动形式:

ease-out减速
ease-in-out先加速后减速
ease(逐渐变慢)默认值
ease-in加速
linear匀速

 

 

 

 

 

 

4.例子


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>作业1</title>
		<style type="text/css">
			*{margin:0;padding:0;}
			body,html{background:#000;}
			div{width:200px;height:150px;position:relative;float:left}
			div img{width:200px;height:150px;box-shadow:0 0 2px 2px #fff;position:absolute;}
			.imgs1{left:50px;top:50px}
			.imgs1 img{transition:all 0.5s;}
			.imgs2{left:200px;top:80px}
			.imgs2 img{transition:all 0.5s;transform-origin:0 100%;}
			.imgs3{left:300px;top:80px}
			.imgs3 img{transition:all 0.5s;}
			.imgs3 .img1{transform-origin:100% 0;}
			.imgs3 .img2{transform-origin:100% 100%;}
			.imgs3:hover .img11{transform:rotate(-40deg)}
			.imgs3:hover .img12{transform:rotate(-30deg)}
			.imgs3:hover .img13{transform:rotate(-20deg)}
			.imgs3:hover .img21{transform:rotate(40deg)}
			.imgs3:hover .img22{transform:rotate(30deg)}
			.imgs3:hover .img23{transform:rotate(20deg)}
			.imgs3:hover .img24{transform:rotate(10deg)}
			
			.imgs4{right:500px;top:400px;}
			.imgs4 img{transition:all 0.5s;transform-origin:0 100%;}
			.imgs4:hover .img1{transform:rotate(-42deg) translate(30px,-180px) scale(0.5,0.5)}
			.imgs4:hover .img2{transform:rotate(-35deg) translate(25px,-150px) scale(0.6,0.6)}
			.imgs4:hover .img3{transform:rotate(-28deg) translate(20px,-120px) scale(0.7,0.7)}
			.imgs4:hover .img4{transform:rotate(-21deg) translate(15px,-90px) scale(0.8,0.8)}
			.imgs4:hover .img5{transform:rotate(-14deg) translate(10px,-60px) scale(0.9,0.9)}
			.imgs4:hover .img6{transform:rotate(-7deg) translate(5px,-30px) scale(1,1)}
			.imgs4:hover .img7{transform:rotate(0deg) translate(0,0) scale(1,1)}
			
			.imgs5{right:100px;top:400px}
			.imgs5 img{transition:all 0.5s;transform-origin:0 100%;}
			.imgs5:hover .img1{transform:rotate(-20deg) translate(-20px,80px);}
			.imgs5:hover .img2{transform:rotate(-20deg) translate(80px,50px);}
			.imgs5:hover .img3{transform:rotate(-20deg) translate(20px,-70px);}
			.imgs5:hover .img4{transform:rotate(-20deg) translate(-80px,-40px);}
			.imgs5:hover .img5{transform:rotate(-20deg) translate(0px,0px);}
			
			.imgs6{left:400px;top:600px}
			.imgs6 img{transition:all 0.5s;/*transform-origin:0 100%;*/}
			.imgs6:hover .img1{transform:rotate(-20deg) translate(-150px,-115px) scale(0.7,0.7);}
			.imgs6:hover .img2{transform:rotate(-20deg) translate(0px,-115px) scale(0.7,0.7);}
			.imgs6:hover .img3{transform:rotate(-20deg) translate(150px,-115px) scale(0.7,0.7);}
			.imgs6:hover .img4{transform:rotate(-20deg) translate(-150px,0px) scale(0.7,0.7);}
			.imgs6:hover .img5{transform:rotate(-20deg) translate(150px,0px) scale(0.7,0.7)}
			.imgs6:hover .img6{transform:rotate(-20deg) translate(-150px,115px) scale(0.7,0.7)}
			.imgs6:hover .img7{transform:rotate(-20deg) translate(0px,115px) scale(0.7,0.7)}
			.imgs6:hover .img8{transform:rotate(-20deg) translate(150px,115px) scale(0.7,0.7);}
			.imgs6:hover .img9{transform:rotate(-20deg) translate(0px,0px) scale(1.2,1.2)}
			
			.imgs7{left:0px;top:900px}
			.imgs7 img{transition:all 0.5s;/*transform-origin:0 100%;*/}
			.imgs7:hover .img1{transform:translateY(-80px) scale(0.7,0.7);}
			.imgs7:hover .img2{transform:translateY(-60px) scale(0.8,0.8);}
			.imgs7:hover .img3{transform:translateY(-40px) scale(0.9,0.9);}
			.imgs7:hover .img4{transform:translateY(-20px) scale(1,1);}
			.imgs7:hover .img5{transform:translateY(0px) scale(1.1,1.1)}
			
			.imgs8{left:200px;top:900px}
			.imgs8 img{transition:all 0.5s;}
			.imgs8 .img1{transform-origin:0 0;}
			.imgs8 .img2{transform-origin:100% 0;}
			.imgs8 .img3{transform-origin:0 0;}
			.imgs8 .img4{transform-origin:100% 0;}
			.imgs8 .img5{transform-origin:0 0;}
			.imgs8 .img6{transform-origin:100% 0;}
			.imgs8 .img7{transform-origin:0 0;}
			.imgs8 .img8{transform-origin:100% 0;}
			.imgs8:hover .img1{transform:translate(190px,-80px) rotate(-65deg) scale(0.6,0.6);}
			.imgs8:hover .img2{transform:translate(-190px,-80px) rotate(65deg) scale(0.6,0.6);}
			.imgs8:hover .img3{transform:translate(170px,-50px) rotate(-50deg) scale(0.7,0.7);}
			.imgs8:hover .img4{transform:translate(-170px,-50px) rotate(50deg) scale(0.7,0.7);}
			.imgs8:hover .img5{transform:translate(150px,-20px) rotate(-35deg) scale(0.8,0.8)}
			.imgs8:hover .img6{transform:translate(-150px,-20px) rotate(35deg) scale(0.8,0.8)}
			.imgs8:hover .img7{transform:translate(130px,10px) rotate(-20deg) scale(0.9,0.9)}
			.imgs8:hover .img8{transform:translate(-130px,10px) rotate(20deg) scale(0.9,0.9)}
			.imgs8:hover .img9{transform:rotate(0deg) translate(0px,10px) scale(1,1)}
		</style>
	</head>
	<body>
		<div class="imgs1">
			<img src="img/studio_0002.jpg"/>
			<img src="img/studio_0003.jpg"/>
			<img src="img/studio_0004.jpg"/>
			<img src="img/studio_0005.jpg"/>
			<img src="img/studio_0006.jpg"/>
			<img src="img/studio_0007.jpg"/>
			<img src="img/studio_0008.jpg"/>
			<img src="img/studio_0009.jpg"/>
			<img src="img/studio_0001.jpg"/>
		</div>
		<div class="imgs2">
			<img src="img/studio_0001.jpg"/>
			<img src="img/studio_0003.jpg"/>
			<img src="img/studio_0004.jpg"/>
			<img src="img/studio_0005.jpg"/>
			<img src="img/studio_0006.jpg"/>
			<img src="img/studio_0007.jpg"/>
			<img src="img/studio_0008.jpg"/>
			<img src="img/studio_0009.jpg"/>
			<img src="img/studio_0002.jpg"/>
		</div>
		<div class="imgs3">
			<img class="img1 img11"  src="img/studio_0001.jpg"/>
			<img class="img1 img12"  src="img/studio_0002.jpg"/>
			<img class="img1 img13"  src="img/studio_0004.jpg"/>
			<img class="img2 img21"  src="img/studio_0005.jpg"/>
			<img class="img2 img22"  src="img/studio_0006.jpg"/>
			<img class="img2 img23"  src="img/studio_0007.jpg"/>
			<img class="img2 img24"  src="img/studio_0008.jpg"/>
			<img src="img/studio_0003.jpg"/>
		</div>
		<div class="imgs4">
			<img class="img1" src="img/studio_0003.jpg"/>
			<img class="img2"  src="img/studio_0005.jpg"/>
			<img class="img3"  src="img/studio_0006.jpg"/>
			<img class="img4"  src="img/studio_0007.jpg"/>
			<img class="img5"  src="img/studio_0008.jpg"/>
			<img class="img6"  src="img/studio_0009.jpg"/>
			<img class="img7"  src="img/studio_0004.jpg"/>
		</div>
		<div class="imgs5">
			<img class="img1" src="img/studio_0002.jpg"/>
			<img class="img2" src="img/studio_0003.jpg"/>
			<img class="img3" src="img/studio_0004.jpg"/>
			<img class="img4" src="img/studio_0005.jpg"/>
			<img class="img5" src="img/studio_0006.jpg"/>
		</div>
		<div class="imgs6">
			<img class="img1" src="img/studio_0002.jpg"/>
			<img class="img2" src="img/studio_0003.jpg"/>
			<img class="img3" src="img/studio_0004.jpg"/>
			<img class="img4" src="img/studio_0005.jpg"/>
			<img class="img5" src="img/studio_0006.jpg"/>
			<img class="img6" src="img/studio_0007.jpg"/>
			<img class="img7" src="img/studio_0008.jpg"/>
			<img class="img8" src="img/studio_0009.jpg"/>
			<img class="img9" src="img/studio_0010.jpg"/>
		</div>
		<div class="imgs7">
			<img class="img1" src="img/studio_0002.jpg"/>
			<img class="img2" src="img/studio_0003.jpg"/>
			<img class="img3" src="img/studio_0004.jpg"/>
			<img class="img4" src="img/studio_0005.jpg"/>
			<img class="img5" src="img/studio_0006.jpg"/>
		</div>
		<div class="imgs8">
			<img class="img1" src="img/studio_0002.jpg"/>
			<img class="img2" src="img/studio_0003.jpg"/>
			<img class="img3" src="img/studio_0004.jpg"/>
			<img class="img4" src="img/studio_0005.jpg"/>
			<img class="img5" src="img/studio_0006.jpg"/>
			<img class="img6" src="img/studio_0007.jpg"/>
			<img class="img7" src="img/studio_0008.jpg"/>
			<img class="img8" src="img/studio_0009.jpg"/>
			<img class="img9" src="img/studio_0011.jpg"/>
		</div>
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			$('.imgs1').hover(function(){
				$('.imgs1 img').eq(0).css('transform','rotate(-28deg)')
				$('.imgs1 img').eq(1).css('transform','rotate(28deg)')
				$('.imgs1 img').eq(2).css('transform','rotate(-21deg)')
				$('.imgs1 img').eq(3).css('transform','rotate(21deg)')
				$('.imgs1 img').eq(4).css('transform','rotate(-14deg)')
				$('.imgs1 img').eq(5).css('transform','rotate(14deg)')
				$('.imgs1 img').eq(6).css('transform','rotate(-7deg)')
				$('.imgs1 img').eq(7).css('transform','rotate(7deg)')
			},function(){
				$(this).children().css('transform','rotate(0deg)')
			})
			$('.imgs2').hover(function(){
				$(this).children().each(function(){
					var len=$('.imgs2 img').length
					var ind=$(this).index()
					$('.imgs2 img').eq(ind).css('transform','rotate('+ -5*(len-ind)+'deg) translate('+(len-ind-1)*(-4)+'px,'+(len-ind-1)*(-4)+'px)')
				})
			},function(){
				$(this).children().css('transform','rotate(0deg) translate(0,0)')
			})
		</script>
	</body>
</html>
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页