CSS初探学习总结提高六

Posted 2023-02-18 xj_love

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS初探学习总结提高六相关的知识，希望对你有一定的参考价值。

一.2D动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2D动画</title>
	<style type="text/css">
		.move 
			width: 100px;
			height: 100px;
			background-color: pink;
			transition: all 0.5s;
			position: relative;
			left: 50%;
			right: 50%;
			transform: translate(-50%,-50%);  /* 配合定位，让盒子居中对齐*/
		
		.move:active 
			transform: translate(50px,100px); /*移动 只填一个值默认X轴 还可以单独设置X,Y*/
		
		.scale 
			width: 100px;
			height: 100px;
			background-color: red;
			margin: 0 auto;
		
		.scale:hover
			transform: scale(2);
		
		section 
			width: 150px;
			height: 200px;
			margin: 20px auto;
			border: 2px solid red;
			overflow: hidden;  /*溢出隐藏*/
		
		section img 
			transition: all 0.2s;  /*谁改变，动画就给谁设定*/
		
		section:hover img 
			transform: scale(1.2); /* 缩放比例*/
		
		.rotate 
			margin: 10px 200px;
			border-radius: 50%;
			transition: all 3s;
			transform-origin: left top; /*设置旋转点位置*/
		
		.rotate:hover 
			transform: rotate(720deg); /*旋转 deg-度数   rotateX rotateY rotate*/  
		
		.skew 
			font-size: 50px;
			font-weight: 700;
			margin: 100px;
			transition: all 0.5s;

		
		.skew:hover 
			transform: skew(0,-10deg);  /*倾斜*/
		
	</style>
</head>
<body>
	<h3>2D变形-移动</h3>
	<div class="move"></div>
	<h3>2D变形-缩放</h3>
	<div class="scale"></div>
	<section>
		<img src="image/wo.jpg">
	</section>
	<h3>2D变形-旋转</h3>
	<img src="image/wo.jpg" class="rotate">
	<h3>2D表型-倾斜</h3>
	<div class="skew">我是倾斜的字体</div>
</body>
</html>

二.2D变形-透视移动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2D变形-透视移动</title>
	<style type="text/css">
		body 
			perspective: 10px; /*视距 距离 眼睛到屏幕的距离  视距越大效果越不明显 视距越小，透视效果越明显*/
		
		img 
			margin: 100px;
			transition: all 5s;
		
		img:hover 
			transform: rotateY(360deg);
		
		div 
			width: 100px;
			height: 100px;
			background-color: pink;
		
		div:hover 
			transform: translateZ(300px);
		
	</style>
</head>
<body>
	<img src="image/1498446043198.png">
	<div></div>
</body>
</html

三.translate3d

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>translate3d</title>
	<style type="text/css">
		body 
			perspective: 600px; /*视距 距离 眼睛到屏幕的距离  视距越大效果越不明显 视距越小，透视效果越明显*/
		
		div 
			width: 100px;
			height: 100px;
			background-color: pink;
			margin: 100px auto;
			transition: all 0.5s;
		
		div:hover 
			background-color: green;
			transform: translateZ(300px);  /*要配合 perspective*/
			transform: translate3d(100px,100px,300px);  /*X轴Y轴Z轴变化 */
		
		h3 
			transition: all 0.5s;
			background-color: blue;
		
		h3:hover 
			transform: translateY(50px);
		
	</style>
</head>
<body>
	<div></div>
	<h3>浮动文字效果</h3>
</body>
</html>

四.小汽车动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小汽车动画</title>
	<style type="text/css">
		img 
			/*animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;*/
			animation: car 5s infinite;
		
		/*定义动画*/
		@keyframes car 
			0% 
				transform: translate3d(0,0,0);
			
			50% 
				transform: translate3d(1000px,0,0);
			
			51% 
				transform: translate3d(1000px,0,0) rotateY(180deg);
			
			99% 
				transform: translate3d(0,0,0) rotateY(180deg);
			
		
	</style>
</head>
<body>
	<img src="image/car.jpg" width="100">
</body>
</html>

五.伸缩布局及携程网demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伸缩布局延伸属性</title>
	<base target="_blank">
</head>
<body>
	<ul>
		<li>
			<a href="http://www.runoob.com/cssref/css3-pr-justify-content.html">
				justify-content  在弹性盒对象的元素中的各项周围留有空白：
			</a>
		</li>
		<li>
			<a href="http://www.runoob.com/cssref/css3-pr-align-items.html">
				align-items       居中对齐弹性盒的各项元素：
			</a>
		</li>
		<li>
			<a href="http://www.runoob.com/cssref/css3-pr-flex-wrap.html">
				flex-wrap属性      让弹性盒元素在必要的时候拆行
			</a>
		</li>
		<li>
			<a href="http://www.runoob.com/cssref/css3-pr-align-content.html">
				align-content属性  对齐弹性盒的元素的各项：
			</a>
		</li>
		<li>
			<a href="http://www.runoob.com/cssref/css3-pr-order.html">
				order             设置弹性盒对象元素的顺序：
			</a>
		</li>
		<li>
			<a href="http://www.runoob.com/cssref/css-reference.html">
				CSS参考手册
			</a>
		</li>
	</ul>
</body>
</html>

六.伸缩布局延伸属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伸缩布局延伸属性</title>
	<base target="_blank">
</head>
<body>
	<ul>
		<li>
			<a href="http://www.runoob.com/cssref/css3-pr-justify-content.html">
				justify-content  在弹性盒对象的元素中的各项周围留有空白：
			</a>
		</li>
		<li>
			<a href="http://www.runoob.com/cssref/css3-pr-align-items.html">
				align-items       居中对齐弹性盒的各项元素：
			</a>
		</li>
		<li>
			<a href="http://www.runoob.com/cssref/css3-pr-flex-wrap.html">
				flex-wrap属性      让弹性盒元素在必要的时候拆行
			</a>
		</li>
		<li>
			<a href="http://www.runoob.com/cssref/css3-pr-align-content.html">
				align-content属性  对齐弹性盒的元素的各项：
			</a>
		</li>
		<li>
			<a href="http://www.runoob.com/cssref/css3-pr-order.html">
				order             设置弹性盒对象元素的顺序：
			</a>
		</li>
		<li>
			<a href="http://www.runoob.com/cssref/css-reference.html">
				CSS参考手册
			</a>
		</li>
	</ul>
</body>
</html>

以上是关于CSS初探学习总结提高六的主要内容，如果未能解决你的问题，请参考以下文章

CSS初探学习总结提高 六

一.2D动画

二.2D变形-透视移动

三.translate3d

四.小汽车动画

五.伸缩布局及携程网demo

六.伸缩布局延伸属性

CSS初探学习总结提高六