CSS3-小白4（CSS高级技巧）

最新推荐文章于 2022-02-22 13:41:21 发布

Pop–

最新推荐文章于 2022-02-22 13:41:21 发布

阅读量232

点赞数 1

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/weixin_45026839/article/details/108407898

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

五、CSS高级技巧(接上篇)

2D变形（transform）
1.移动 translate(x,y) translate移动平移的意思 注：translate移动的距离如果是按 % 的话则不是以父亲的宽度为准，而是以自己的为准

缩放 scale(x,y)
3.旋转 rotate(deg)4.旋转中心点（transform-origin）5.倾斜 skew(deg,deg)

3D变形
1.rotateX() 2.rotateY() 3.rotateZ()
4.透视（perspective）

5.translateX(x) 在这里插入图片描述
6.translateY(y)
7.translateZ(z)
注： 3D变形(translateZ)加透视（pespective）加过渡（transition）

在这里插入图片描述 8.translate3d
transform: translate3d(x，y，z)； x和y可以是px也可以是% z只能是px;

9.开门案列在这里插入图片描述利用的相关知识：（position子绝父相，pespective 透视，transition 过渡，transform-origin 设置旋转中心，transform:rotate 旋转，transform:translate 移动，鼠标经过hover）
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>开门大吉</title>
		<style>
			section {
				width: 388px;
				height: 300px;
				margin:  100px auto;
				position: relative;
				perspective: 1000px;
				background: url(img/chu.jpg);	
			}
			.left,.right {
				width: 50%;
				height: 100%;
				background: url(img/bg.png);
				position: absolute;
				top: 0;
				transition: all 0.5s;
				box-sizing: border-box;
				border: 1px solid black;	
			}
			.left {
				left: 0;
			}
			.right {
				right: 0;	
			}
			section:hover .left {
				transform: rotateY(-120deg); /*设置旋转角度*/
				transform-origin: left; /*设置旋转中心*/
			}
			section:hover .right {
				transform-origin: right;
				transform: rotateY(120deg);
			}
			.left::before,
			.right::before { /*利用伪元素before 创建盒子*/
				content: "";
				width: 20px;
				height: 20px;
				position: absolute;
				top: 50%;
				transform: translateY(-50%); /*利用2D变形 使盒子水平居中*/
				border-radius: 50%;
				background-color: black;
			}
			.left::before{
				right: 0;
				margin-right: 5px;
			}
			.right::before {
				left: 0;
				margin-left: 5px;
			}
		</style>
	</head>
	<body>
		<section>
			<div class="left"></div>
			<div class="right"></div>
		</section>
	</body>
</html>

动画（css3）
六、伸缩布局（CSS3）
display:flex；伸缩布局模式在父级添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>携程网</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			ul {
				list-style: none;
			}
			body {
				min-width: 320px;
				max-width: 840px;
				margin: 0 auto;
			}
			header {
				width: 100%;
				height: 100px;
			}
			img {
				width: 100%;
				height: 100%;
			}
			nav {
				padding: 5px;
			}
			.row { 
				width: 100%;
				height: 90px;
				background-color: pink;
				border-radius: 8px;
				display: flex; /*伸缩布局 给父亲加*/
				margin-bottom: 5px;
			}
			.row3 {
				flex: 1;
				border: 1px solid #FFFFFF;
			}
			.row :first-child {
				border: 0;
			}
			.hotel {
				display: flex;
				flex-direction: column;
			}
			.hotel a {
				flex: 1;
				text-decoration: none;
				text-align: center;
				line-height: 45px;
				font-size: 16px;
				color: #FFFFFF;
				text-shadow: 0 1px 2px rgba(255,255,255,0.5);
			}
			.hotel a:first-child {
				border-bottom: 1px solid #FFFFFF;
			}
		</style>
	</head>
	<body>
		<header>
			<img src="img/ctrip.jpg"/>	
		</header>
		<nav>
			<div class="row">
				<div class="row3">1</div>
				<div class="row3 hotel">
					<a href="#">酒店</a>
					<a href="#">旅馆</a>
				</div>
				<div class="row3 hotel">
					<a href="#">酒店</a>
					<a href="#">旅馆</a>
				</div>
			</div>
			<div class="row">
				<div class="row3">2</div>
				<div class="row3 hotel">
					<a href="#">酒店</a>
					<a href="#">旅馆</a>
				</div>
				<div class="row3 hotel">
					<a href="#">酒店</a>
					<a href="#">旅馆</a>
				</div>
			</div>
			<div class="row">
				<div class="row3">3</div>
				<div class="row3 hotel">
					<a href="#">酒店</a>
					<a href="#">旅馆</a>
				</div>
				<div class="row3 hotel">
					<a href="#">酒店</a>
					<a href="#">旅馆</a>
				</div>
			</div>
		</nav>	
	</body>
</html>

3.justify-content 属性调整主轴对齐在这里插入图片描述
4.align-items 属性调整侧轴对齐
5.flex-wrap 属性控制是否换行
6.flex-flow 属性
7.align-content 属性堆栈对齐
8.order 属性控制子项目的排序方式