【CSS】样式

news2024/11/15 21:52:59

  • 文本
    • color 颜色
    • font-size 大小
    • font-family 字体
    • font-style 样式
    • font-weight 加粗
    • text-decoration 下划线
    • text-shadow 阴影
    • text-transform 大小写变换
    • text-indent 缩进
    • text-align 水平对齐 、vertical-align垂直对齐
    • text-overflow 溢出
    • word-wrap 换行 、word-break 截断 、white-space 空白符
    • word-spacing 单词间隔 、letter-spacing 字母间隔
    • line-height 行高
    • writing-mode 排布
    • iconfont 字体图标 、font-family 字体引入
  • 盒模型
    • width 宽度 、height 高度 、padding 内边距 、margin 外边距 ( 外边距合并、塌陷下拉父元素问题 )
    • border 边框
    • border-radius 圆角
    • box-shadow 阴影
    • overflow 溢出
  • 背景
    • background-color 颜色
    • background-image 图像
    • background-repeat 平铺
    • background-position 定位
    • background-clip 裁剪区域
    • background-size 缩放
    • background-origin 位置区域
    • background-attachment 滚动方式
  • filter 滤镜
  • cursor 鼠标
  • position 定位
  • outline 轮廓线
  • opacity 透明度
  • z-index 堆叠层级
  • float 浮动 ( 父元素塌陷问题 )
  • transition 过渡
  • transform 变换
  • animation 动画

继承性：子级继承父级文字控制属性（子级拥有自己的样式则不会继承父级）；层叠性：相同的属性后面覆盖前面，不同的属性叠加；优先级：选择器优先级高的样式生效

文本

color 颜色

<style>
	div{
		color: red; /* 命名颜色 */
		color: #48ff00; /* 十六进制 */
		color: rgb(189, 6, 250); /* RGB（红,绿,蓝）  取值范围 0-255 */
		color: rgba(15, 166, 18,80%); /* RGB（红,绿,蓝,透明度）  透明度取值范围 0-1*/
	}
</style>
<div>文字文字文字hello文字文字happy文字文字</div>

效果:
在这里插入图片描述

font-size 大小

<style>
	div{
		/*
			默认为16px；可设置为绝对大小，也可设置为相对大小；若父组件有字体大小则继承用父组件字体大小

			px：绝对单位，不会随父元素字体大小改变
			em：相对于父元素的字体大小
			rem：相对于根元素（即html元素）的字体大小
			%：相对于父元素的字体大小
		*/
		font-size: 60px;
	}
	span{
		font-size: 2rem; /* 根元素字体大小的2倍：32px */
		/*font-size: 150%;*/
		/*font-size: 2em;*/
	}
</style>
<div>文字<span>相对</span>文字文字</div>

效果:
在这里插入图片描述

font-family 字体

<style>
	div{
		/*
			可同时指定多个字体，中间以逗号隔开；表示如果浏览器不支持第一个字体，则会
			尝试下一个，直到找到合适的字体；如果都没有，则以我们电脑默认的字体为准
	
			若要给英文设置另一个字体，则英文字体需写在中文字体前面
		*/
	
		font-family: "Times New Roman","SimSun","微软雅黑";
	}
</style>
<div>文字文字文字hello文字文字happy文字文字</div>

效果:
在这里插入图片描述

font-style 样式

<style>
	div{
		font-style: italic; /* normal默认正常文本   italic斜体   oblique正常文本的倾斜显示 */
	}
</style>
<div>文字文字文字hello文字文字happy文字文字</div>

效果:
在这里插入图片描述

font-weight 加粗

<style>
	div{
		/*
			关键字: bold粗体  normal默认
			具体数值：100  200  300  400等同于normal  500  600  700等同于bold  800  900
			相对值：lighter更细  bolder更粗  （相对于父元素）

			有时候看不到粗细变化，是因为所使用的字体不支持。比如"微软雅黑"，只支持400和700这两种粗细；而Mac的"苹方"字
			体，支持100到900之间的各种粗细
		*/
		font-weight:bold;
	}
</style>
<div>文字文字文字hello文字文字happy文字文字</div>

效果:
在这里插入图片描述

text-decoration 下划线

<style>
	div{
		/* none：默认属性，没有装饰；underline：下划线；overline：上划线；line-through：中划线，有一条贯穿文本中间的修饰线 */
		text-decoration-line: underline;
	
		/* 颜色 */
		text-decoration-color: red;
	
		/* solid：实线；double：双实线；dotted：点划线；dashed：虚线；wavy：波浪线 */
		text-decoration-style: wavy;
	
		/* auto：由浏览器为文本装饰线选择合适的厚度；from-font：字体文件中包含的首选的厚度值；其它： em  px  % */
		text-decoration-thickness: 5px;
	
		/*四个参数可以写在 text-decoration 的任意位置 */
		text-decoration: red 5px wavy underline;
	}
</style>
<div>文字文字文字hello文字文字happy文字文字</div>

效果:
在这里插入图片描述

text-shadow 阴影

<style>
	*{
		font-size: 30px;
		margin: 10px;
	}
	.one{
		/*
			h-shadow	必需的；水平偏移量；正数-向右偏移，负数-向左偏移。
			v-shadow	必需的；垂直偏移量；正数-向下偏移，负数-向上偏移
			blur-radius	可选；模糊半径；数值越大越模糊；若不指定则无模糊效果。
			color	必需的；颜色；
		*/
		text-shadow: 3px 10px 2px red;
	}
	.more{
		/* 使用多个阴影效果时，用逗号隔开；后面的阴影会叠加在前面的阴影之上 */
		text-shadow: -3px -10px 2px red,
					 -1px -16px 2px rgb(5, 173, 104),
					 2px -20px 2px #ffb700,
					 5px -24px 2px rgba(163, 7, 225,0.5);
	}
	.loukong{
		color: white;
		text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
	}
	.jianbian{
		background: linear-gradient(to right,red,green 40%,orange 60%,plum 80%,blue); /* 线性渐变 */
		-webkit-background-clip: text; /* 控制背景的裁剪区域，决定背景在元素中的显示范围 */
		-webkit-text-fill-color: transparent; /* 文字的填充颜色  transparent透明，text-fill-color会覆盖color */
	
		text-shadow: 0 5px 20px #cdff88;
	}
</style>
<span class="one">文字文字</span>
<span  class="more">文字文字</span>
<span class="loukong">文字</span>
<p class="jianbian">文字文字文字文字文字文字</p>

效果:
在这里插入图片描述

text-transform 大小写变换

<style>
	div{
		/* 
			none：默认不做任何处理
			capitalize：单词的首字母大写，通过空格来识别单词
			uppercase：所有的字母都大写
			lowercase：所有的字母都小写 
		*/
		text-transform: uppercase;
	}
</style>
<div>文字文字文字hello文字文字happy文字文字</div>

效果:
在这里插入图片描述

text-indent 缩进

<style>
	p{
		/* 注意：text-indent属性仅适用于块级元素，对行内元素无效 */
	
		text-indent: 80px; /* 可以设置为负值，但是会出现显示不全的问题，需要提前预留出位置（padding）即可 */
		text-indent: 2em; /* 2em即两个中文的宽度 */
		text-indent: 20%; /* 相对于父元素宽度的百分比 */
	}
</style>
<p>文字文字文字hello文字文字happy文字文字我，是卖报的小行家捡到一分钱。lo文字文字happy文字文字我，是卖报的小行家捡到一分钱</p>

效果:
在这里插入图片描述

text-align 水平对齐 、vertical-align垂直对齐

<style>
	div{
		border: 1px solid red;
		text-align: center; /* left:默认值；right：右对齐；center：居中对齐 */
	}
	span {
		/* 不同大小的文字垂直对齐，使用vertical-align（top默认 middle bottom baseline基线）*/
		vertical-align: middle;
	}
</style>
<div>文字文字文字hello文字文字happy文字文字</div>
<div style="border: 1px solid red">
	<span style="font-size: 25px;">Second</span>
	<span style="font-size: 16px;">First</span>
</div>

效果:
在这里插入图片描述
在这里插入图片描述

text-overflow 溢出

<style>
	ul{
		list-style: none;
		margin: 0;
		padding: 0;
		border: 1px solid red;
		width: 200px;
	}
	li{
		/* clip：不显示溢出文本     ellipsis：用省略标记"..."溢出文本 */
		text-overflow: ellipsis;
		/* 需要与 overflow: hidden;和 white-space: nowrap;一起使用    若依旧不生效常见于容器被设置了display: flex; */
		overflow: hidden;
		white-space: nowrap;
	}
</style>
<ul>
		<li>骄傲了单精度第四集外拉倒大垃圾袋</li>
		<li>骄傲了单精度第四集外拉倒大垃圾袋</li>
	</ul>

效果:
在这里插入图片描述

word-wrap 换行 、word-break 截断 、white-space 空白符

<style>
	div{
		width: 200px;height: 150px;border: 1px solid red;
	}
	#div1{
		/*
			CSS3中将 word-warp 改名为 overflow-wrap，同时使用提高兼容性

			normal：（浏览器默认处理）仅仅在同意的断字点换行
			break-word：允许在长单词或URL地址内部进行换行；即在容器末端有长单词不能完全显示时，不会截断单词，而是作为整体自动换行
		*/
		overflow-wrap: break-word;
		word-wrap: break-word;

		/*
			keep-all：不允许在单词内换行，仅能在半角空格或连字符"-"处换行
			break-all：在单词内换行，即在容器末端有长单词不能全然显示，会截断单词（弥补了 word-wrap:break-word 对于长串英文不起作用的缺陷）
		*/
		word-break: break-all;
	}
	#div2{
		/*
			空白字符包括空格，制表符等

			normal：合并空格（换行符转化为一个空格），换行
			nowrap：合并空格（换行符转化为一个空格），不换行
			pre-wrap：保留空格、换行符，换行
			pre：保留空格、换行符，不换行
			pre-line：合并空格，保留换行符，换行
		*/
		white-space: pre-line;
	}
</style>
<div id="div1">
		Lorem ipsum dolor sit amet, ipsum amet-consectetur elit. https://blog.csdn.net/wei_xin_30667649
</div>
<div id="div2">
	Lorem ipsum dolor sit amet, ipsum amet-consectetur elit.
</div>

效果:

在这里插入图片描述
在这里插入图片描述

word-spacing 单词间隔 、letter-spacing 字母间隔

<p style="letter-spacing: 2em">Hello Word 你好，世界！</p>

<p style="word-spacing: 2em">Hello Word 你好，世 界！</p> <!-- 仅仅作用于空格隔开的单词、字-->

效果:
在这里插入图片描述

line-height 行高

<style>
	p{
		border: 1px solid red;
		height: 40px;
		/* 让单行文本垂直居中，设置 line-height 与文字父元素的高度相同 */
		line-height: 40px;
		/* 行高：行与行之间的基线到基线的距离 */
	}
</style>
<p>First</p>
<p>Second</p>

效果:
在这里插入图片描述

writing-mode 排布

<style>
	p{
		width: 200px;height: 150px;border: 1px solid red;
		
		/* 定义了文本水平或垂直排布以及在块元素中文本的行进方向，不是所有的浏览器都兼容 */
		writing-mode: vertical-rl;
	}
</style>
<p>
	海上生明月，天涯共此时。
	情人怨遥夜，竟夕起相思。
	灭烛怜光满，披衣觉露滋。
	不堪盈手赠，还寝梦佳期。
</p>

效果:
在这里插入图片描述

iconfont 字体图标 、font-family 字体引入

<!-- font-class引用方式 1：引入项目下面生成的 fontclass 代码 -->
<link rel="stylesheet" href="./day5/font/iconfont.css">

<style>
	/* font-class引用方式 3：可以单独修改某一个的样式*/
	.icon-img_home_tag_classify_1_bg_color{
		color: red;
		font-size: 100px;
	}

	/* Symbol引入方式 2：加入通用 CSS 代码（引入一次就行） */
	.icon {
		width: 1em;
		height: 1em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}

	/* Symbol引入方式 4：可以单独修改某一个的样式 */
	.dd{
		width: 100px;
		height: 100px;
	}

	/* 使用 @font-face规则来定义字体名称和字体文件路径 */
	@font-face {
		font-family: "阿里妈妈刀隶体"; /* 自定义字体名称 */
		src: url("./day5/阿里妈妈刀隶体/AlimamaDaoLiTi.ttf") format("truetype"), /* 字体文件的路径 */
			 url("./day5/阿里妈妈刀隶体/AlimamaDaoLiTi.woff") format("woff");
			 url("./day5/阿里妈妈刀隶体/AlimamaDaoLiTi.woff2") format("woff2"); /* 为了提高兼容性，可提供多种格式的字体文件 */
	}
	p {
		font-family: "阿里妈妈刀隶体", "fangsong"; /* fangsong是备用字体 */
		font-size: 50px;
	}
</style>

<!-- font-class引用方式 2：挑选相应图标并获取类名，应用于页面 -->
<span class="iconfont icon-img_home_tag_classify_1_bg_color"></span>

<!-- Symbol引入方式 3：挑选相应图标并获取类名，应用于页面（浏览器渲染 SVG 的性能一般，还不如 png） -->
<svg class="icon dd" aria-hidden="true">
	<use xlink:href="#icon-pencil-01"></use>
</svg>

<!-- Symbol引入方式 1：引入项目下面生成的 symbol 代码 -->
<script src="./day5/font/iconfont.js"></script>

<!-- 使用 @font-face规则中的外部下载的字体 -->
<p>中秋节快乐</p>

效果:

在这里插入图片描述

盒模型

width 宽度 、height 高度 、padding 内边距 、margin 外边距 ( 外边距合并、塌陷下拉父元素问题 )

<style>
	div{
		/* 内容区域 */
		width: 200px;
		height: 200px;
		/*
			margin  padding

			一个值：四方相同
			两个值：上下  左右
			三个值：上  左右  下
			四个值：上  右  下  左

			padding-方位名词  margin-方位名词
			
			设置元素水平居中（margin: x auto;）
		*/
		margin: 10px 20px 30px 40px;
		padding: 20px;

		/* 盒子尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸 */
		border: 1px solid red;

		/* 防止盒子撑大方法:（1）手动减法 border/padding 的尺寸（2）内减模式 box-sizing：border-box 自动去计算占据的宽高 */
		box-sizing: border-box;
	}
</style>
<div></div>

效果:
在这里插入图片描述

外边距合并、塌陷下拉父元素问题 

<style>
	/* 垂直排列的兄弟元素，上下 margin 会合并，取两个 margin 中较大值生效；左右则会相加 */
	.one,.two{ width: 200px;height: 50px; }
	.one{
		background-color: #145eff;
		margin-bottom: 20px;
	}
	.two{
		background-color: #ffec00;
		margin-top: 30px;
	}

	/* 父子级的标签，子级添加上外边距会将上外边距传递给父元素产生塌陷问题；导致父级一起向下运动 */
	.fu{
		width: 200px;height: 200px;background-color: #0fa612;
		/* 解决方法：
				1.给父元素加边框
				2.给父元素设置overflow: hidden（也能触发BFC）
				3.给父元素设置浮动
		*/
		overflow: hidden;
		/*float: left;*/
		/*border: 1px solid red;*/
	}
	.three{
		width: 100px;height: 100px;background-color: #dd43ff;
		margin-top: 50px;
	}

</style>
<div class="one"></div>
<div class="two"></div>
<div class="fu">
	<div class="three"></div>
</div>

效果:
在这里插入图片描述

border 边框

<style>
	div{
	width: 400px;height: 100px;

	/* none：无边框； solid：实线边框，默认； double：双线边框； dashed：虚线边框； dotted：点线边框 */
	border: 10px double #ff002e;

	/* 允许单独对某一方向的边框线： top  bottom  left  right */
	border-bottom: 10px dotted #00ff00;
}
</style>
<div></div>

效果:
在这里插入图片描述

border-radius 圆角

<style>
	div{
		width: 200px;height: 200px;border: 1px solid red;

		/*
		 	一个值：四个角相同
			两个值：左上+右下  左下+右上
			三个值：左上  右上+左下  右下
			四个值：左上  右上  右下  左下
		*/
		border-radius: 100px;
	}
</style>
<div></div>

效果:
在这里插入图片描述

box-shadow 阴影

<style>
	div{
		width: 100px;height: 100px;border: 1px solid red;margin: 20px;float: left;
	}
	#div1{
		/*
			可以设置多个阴影效果，每个阴影效果之间用逗号分隔

			 属性值：
					x轴偏移量(必写)
					γ轴偏移量(必写)
					模糊半径(值越大阴影越模糊)
					扩散半径(阴影的半径大小，值越大阴影越大)
					颜色
					内外阴影(外阴影默认；内阴影inset，而且扩散半径数值越大阴影往内扩散越大，直到铺满盒子)
		*/
		box-shadow: 10px -10px 5px 2px red;
	}
	#div2{
		box-shadow: -10px 10px 5px 2px #46b5ff;
	}
	#div3{
		box-shadow: -10px -10px 20px 2px #ffda4a inset;
	}
	#div4{
		box-shadow: 10px 10px 5px 2px #67ff38 inset;
	}
	#div5{
		box-shadow: -10px 5px 8px 30px #b3ff07 inset;
	}
	#div6{
		box-shadow: -10px 5px 8px 20px #ffb8f3;
	}
	#div7{
		box-shadow: 10px 5px 8px 7px #6fffe5,
					25px 5px 8px 15px #db8fff;
	}
</style>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>

效果:
在这里插入图片描述

overflow 溢出

<style>
	div{
		width: 200px;height: 200px;border: 1px solid red;

		/* visible：默认值，hidden：溢出隐藏（有清除浮动、清除margin-top塌陷的功能），scroll：溢出滚动（无论是否溢出，均显示滚动条位置），auto：溢出滚动（溢出才显示滚动条位置） */
		overflow-y: scroll;
	}
</style>
<div>
	<h6>文字1</h6>
	<h6>文字2</h6>
	<h6>文字3</h6>
	<h6>文字4</h6>
	<h6>文字5</h6>
	<h6>文字6</h6>
</div>

效果:
在这里插入图片描述

背景

background-color 颜色

<style>
	div{
		width: 200px;height: 100px;

		/* 颜色格式 */
		background-color: pink;
		background-color: #0d6efd;
		background-color: rgb(38, 208, 208);
		background-color: rgba(0, 0, 255, 0.5);
	}
</style>
<div></div>

效果:
在这里插入图片描述

background-image 图像

<style>
	/* 这个CSS伪类匹配文档树的根元素 */
	:root {
		/* 声明全局 CSS 变量 */
		--bg-url: url("./day4/bjturl-1.jpeg");
	}

	div{
		width: 200px;height: 100px;border: 1px solid red;

		background-image: url("./day4/bjturl-1.jpeg");
		/* 多个背景图片可以用逗号分隔 */
		background-image: url("./day4/bjturl-1.jpeg"), url("./day4/bjturl-2.jpg");
		/* 可以将图片的URL指定为变量 */
		background-image: var(--bg-url);
	}
</style>
<div></div>

效果:
在这里插入图片描述

background-repeat 平铺

<style>
	div{
		width: 400px;height: 300px;border: 1px solid red;
		background-image: url("./day4/bjturl-1.jpeg");

		/* no-repeat：不平铺，repeat：平铺（默认），repeat-x：水平平铺，repeat-y：竖直平铺 */
		background-repeat: repeat;
	}
</style>
<div></div>

效果:
在这里插入图片描述

background-position 定位

<style>
	div{
		width: 300px;height: 260px;border: 1px solid red;
		background-image: url("./day4/bjturl-1.jpeg");
		background-repeat: no-repeat;

		/* 水平(正数向右，负数向左)和垂直(正数向下，负数向上)方向上的位置，默认背景图片的左上角与容器的左上角对齐 */
		/* left左侧，right右侧，center居中，top顶部，bottom底部 */
		background-position: -50px 70%;
		/* 如果只指定一个值，则另一个值默认为50%，表示居中对齐 */
		background-position: bottom;
	}
</style>

效果:
在这里插入图片描述

background-clip 裁剪区域

<style>
	div{
		width: 200px;height: 100px;padding: 20px;margin-right: 10px;;border: 1px solid red;font-size: 30px;font-weight: bolder;float: left;
		background-image: url("./day4/bjturl-1.jpeg");
	}
	#div1{
		/*
			定义背景的裁剪区域，可以将背景或颜色裁剪到指定的区域内显示
	
			border-box：默认，裁剪到边框区域内
			padding-box：裁剪到 padding 区域内
			content-box：裁剪到内容区域内
		*/
		background-clip: content-box;
	}
	#div2{
		-webkit-background-clip: text;
		/* 覆盖掉原本文字的颜色，并设置为透明 */
		-webkit-text-fill-color: transparent; 
	}
</style>
<div id="div1"></div>
<div  id="div2">文字文字</div>

效果:
在这里插入图片描述

background-size 缩放

<style>
	div{
		width: 200px;height: 100px;border: 1px solid red;
		background-image: url("./day4/bjturl-1.jpeg");
		background-repeat: no-repeat;
		/*
			设置背景图片的尺寸，可以按照指定的比例缩放图片
	
			百分比值（如：宽度50% 高度100%；如果只设置一个值，则第二个值会被设置为 "auto"）
			具体的像素值（如：宽度20px 高度30px；同上）
			auto（默认值，保持图像的原始尺寸）
			cover（图片的比例不变，图片将元素铺满；图像可能会有部分无法显示）
			contain（图片比例不变，将图片完整显示，背景区域可能会有部分无法被图像覆盖）
		*/
		background-size: contain;
	}
</style>
<div></div>

效果:
在这里插入图片描述

background-origin 位置区域

<style>
	div{
		width: 100px;height: 100px;border: 30px solid rgba(181, 14, 225, 0.35);padding: 30px;
		background-image: url("./day4/bjturl-1.jpeg");
		background-repeat: no-repeat;
		/*
			用于指定背景图像background-image的原点（左上角）位置相对于元素的位置
	
			border-box：图片从边框区域开始显示
			padding-box：图片从 padding 区域开始显示
			content-box：图片从内容区域开始显示
		*/
		background-origin: content-box;
	}
</style>
<div></div>

效果:
在这里插入图片描述

background-attachment 滚动方式

<style>
	body{
		height: 2000px;
		background-image: url("./bjtp.png");
		/*
			用于设置背景图像是否固定或随着页面滚动而滚动

			scroll: 默认值，背景图像随着页面滚动而滚动
			fixed: 背景图像固定，不随页面滚动而滚动
			local: 背景图像相对于元素滚动，而不是页面滚动。当元素本身可以滚动时，这个属性很有用
		*/
		background-attachment: scroll;
	}
	#div1{
		width: 200px;height: 200px;border: 1px solid red;color: white;overflow-y: scroll;
		background-image: url("./bjtp22.png");

		background-attachment: local;
	}
</style>
<div id="div1">
	<h2>测试文字</h2>
	<h2>测试文字</h2>
	<h2>测试文字</h2>
	<h2>测试文字</h2>
	<h2>测试文字</h2>
	<h2>测试文字</h2>
</div>

效果:

在这里插入图片描述

filter 滤镜

<style>
	img{ margin: 50px; }
	/*
		模糊	  blur(A) 	 A填像素值，如5px
		阴影	  drop-shadow(a b c d)    a水平方向阴影位置，正数px向右；b垂直方向阴影位置，正数px向下；c为阴影的范围，px；d为颜色参数常用rgba的格式
		亮度	  brightness(e)    e>1加亮度，e<1减亮度
		对比度	  contrast(f)	  f>1加对比度，f<1减对比度
		灰度	  grayscale(g)	  g取0~1的范围，即[0,1]，当1表示完全灰度
		反转	  invert(h)	   h取0~1的范围，即[0,1]，当1表示完全反转颜色
		饱和度	  saturate(i)    i>1加饱和度，i<1减饱和度
		褐色效果	  sepia(j)	  j取0~1的范围，即[0,1]，当1表示完全褐色
		色相旋转	  hue-rotate(k)	   k取度数，如：90deg；360度代表完整的色相环，回到初始颜色
	*/
	img:nth-of-type(1){ filter: blur(10px); /* 模糊 */ }
	img:nth-of-type(2){ filter: drop-shadow(10px 10px 10px #ff45f0); /* 阴影 */ }
	img:nth-of-type(3){ filter: brightness(2); /* 亮度 */ }
	img:nth-of-type(4){ filter: contrast(2); /* 对比度 */ }
	img:nth-of-type(5){ filter: grayscale(1); /* 灰度 */ }
	img:nth-of-type(6){ filter: invert(1); /* 反转 */ }
	img:nth-of-type(7){ filter: saturate(5); /* 饱和度 */ }
	img:nth-of-type(8){ filter: sepia(1); /* 褐色效果 */ }
	img:nth-of-type(9){ filter: hue-rotate(-90deg); /* 色相旋转（正数顺时针旋转，负数逆时针旋转） */ }
</style>
<div>
	<img src="./day5/dlam.jpg">
	<img src="./day5/dlam.jpg">
	<img src="./day5/dlam.jpg">
	<img src="./day5/dlam.jpg">
	<img src="./day5/dlam.jpg">
	<img src="./day5/dlam.jpg">
	<img src="./day5/dlam.jpg">
	<img src="./day5/dlam.jpg">
	<img src="./day5/dlam.jpg">
</div>

效果:
在这里插入图片描述
在这里插入图片描述

cursor 鼠标

<style>
	div{
		width: 100%;
		height: 100px;
		border: 1px solid greenyellow;
		/*
			crosshair：十字准线	    	s-resize：向下改变大小
			pointer | hand：手形  	    e-resize：向右改变大小
			wait：表或沙漏    	 		w-resize：向左改变大小
			help：问号或气球   	  		ne-resize：向上右改变大小
			no-drop：无法释放  	   		nw-resize：向上左改变大小
			text：文字或编辑   	  		se-resize：向下右改变大小
			move：移动   	  			sw-resize：向下左改变大小
			n-resize:向上改变大小
		*/
		cursor: no-drop;
	}
</style>
<div></div>

效果:
在这里插入图片描述

position 定位

普通文档流？浮动也会让元素脱离文档流，如果不设置浮动所有元素都处于普通文档流中。普通文档流中元素框的位置由元素在HTML中的位置决定，块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到，行内元素在一行中水平排列

层级关系默认规则：定位元素会覆盖在普通元素的上面；都设置定位的两个元素，后写的元素会覆盖在先写的元素上面

默认：static

<style>
	.one{ width: 270px; height: 270px; border: 1px solid red;margin-left: 50px; }
	.two,.three{ width: 100px; height: 100px; }

	/* 
		static：默认，元素按照代码的顺序，决定每个元素的位置，正常的文档流显示。不受top、right
		、bottom、left、z-index属性的影响 
   */
	.two{ background-color: #145eff; }
	.three{ background-color: #ffec00; }
</style>
<div class="one">
	<div class="two">正常盒子</div>
	<div class="three">正常盒子</div>
</div>

效果:
在这里插入图片描述

相对定位：relative

<style>
	.one{ width: 270px; height: 270px; border: 1px solid red;margin-left: 50px; }
	.two,.three{ width: 100px; height: 100px; }

	/*
		relative：相对定位，元素的偏移是参考元素本身原来的位置，不会使元素脱离文档流。设置了相
		对定位的元素不管它是否进行移动，元素原本所占空间保留，移动元素会导致它覆盖其它的元素。并
		且定位元素经常与z-index属性进行层次分级。可通过 left，right，bottom，top改变元素的位置
	*/
	.two{
		background-color: #145eff;
		/* 设置相对定位 */
		position: relative;
		top: 20px;
		left: 70px;
	}
	.three{ background-color: #ffec00; }
</style>
<div class="one">
	<div class="two">relative</div>
	<div class="three">正常盒子</div>
</div>

效果:
在这里插入图片描述

绝对定位：absolute

<style>
	.one{
		width: 270px; height: 270px; border: 1px solid red; margin-left: 50px;
		/* 父元素设置相对定位 */
		position: relative;
	}
	.two,.three{ width: 100px; height: 100px; }

	/*
		absolute：绝对定位（子绝父相），元素脱离文档流，元素相对于最近的已定位祖先元素进行定位，如
		果没有已定位的祖先元素，那么相对于文档的body元素进行定位。可以通过设置top、right、bottom、
		left属性来调整元素的位置。相对于祖先元素进行偏移时，元素原本所占空间不保留。其实它的效果跟浮
		动是同样的，都会飘起来覆盖页面上的其它元素，可以通过设置z-index属性来控制这些元素的排列顺序。
		绝对定位和浮动不能一起设置，如果一起设置的话，浮动会失效，以定位为主
	*/
	.two{
		background-color: #145eff;
		/* 子元素设置绝对定位 */
		position: absolute;
		top: 50px;
		left: 70px;
	}
	.three{ background-color: #ffec00; }
</style>
<div class="one">
	<div class="two">absolute</div>
	<div class="three">正常盒子</div>
</div>

效果:
在这里插入图片描述

固定定位：fixed

<style>
	.one{ width: 270px; height: 270px; border: 1px solid red; margin-left: 50px; }
	.two,.three{ width: 100px; height: 100px; }

	/*
		fixed：固定定位，使用 top，left，right，bottom 定位，会脱离正常文档流，不受标准流的
		约束，并拥有层级的概念。它也是以游览器的四个边角为基准，相对于视口（浏览器窗口）进行偏
		移，即定位参照的是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一
		样。常用于我们在滚动屏幕时仍然需要固定在相同位置的元素
	*/
	body{ height: 2000px; }
	.two{
		background-color: #145eff;
		/* 设置固定定位 */
		position: fixed;
		bottom: 90px;
		right: 50px;
	}
	.three{ background-color: #ffec00; }
</style>
<div class="one">
	<div class="two">fixed</div>
	<div class="three">正常盒子</div>
</div>

效果:
在这里插入图片描述

粘性定位：sticky

<style>
	.two,.three,.four,.five,.six,.seven,.eight{ width: 300px; height: 200px;margin-top: 10px; }

	/*
		sticky：粘性定位，它会产生动态效果，很像 relative 和fixed 的结合：一些时候是relative定
		位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。因此，它能够
		形成"动态固定"的效果，必须设置 top、bottom、left、right 4个值之一，否则不产生效果。元素
		固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么就相对
		于浏览器窗口来计算元素的偏移量。父元素不能设置 overflow:hidden 或者 overflow:auto 属性，
		父元素的高度不能低于 sticky元素的高度
	*/
	.two{
		background-color: #145eff;
		/* 设置粘性定位 */
		position: sticky;
		top: 0px;
	}
	.three{ background-color: #ffee56; }
	.four{ background-color: #ff96e9; }
	.five{ background-color: #9eff40; }
	.six{ background-color: #62ffe7; }
	.seven{ background-color: #ecff7f; }
	.eight{ background-color: #b6b7b6; }
	.eight{ background-color: #b6b7b6; }
</style>
<div class="seven">正常盒子</div>
<div class="eight">正常盒子</div>
<div class="two">sticky</div>
<div class="three">正常盒子</div>
<div class="four">正常盒子</div>
<div class="five">正常盒子</div>
<div class="six">正常盒子</div>

效果:
在这里插入图片描述

outline 轮廓线

<style>
	div{ width: 400px;height: 50px;margin: 22px; }
		div:nth-of-type(1){
			/*
				不占据空间，绘制于元素内容周围

				none：无轮廓，dotted：轮廓为一系列点，dashed：轮廓为一系列短线，solid：轮廓为实线
				double：轮廓为两根有空隙的线，groove：轮廓呈凹下状，ridge：轮廓呈凸起状
				inset：轮廓呈嵌入状，outset：轮廓呈突出状
			*/
			outline: #2225ff dotted 10px; /* outline:颜色 样式 粗细 */
		}
		div:nth-of-type(2){ outline: #0fa612 dashed 10px; }
		div:nth-of-type(3){ outline: #ff7e00 solid 10px; }
		div:nth-of-type(4){ outline: #ff72d3 double 10px; }
		div:nth-of-type(5){ outline: #aeff00 groove 10px; }
		div:nth-of-type(6){ outline: #e298ff ridge 10px; }
		div:nth-of-type(7){ outline: #fffb00 inset 10px; }
		div:nth-of-type(8){ outline: #5490ff outset 10px; }

		/* 通过将 outline 属性设置为 none 或 0，会移除元素的默认聚焦边框样式。若移除了默认聚焦样式，记得提供一个显眼的聚焦样式 */
		input{ outline:none; }
		input:focus{ outline: red dashed 5px; }
</style>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<input type="text" autofocus>

效果:
在这里插入图片描述
在这里插入图片描述

opacity 透明度

<style>
	div{ width: 100px;height: 100px;background-color: #1958f5;float: left;margin-left: 10px; }
	div:nth-of-type(1){
	/* 设置元素的不透明度，会影响元素及其所有子元素的不透明度，值范围：0（完全透明）到 1（完全不透明） */
	/* 该不会影响元素的布局，即使元素变得透明，它仍然会占据其应有的空间（visibility: hidden 占据位置，只是不可见） */
	opacity: 0.3;
	}
	div:nth-of-type(2){
		/* 若只想影响元素的背景而不影响其内容，可使用其他方法，如 RGBA 颜色值或 background-color 的透明度设置（取决于浏览器支持）*/
		background-color: rgba(25,88,245,0.3);
	}
</style>
<div><h1>文字</h1></div>
<div><h1>文字</h1></div>

效果:
在这里插入图片描述

z-index 堆叠层级

层叠顺序： background --> 负z-index --> block块状水平盒子 --> float浮动盒子 --> inline/inline-block -–> z-index:auto或z-index:0 --> 正z-index 。 作用： 设置元素的堆叠顺序( 元素层级 )，当元素发生重叠时，层级高的元素会覆盖在层级低的元素的上面。层叠顺序的比较止步于父级层叠上下文 。 取值范围： 默认auto与父元素的层级相等，若各级祖先元素均未设置该属性，则类似于0；±整数，数值越大层级越高，反之越低；inherit：继承父元素的z-index的属性值 。 适用范围： 只能在设置了 position: relative | absolute | fixed 的元素和父元素 和设置了 display: flex 属性的子元素中起作用，在其它元素中是不作用的

同级元素之间

<style>
	.box{ width: 270px; height: 270px; border: 1px solid red; margin-left: 50px; }
	.one,.two{ width: 160px;height: 160px; }

	/*
		1)z-index的值不同，则值大的，层级越高，显示在越上层

		2)值相同，则由元素的书写顺序决定，后面的元素会覆盖在前面的元素的上层显示

		3)若都设置了定位，但z-index值一个设置了，另一个没设置（则取默认值 0）
	*/
	.one{
		background-color: #145eff;
		position: relative; 
		z-index: 90;
	}
	.two{
		background-color: #ffec00;
		position: relative; 
		top: -80px;
		left: 80px;
	}
</style>
<div class="box">
	<div class="one">盒子1</div>
	<div class="two">盒子2</div>
</div>

效果:
在这里插入图片描述

父子元素之间

<style>
	.box{ width: 270px; height: 270px; border: 1px solid red; margin-left: 50px; }
	.one{ width: 220px;height: 220px;background-color: #0fa612}
	.one-son1,.one-son2{ width: 100px;height: 100px; }
	
	/*
		1)当父元素未设置z-index属性，子元素设置了该属性，值大于等于 0 时，子元素的层级会高于父元
		素的层级，而当子元素的z-index属性值小于 0 时，子元素的层级会低于父元素的层级

		2)父元素设置了z-index属性，子元素未设置z-index属性，则无论父元素的z-index属性值为多少，子
		元素的层级永远高于父元素，子元素永远会挡住父元素

		3)父元素设置了z-index属性，子元素也设置了z-index属性，则无论子元素和父元素的z-index属性值
		为多少，子元素的层级永远高于父元素，子元素永远会挡住
	*/
	.one{
		position: relative;
		z-index: -3;
	}
	.one-son1{
		background-color: #145eff;
		position: relative;
		z-index: -5;
	}
	.one-son2{
		background-color: #ffec00;
		position: relative;
		left: 150px;
		top: 40px;
		z-index: -9;
	}
</style>
<div class="box">
	<div class="one">盒子
		<div class="one-son1">盒子-1</div>
		<div class="one-son2">盒子-2</div>
	</div>
</div>

效果:
在这里插入图片描述

子元素与其父元素外的其它元素之间

<style>
	.box{ width: 270px; height: 270px; border: 1px solid red; margin-left: 50px; }
	.one,.two{ width: 160px;height: 160px;}
	.one-son1{ width: 100px;height: 100px; }

	/*
		1)父元素未设置z-index属性，子元素z-index属性值与父元素的同级元素z-index属性值进行对比。因
		为是跟父元素的同级元素进行对比，且父元素未设置z-index，所以是以子元素的z-index属性值为准与
		父元素的同级元素进行对比，遵循z-index属性值大的元素，层级高规则，以及层级相同时，后面元素覆
		盖前面元素的规则

		2)父元素设置了z-index属性，子元素z-index属性值与父元素的同级元素z-index属性值进行对比。因
		为是跟父元素的同级元素进行对比，且父元素设置了z-index，所以是以父元素的z-index属性值为准与
		父元素的同级元素进行对比，同样遵循z-index属性值大的元素，层级高规则，以及层级相同时，后面元
		素覆盖前面元素的规则
	*/
	.one{
		background-color: #0fa612;
		position: relative;
		z-index: 5;
	}
	.one-son1{
		background-color: #145eff;
		position: relative;
		left: 30px;
		top: 20px;
		z-index: -3;
	}
	.two{
		background-color: #ffec00;
		position: relative;
		left: 80px;
		top: -80px;
		z-index: 3;
	}
</style>
<div class="box">
	<div class="one">盒子1
		<div class="one-son1">盒子-1</div>
	</div>
	<div class="two">盒子2</div>
</div>

效果:
在这里插入图片描述
在这里插入图片描述

float 浮动 ( 父元素塌陷问题 )

<style>
	/*
		left：左对齐，right：右对齐。浮动元素会脱离标准流 (脱标)，不再保留原先的位置。浮动的
	   元素会具有行内块元素的特性，此时不会有行内块元素间隙问题。浮动元素一行显示且顶端对齐
	   排列，超出父级宽度就换行。父元素一般不设置高度而由内容决定，内容浮动后就会造成塌陷问题
	*/
	.one div{
		width: 100px;height: 100px;
		float: left;
		/*
			1.给塌陷的父元素最后添加一个没有意义的儿子元素（不推荐）
						.clearDiv{ clear: both; }

			2.给父元素设置overflow: hidden，能够解决因为触发了BFC（BFC是一种块
			级格式化文档，是一种网页的隐藏格式，默认渲染页面是不会触发）

			3.谁塌陷就给谁加 class="clear"（推荐）
		*/
	}
	.clear::after{
		content: "";
		display: block;
		clear: both;
	}
	.one{
		overflow: hidden;
	}
	.one div:nth-of-type(1){ background-color: #0fa612;}
	.one div:nth-of-type(2){ background-color: #ffec00;}
	.one div:nth-of-type(3){ background-color: #145eff;}
	.one div:nth-of-type(4){ background-color: #d655ff;}
</style>
<div class="one clear">
	<div>块1</div>
	<div>块2</div>
	<div>块3</div>
	<div>块4</div>
</div>

效果:
在这里插入图片描述
在这里插入图片描述

transition 过渡

<style>
	/*
		属性：
				transition-property：设置元素中参与过渡的属性（all  none  指定属性多个用逗号分隔）
				
				transition-duration：设置元素过渡的持续时间（秒s   毫秒ms）
				
				transition-timing-function：设置过渡的时间函数，控制过渡效果的速度曲线（ease默认：缓慢-加
				速-缓慢，linear：匀速，ease-in：缓慢开始，ease-out：缓慢结束，ease-in-out：缓慢开始和结束
				，函数cubic-bezier(n, n, n, n)取值[0,1]）
				
				transition-delay：设置过渡效果延迟的时间，默认为 0（使过渡效果在触发后一段时间开始）
		
				transition：简写同时设置四个过渡属性

		书写格式：
				transition-property: width, background, transform;
				transition-duration: .25s, 1s, 2s;
				transition-timing-function: linear, ease, ease;
				transition-delay: 1.9s, 2s, 0s;

				transition: width .25s linear 1.9s, background 1s 2s, transform 2s;

				transition: width, background, transform 2s linear 3s;

				transition: width 2s;
	*/
	h1{
		width: 200px;
		background-color: rgba(66,85,255,0.6);
		opacity: 1;
		/* 要生效必须要有初始状态和结束状态才能实现过渡效果 */
		transition: all 1s ease-out 1s;
	}
	h1:hover{
		width: 100%; /* 宽度变化 */
		background-color: greenyellow; /* 背景色变化 */
		opacity: 0.5; /* 透明度变化 */
	}

	/*
		display: none和 display: block之间的切换也会出现过渡效果失效的情况

		原因： display: none是销毁当前dom节点，再次切换为display: block时会再创建节
			  点，此时css选择器会重新赋予上去。所以不存在渐变动画
		解决：
			  1.用opacity（透明度）去替代
			  2.用visibility: hidden和 visibility: visible进行替换
	*/
	h2{
		/*display: block;*/
		/*visibility: visible;*/
		opacity: 1;
		background-color: red;
		transition: all 2s linear;
	}
	h2:hover{
		/*display: none;*/
		/*visibility: hidden;*/
		opacity: 0;
		background-color: green;
	}
</style>
<h1>transition</h1>
<h2>transition</h2>

效果:

在这里插入图片描述

transform 变换

没有使用 transform-origin 改变元素基点 位置的情况下，transform 进行的 rotate，translate，scale，skew 等操作 都是以元素自己中心位置 进行变化的。transform-origin 并不是 transform 中的属性值，跟其他的 css3 属性一样， 需要在不同的浏览内核中加上相应的前缀 。组合 同时使用多个 转换，综合使用这几个 用法其格式为 transform: translate() rotate() scale(); 变形的 顺序 是 从左到右 依次进行，顺序会影响到转换的效果（先旋转会改变坐标轴方向）

平移：translate

<style>
	.box{
		margin: 50px 0 0 50px; 
		/* 设置容器元素的透视距离（视距），用于创建3D变换效果（近大远小，观众面向组件的距离） */
		perspective: 1000px;
		/* 子元素开启立体空间（flat默认不开启），控制子元素是否开启三维立体环境 */
		transform-style: preserve-3d;
	}
	.translateX,.translateY,.translateZ,.translate3D,
	.translate2D
	{
		width: 150px;height: 150px;color: #ffef42;
		background-image: url("./day5/dlam.jpg");
		border-radius: 20px;float: left;
		transition: transform 1.5s; /* 过渡 */
	}

	.translateX:hover{
		transform: translateX(100px); /* 沿 X 轴方向移动 */
	}
	.translateY:hover{
		transform: translateY(150px); /* 沿 Y 轴方向移动 */
	}
	.translateZ:hover{
		transform: translateZ(-700px); /* 沿 Z 轴方向移动 */
	}
	.translate2D:hover{
		transform: translate(100px,100px); /* 沿 XY交叉 点方向移动 */
	}
	.translate3D:hover{
		transform: translate3d(50px, 50px, 350px); /* 3d的平移效果，用 2d平移 + 缩放 也可达到类似效果 */
	}
</style>
<div class="box">
	<!-- X轴正数向右，Y轴正数向下，Z轴正数指向屏幕面前的我 -->
	<div class="translateX">translate平移X</div>
	<div class="translateY">translate平移Y</div>
	<div class="translateZ">translate平移Z</div>
	<div class="translate2D">translate平移2D</div>
	<div class="translate3D">translate平移3D</div>
</div>

效果:
在这里插入图片描述

缩放：scale

<style>
	.box{
		margin: 50px 0 0 50px; 
		/* 设置容器元素的透视距离（视距），用于创建3D变换效果（近大远小，观众面向组件的距离） */
		perspective: 1000px;
		/* 子元素开启立体空间（flat默认不开启），控制子元素是否开启三维立体环境 */
		transform-style: preserve-3d;
	}
	.scaleX,.scaleY,.scaleZ,.scale3D,.scale2D
	{
		width: 150px;height: 150px;color: #ffef42;
		background-image: url("./day5/dlam.jpg");
		border-radius: 20px;float: left;
		transition: transform 1.5s; /* 过渡 */
	}

	/* 因为Z轴是指向观众的，在缩放条件下，Z方向它变大和变小我们都不易观察到效果。所以3d的缩放效果配合3d旋转效果rotate展示 */

	.scaleX:hover{
		transform: scaleX(1.5); /* 在 X 轴方向缩放 1.5 倍 */
	}
	.scaleY:hover{
		transform: scaleY(1.5); /* 在 Y 轴方向缩放 1.5 倍 */
	}
	.scaleZ:hover{
		transform: scaleZ(6) rotateY(60deg); /* 在 Z 轴方向缩放 1.5 倍 */
	}
	.scale2D:hover{
		transform: scale(1.5,1.5); /* 在 XY 轴方向分别缩放 1.5 1.5 倍 */
	}
	.scale3D:hover{
		transform: scale3d(1.5,1.7,1.5) rotate3d(0.5,0.5,0,60deg); /* 在 XYZ 轴方向分别缩放 1.5 1.7 1.5 倍 */
	}
</style>
<div class="box">
	<!-- 定义倍数缩放：  >1 放大    <1 缩小    默认值是 1 -->
	<div class="scaleX">scale缩放X</div>
	<div class="scaleY">scale缩放Y</div>
	<div class="scaleZ">scale缩放Z</div>
	<div class="scale2D">scale缩放2D</div>
	<div class="scale3D">scale缩放3D</div>
</div>

效果:
在这里插入图片描述

旋转：rotate

<style>
	.box{
		margin: 50px 0 0 50px; 
		/* 设置容器元素的透视距离（视距），用于创建3D变换效果（近大远小，观众面向组件的距离）*/
		perspective: 1000px;
		/* 子元素开启立体空间（flat默认不开启），控制子元素是否开启三维立体环境 */
		transform-style: preserve-3d;
	}
	.rotate3D-X,.rotate3D-Y,.rotate3D-Z,.rotate3D,
	.rotate3D-X-jzd,.rotate3D-Y-jzd,.rotate3D-Z-jzd
	{
		width: 150px;height: 150px;color: #ffef42;
		background-image: url("./day5/dlam.jpg");
		border-radius: 20px;float: left;
		transition: transform 1.5s; /* 过渡 */
		transform: rotate(0deg); /* 初始状态下不旋转 */
	}

	/* 以元素的中心点为基准点进行变形，transform-origin属性，可以改变变形的基准点（left、right、center、top、bottom）*/

	.rotate3D-X:hover{
		transform: rotatex(-180deg);  /* 绕 X 轴旋转 180 度 */
	}
	.rotate3D-Y:hover{
		transform: rotateY(180deg);  /* 绕 Y 轴旋转 180 度 */
	}
	.rotate3D-Z:hover{
		transform: rotateZ(180deg);  /* 绕 Z 轴旋转 180 度 */
	}
	.rotate3D:hover{
		transform: rotate3d(1, 1, 0, 180deg);  /* 沿着自定义轴 (X, Y, Z) 旋转 deg为角度 */
	}
	.rotate3D-X-jzd{
		transform-origin: bottom; /* 改变 X 轴基准点 */
	}
	.rotate3D-X-jzd:hover{
		transform: rotatex(-180deg);  /* 绕 X 轴旋转 180 度 */
	}
	.rotate3D-Y-jzd{
		transform-origin: right; /* 改变 Y 轴基准点 */
	}
	.rotate3D-Y-jzd:hover{
		transform: rotateY(-180deg);  /* 绕 Y 轴旋转 180 度 */
	}
	.rotate3D-Z-jzd{
		transform-origin: right bottom; /* 改变 Z 轴基准点 */
	}
	.rotate3D-Z-jzd:hover{
		transform: rotateZ(180deg);  /* 绕 Z 轴旋转 180 度 */
	}
</style>
<div class="box">
	<!-- 正角度为顺时针，负角度为逆时针（ Y轴从下往上看，X轴从右往左看，Z轴正视前方看） -->
	<div class="rotate3D-X">rotate旋转3D-X</div>
	<div class="rotate3D-Y">rotate旋转3D-Y</div>
	<div class="rotate3D-Z">rotate旋转3D-Z</div>
	<div class="rotate3D">rotate旋转3D</div>
	<div class="rotate3D-X-jzd">rotate旋转3D-X不同基准点</div>
	<div class="rotate3D-Y-jzd">rotate旋转3D-Y不同基准点</div>
	<div class="rotate3D-Z-jzd">rotate旋转3D-Z不同基准点</div>
</div>

效果:
在这里插入图片描述

倾斜：skew

<style>
	.box{
		margin: 50px 0 0 50px; 
		/* 设置容器元素的透视距离（视距），用于创建3D变换效果（近大远小，观众面向组件的距离） */
		perspective: 1000px;
		/* 子元素开启立体空间（flat默认不开启），控制子元素是否开启三维立体环境 */
		transform-style: preserve-3d;
	}
	.skewX-z,.skewX-f,.skewY-z,.skewY-f,
	.skewXY
	{
		width: 150px;height: 150px;color: #ffef42;
		background-image: url("./day5/dlam.jpg");
		border-radius: 20px;float: left;
		transition: transform 1.5s; /* 过渡 */
	}

	.skewX-z:hover{
		transform: skewX(45deg);
	}
	.skewX-f:hover{
		transform: skewX(-45deg);
	}
	.skewY-z:hover{
		transform: skewY(45deg);
	}
	.skewY-f:hover{
		transform: skewY(-45deg);
	}
	.skewXY:hover{
		transform: skew(-45deg,30deg);
	}
</style>
<div class="box">
	<div class="skewX-z">skew扭曲X正角度</div>
	<div class="skewX-f">skew扭曲X负角度</div>
	<div class="skewY-z">skew扭曲Y正角度</div>
	<div class="skewY-f">skew扭曲Y负角度</div>
	<div class="skewXY">skew扭曲XY</div>
</div>

效果:
在这里插入图片描述

案例：

<style>
	body{
		/* 设置容器元素的透视距离（视距），用于创建3D变换效果（方便观察物体在Z轴上的位置变化）*/
		perspective: 9000px;
	}
	.box{
		margin: 180px 150px;width: 150px;height: 150px;
		/* 子元素开启立体空间 */
		transform-style: preserve-3d;
		/* 定位 */
		position: relative;
		/* 调用动画 */
		animation: faceChange 15s linear infinite;
	}
	.one,.two,.three,.four,.five,.six
	{
		width: 150px;height: 150px;line-height: 150px;
		color: rgb(59, 59, 59);text-align: center;
		border-radius: 20px;font-size: 30px;
		display: inline-block;
	}

	.one{
		background-color: rgba(250, 4, 4, 0.5);
		position: absolute;
	}
	.two{
		background-color: rgba(0, 4, 255, 0.5);
		position: absolute;
		transform-origin: right;
		transform: translateX(-150px) rotateY(-90deg);
	}
	.three{
		background-color: rgba(15, 15, 16, 0.5);
		position: absolute;
		transform-origin: bottom;
		transform: translateY(-150px) rotateX(90deg);
	}
	.four{
		background-color: rgba(6, 246, 226, 0.5);
		position: absolute;
		transform-origin: top;
		transform: translateY(150px) rotateX(-90deg);
	}
	.five{
		background-color: rgba(245, 225, 2, 0.5);
		position: absolute;
		transform: translateZ(-150px) rotateY(180deg);
	}
	.six{
		background-color: rgba(211, 76, 241, 0.5);
		position: absolute;
		transform-origin: left;
		transform: translateX(150px) rotateY(90deg);
	}

	/* 动画 */
	@keyframes faceChange {
		from{
			transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
		}to{
			transform: rotateY(720deg) rotateX(720deg) rotateZ(720deg);
	 	}
	}
	/* 移入效果 */
	.box:hover .one{
		transform: translateZ(50px);
	}
	.box:hover .two{
		left: -50px;
	}
	.box:hover .three{
		top: -50px;
	}
	.box:hover .four{
		top: 50px;
	 }
	.box:hover .five{
		transform: translateZ(-200px);
  	}
	.box:hover .six{
		left: 50px;
   	}
</style>
<div class="box">
	<div class="one">1</div>
	<div class="two">2</div>
	<div class="three">3</div>
	<div class="four">4</div>
	<div class="five">5</div>
	<div class="six">6</div>
</div>

效果:
在这里插入图片描述

animation 动画

常伴随着动画帧 @keyframes 一起使用。animation 的属性 ：animation-name（关键帧名称） animation-duration（动画完成一个周期所需的时间） animation-timing-function（速度曲线） animation-delay（动画开始前等待的时间） animation-iteration-count‌（动画播放的次数） ‌animation-direction‌（是否应该轮流反向播放）animation-fill-mode（播放之前和之后如何应用样式） animation-play-state（是否正在运行或已暂停）

<style>
	/*
		名称：可以同时指定多个动画
		持续时间：以秒(s)或毫秒(ms)为单位
		速度曲线：linear ------ 从头到尾，动画的运行速度相同
				 ease ------ 默认值，开始低速，然后加快，结束前变慢
				 ease-in ------ 低速开始，结束前不断变快
				 ease-out ------ 快速开始，结束前不断变慢
				 ease-in-out ------ 开始和结束时段是慢速，中间部分速度最快
			 	 cubic-bezier(n,n,n,n) ------ 贝塞尔曲线，可以自己设置速度曲线
		延迟：以秒(s)或毫秒(ms)为单位
		动画播放的次数：正数 或 infinite(无限的)则重复运行动画
		播放方向：从头到尾正向播放，或是从尾到头的倒放
				 normal ------ 动画正放，动画一周期解释后重置到开始位置
				 reverse ------- 动画倒放
				 alternate ------ 动画在奇数次正向播放，偶数次反向播放。如过一个动画是持续播放
								  的，程序刚开始动画为第一次，这一次播放完毕便进行第二次，以此类推
				 alternate-reverse ------ 与alternate属性相反，动画在奇数次反向播放，偶数次正向播放
		动画前后的元素状态：
				none ------ 默认值，动画不会对元素在动画开始前或结束后形式参数产生任何影响。动画开
							始前，元素显示css非动画状态的形式；动画结束元素回到动画未运行前的初始状态
				forwards ------ 动画完成后，元素保持在动画的最后关键帧。就是动画运行到哪里，结束后
								它就保持在哪里，不会回初始点了
				backwards ------ 动画开始前，元素显示动画的第一个关键帧的样式。在动画开始前的等待期，它
								显示的是第一关键帧
				both ------ 结合了forwards和backwards的效果。动画开始前的等待期它是第一关键帧的样
							子，动画结束后保持在最后结束时的模样，也不会回到原点了

		播放状态：在动画过程中我们可以暂停动画，也可以暂停后继续运行。值主要有两个。即running和paused。当
				 running时，动画正常播放。当paused时，动画则停在当前帧
	*/
	.box{
		width: 100px;height: 100px;background-color: #0051ff;
		/*animation: myMove 2s;*/
		/*animation: myMove2 3s linear 1s infinite alternate forwards running;*/
		animation: myMove2 3s linear infinite,Change 3s linear infinite;
	}

	/*简单规则*/
	@keyframes myMove{
		from{
			margin-left: 0;
			background-color: #9aff00;
		}to{
			 margin-left: 300px;
			 background-color: #e267ff;
		 }
	}

	/*复杂规则*/
	@keyframes myMove2{
		0%{
			margin-left: 0;
			background-color: #9aff00;
		}
		50%{
			margin-left: 300px;
			background-color: #e267ff;
		}
		100%{
			margin-top: 200px;
			background-color: orange;
		}
	}
	@keyframes Change {
		0%{
			transform: rotateZ(0deg);
		}
		50%{
			transform: rotateZ(180deg);
		}
		100%{
			transform: rotateZ(360deg);
		}
	}
</style>
<div class="box"></div>

效果:
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2155987.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

GAMES101（15节）

GAMES101（15节）

Irradiance辐射度量学 辐射度量学在渲染领域&#xff0c;可以帮助理解基于物理的光照模型 radiant energy辐射能量Q&#xff0c;累计总能量&#xff08;单位J joule焦耳&#xff09;&#xff0c;就像太阳能板&#xff0c;光照时间越长接收能量越多&#xff0c;收到的能量总和…
阅读更多...
Vue点击按钮生成pdf文件/Vue点击按钮生成png图片

Vue点击按钮生成pdf文件/Vue点击按钮生成png图片

本次案例是vue的点击生成pdf文件和png格式的图片 一、生成pdf文件案例 看代码之前&#xff0c;我们肯定得需要看看&#xff0c;效果图是什么的啦&#xff0c;这样子才能先看看自己想要实现的效果是不是这样子的&#xff01;上效果图嘿嘿嘿~ A、实现的效果图 这是页面&#…
阅读更多...
【M-LOAM学习】

【M-LOAM学习】

M-LOAM(INITIALIZATION) Article Analysis Scan-Based Motion Estimation 通过在consecutive frame (each LiDAR)&#xff08;因为omp parallel&#xff09;中寻找correspondences然后通过最小化所有考虑feature之间residual error的transformation between frame to frame 针…
阅读更多...
java（3）数组的定义与使用

java（3）数组的定义与使用

目录 1.前言 2.正文 2.1数组的概念 2.2数组的创建与初始化 2.2.1数组的创建 2.2.1数组的静态初始化 2.2.2数组的动态初始化 2.3数组是引用类型 2.3.1引用类型与基本类型区别 2.3.2认识NULL 2.4二维数组 2.5数组的基本运用 2.5.1数组的遍历 2.5.2数组转字符串 2.…
阅读更多...
ETCD学习使用

ETCD学习使用

一、介绍 etcd&#xff08;分布式键值存储&#xff09;是一个开源的分布式系统工具&#xff0c;用于可靠地存储和提供键值对数据。etcd 通常通过 HTTP 或 gRPC 提供 API&#xff0c;允许应用程序通过简单的接口与其交互。由于其可靠性和稳定性&#xff0c;etcd 在构建可扩展、分…
阅读更多...
基于springboot的在线视频点播系统

基于springboot的在线视频点播系统

文未可获取一份本项目的java源码和数据库参考。 国外研究现状&#xff1a; 与传统媒体不同的是&#xff0c;新媒体在理念和应用上都采用了新颖的媒介或媒体。新媒体是指应用在数字技术、在传统媒体基础上改造、或者更新换代而来的媒介或媒体。新兴媒体与传统媒体在理念和应用…
阅读更多...
UML——统一建模语言

UML——统一建模语言

序言&#xff1a; 是统一建模语言的简称&#xff0c;它是一种由一整套图表组成的标准化建模语言。UML用于帮助系统开发人员阐明&#xff0c;展示&#xff0c;构建和记录软件系统的产出。UML代表了一系列在大型而复杂系统建模中被证明是成功的做法&#xff0c;是开发面向对象软件…
阅读更多...
ModbusTCP通讯错误的排查

ModbusTCP通讯错误的排查

Modbus是一种由MODICON公司开发的工业现场总线协议标准&#xff0c;是一项应用层报文传输协议。该协议用于传输数字和模拟变量[1]。有关该协议的报文具体格式&#xff0c;以及一些基本概念&#xff0c;见[1]。 本文以一个例子&#xff0c;阐述当ModbusTCP通讯出现错误的时候&a…
阅读更多...
文件上传、重定向、Gin路由

文件上传、重定向、Gin路由

文件上传 单个文件上传 index.html 文件上传前端页面代码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><title>index</title> </head> <body> <form action"/upload" method"post"…
阅读更多...
MySQL学习（索引）

MySQL学习（索引）

文章目录 基本概念单列索引普通索引&#xff08;index&#xff09;唯一索引&#xff08;unique&#xff09;主键索引 组合索引全文索引&#xff08;fulltext&#xff09;空间索引&#xff08;spatial&#xff09;MySQL存储引擎 基本概念 通过某种算法&#xff0c;构建数据模型&…
阅读更多...
云手机的海外原生IP有什么用？

云手机的海外原生IP有什么用？

在全球数字化进程不断加快的背景下&#xff0c;企业对网络的依赖程度日益加深。云手机作为一项创新的工具&#xff0c;正逐步成为企业优化网络结构和全球业务拓展的必备。尤其是云手机所具备的海外原生IP功能&#xff0c;为企业进入国际市场提供了独特的竞争优势。 什么是海外原…
阅读更多...
高等数学——微分学

高等数学——微分学

1. 一元函数微分学 1.1. 导数概念 1.2. 导数运算 1.3. 导数与几何 2. 多元函数微分学 2.1. 多元函数的极限 2.1.1. 计算 直接代入法 无穷小乘有界 有理化型 等价无穷小型 ……总结 2.1.2. 是否存在 考试中，判断极限是否存在的问题，答案一般都是不存在。因为，证明一个…
阅读更多...
视频怎么剪切掉一部分？6款视频剪切软件，零基础也能快速学会！

视频怎么剪切掉一部分？6款视频剪切软件，零基础也能快速学会！

您是否也曾遇到了这样的一个问题&#xff1a;在录制完视频之后&#xff0c;发现视频中存在一些多余或者不想要的片段&#xff0c;想要将它剪切掉却不知道具体要怎么操作&#xff1f;别担心&#xff0c;几乎所有视频都会需要这样的调整才能更加出色。如果您是刚入门的视频剪辑初…
阅读更多...
MATLAB中多张fig图合并为一个图

MATLAB中多张fig图合并为一个图

将下列两个图和为一个图 打开查看-----绘图浏览器 点击第一幅图中曲线右键复制&#xff0c;到第二幅图中粘贴即可完成
阅读更多...
设计模式之组合模式例题

设计模式之组合模式例题

答案&#xff1a;C A 知识点&#xff1a;组合模式的意图&#xff1a;将对象组合成树型结构以表示“整体-部分”的层次结构&#xff0c;使得用户对单个对象和组合对象的使用具有一致性
阅读更多...
TMS320F28335的RS232 通信实验

TMS320F28335的RS232 通信实验

TMS320F28335 内部含有非常多的通信接口，其中串口是通信接口中应用 非常广泛之一，开发板上集成了一个 RS232 模块，其中串口就是接在 F28335 芯 片的 SCIA 接口。 F28335 通过 SCIA 实现与 PC 机对话，F28335 的 SCIA 收到 PC 机发来的数据后 原封不动的返回给 PC 机显示，定…
阅读更多...
分布式项目-开盒头条

分布式项目-开盒头条

开盒头条 前言 只懂得技术理论是远远不够的&#xff0c;还需要熟练掌握很多业务功能逻辑的实现&#xff0c;这样才能真正的提高自己的开发水平。因此&#xff0c;我新开了这个专栏&#xff0c;专门做项目&#xff0c;教给大家很多业务功能实现的逻辑以及在实现这些业务功能时…
阅读更多...
双向链表-

双向链表-

链表特性&#xff1a;带头/不带头 循环/非循环 --->排列组合后&#xff0c;共有8种链表结构 一.双向链表的定义 前一个节点存了后一个节点的地址&#xff0c;后一个节点也存了前一个节点的地址&#xff0c;即循环链表 二.代码解析 //双向链表 //与非循环链表区别&#…
阅读更多...
基于SpringBoot+Vue+MySQL的医院信息管理系统

基于SpringBoot+Vue+MySQL的医院信息管理系统

系统展示 用户前台界面 管理员后台界面 系统背景 在当今社会&#xff0c;随着医疗服务需求的不断增长和医疗信息化的快速发展&#xff0c;提升医院管理效率和服务质量成为了医疗行业的核心需求。传统的医院管理模式面临着效率低下、资源分配不均、患者就医体验差等问题。为了应…
阅读更多...
react hooks--useReducer

react hooks--useReducer

概述 很多人看到useReducer的第一反应应该是redux的某个替代品&#xff0c;其实并不是 ◼ useReducer仅仅是useState的一种替代方案&#xff1a;  在某些场景下&#xff0c;如果state的处理逻辑比较复杂&#xff0c;我们可以通过useReducer来对其进行拆分&#xff1b; 或…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023