CSS选择器
就是找了一个统一的位置，去存放样式。然后将改样式作为模板，运用于其他的类似的标签上，节省了代码量。需要存放在标签中，然后放入head标签中
选择器类型
-
标签选择器 head html div等
-
类别选择器 class=“xxx”
- 一个对象可以有多个类名，任何一个类名都可以被选中。<p class=“class1 class2”><\p>，在这个里面 .class1, .class2都可以用来选中对象
- 一个类名可以被多个对象使用。于是与ID只能选择一个对象不同，可以通过class选择多个对象。
-
ID选择器 只能选择一个(ID名不可以重复)（注意：在企业开发中，如果仅仅是为了设置样式，一般不会用ID选择器，因为ID是留给JS使用的。）
-
通用选择器，指定全局性的规则(一般用于将全局的padding和margin置为0)
-
后代选择器 div p :中间用空格。注意，后代不仅仅是直接后代，孙子，曾孙子都可以。
<html >
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div p{
color: red;
}
</style>
</head>
<body>
<p>我是段落</p>
<div>
<p>我是段落</p>
<ul>
<li><p>我是段落</p></li> <!--这里虽然被li包围，但是函数属于div的后代-->
</ul>
<p>我是段落</p>
</div>
<p>我是段落</p>
</body>
</html>
- 子元素选择器：div>p 中间用>:找到直接的儿子，不管孙子那些。
<html >
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div>p{
color: red;
}
</style>
</head>
<body>
<p>我是段落</p>
<div>
<p class="duanluo">我是段落</p>
<ul>
<li><p>我是段落</p></li> <!--这里的P不是直接的儿子，因此不会被选中-->
</ul>
<p>我是段落</p>
</div>
<p>我是段落</p>
</body>
</html>
- 并集选择器：用逗号连接。head, hetml, div{} 可以一起写
<html >
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div, p, .content{
color: red;
}
</style>
</head>
<body>
<div>我是内容</div>
<p>我是内容</p>
<h1 class="content">我是内容</h1>
</body>
</html>
- 交集选择题：divp:中间什么都不写，直接连接起来
<html >
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.cont1.cont2{
color: red;
}
</style>
</head>
<body>
<p class="cont1">我是内容</p>
<p class="cont1 cont2">我是内容</p>
</body>
</html>
- 兄弟选择器:如果只选择最近的一个兄弟，用+号，如果选择接下来好多个一摸一样的兄弟，用~
<!--把+号改成~号可以看到不一样的效果-->
<html >
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1+p{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<p class="cont1">我是内容</p>
<p class="cont1 cont2">我是内容</p>
<p class="cont1 cont2">我是内容</p>
<h1>我是标题</h1>
<p class="cont1">我是内容</p>
<p class="cont1">我是内容</p>
<p class="cont1">我是内容</p>
<p class="cont1">我是内容</p>
<p class="cont1">我是内容</p>
</body>
</html>
-
序列选择器(针对选择同级别中的元素)
内容太多，请参考链接 -
属性选择器
1.E[att]{}：选取带有指定属性的元素
2.E[att=“val”]：选取带有指定属性和值的元素
3.E[att~=“val”]：选取属性值中包含指定词汇的元素(不常用 )
4.E[att^=“val”]：属性以指定元素开头
5.E[att$=“val”]：属性以指定元素结尾
6.E[att*=“val”]: 属性包换指定的元素
<html >
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div[dfsfdsfdffsfsfd]{background-color: red; height: 400px; width: 200px;}
div[dfsfdsfdffsfsfd="cat"]{margin:0 auto; border: 5px blue solid;}
div[dfsfdsfdffsfsfd^='c']{margin: 0 0;} /* 4 */
div[dfsfdsfdffsfsfd$='g']{margin: 0 auto;} /* 5 */
div[dfsfdsfdffsfsfd*='a']{margin-left:500px}/* 6 */
</style>
</head>
<body>
<div dfsfdsfdffsfsfd = "dog"></div> <!-- 这个属性可以自己随便设置 --> <!-- 类型1 -->
<div dfsfdsfdffsfsfd = "cat"></div><!-- 类型2 -->
</div>
</body>
</html>
- 伪类选择器
找到一个标签，在这个标签的内容前面添加一个子元素，在这个标签的后面添加一个子元素。
::after ::before
- :target：突出显示活动的HTML锚，就是锚点链接会出现高亮显示。
<html >
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
:target{background-color: green;}
</style>
</head>
<body>
<a href="#title1">跳转到标题1</a><a href="#title2">跳转到标题2</a>
<h1 id="title1">标题1</h1>
<h1 id="title2">标题2</h1>
</body>
</html>
CSS三大特性
继承性
- 并不是所有的属性都可以继承，只有以color/text-/font-/line-开头的属性才可以继承。
- 不仅儿子可以继承，所有的后代都可以继承。
- 有两个特殊的例子，
- a标签的颜色和下划线是不可以继承的，需要认为设定。
- h标签的字体大小是不可以继承的。
常常应用于设置整个页面的字体，颜色等body{font,color}
<html >
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
color: red;
background: green;
}
</style>
</head>
<body>
<div>
<p>我是段落</p>
<ul>
<li>我是段落</li>
</ul>
</div>
</body>
</html>
层叠性
可以通过多个选择方式选中元素时，样式根据优先级发生了覆盖。
优先级
- 判断方式1：直接选中的优先级>间接选中(继承)。而对于间接选中，谁离元素近就选谁。
<!--因为ul距离li比div近，因此继承ul的蓝色，而不是div的红色。如果直接设置li，那就是绿色-->
<html >
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{
color: blue;
}
div{
color: red;
}
/*li{*/
/* color: green*/
/*}*/
</style>
</head>
<body>
<div>
<div>
<ul>
<li>我是段落</li>
</ul>
</div>
</div>
</body>
</html>
- 判断方式2：如果是同类型的选择器，那么谁写在后面听谁的。
<!--绿色-->
div{
color: red;
}
div{
color: green;
}
- 如果是不同类型的选择器
| 优先级 | 样式 | 权重 |
|---|---|---|
| 1 | 行内样式<…style=""…> | 1000 |
| 2 | ID选择器#box | 100 |
| 3 | 类选择器.item{} | 10 |
| 4 | 标签选择器div{} | 1 |
| 5 | 通用选择器*{} | 0 |
| 6 | 继承 | |
| 7 | 浏览器默认 |
例如遇到：
box p .tt -----> 100+1+10
box .tt -----> 100+10
权重越大，代表优先级越高，代表被优先使用。具体遇到的时候，不用这么详细地记住，但是如果是为了寻找更加具体(深层)的标签，那么优先级肯定越高。
- 优先级提升
!important可以用来提升属性的优先级，注意点如下：
- 只能用于直接选中，不能用于间接选中
- 只能提升对应的属性。其他的属性不管
<html >
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.duanluo{
color: red;
}
p{
color: blue !important;
}
</style>
</head>
<body>
<p class="duanluo">我是段落</p>
</body>
</html>
常用Style属性
文本属性
- font-family 语法：font-family:字体1， 字体2， 字体3
- 依次按照顺序寻找字体
- 如何在一条语句中区分英文和中文的样式：font-family: “Times New Roman”, ‘宋体’。(因为英文的样只会匹配英文，当中文找不到对应的样式时，就自动匹配了后面的中文样式，由此起到了区分的作用。)
- 中文字体需要加双引号
- 带空格的英文字体需要加双引号 Times New Roman
- 不带空格的英文字体不需要加双引号 Arial
- font-weight:字体加粗 bolder/bold/normal/100-900
- font-size:
- font-style:italic/oblique/normal 字体倾斜，斜/更斜/正常
- 注意：针对font-style/font-weight/font-size/font-family，有一个更加快捷的写法
font:italic bold 20px 楷体"。注意：size的位置一定要在family的前面，不能交换。style和weight的位置可以交换。size和family一定要在所有属性的最后。其中size和famile是一定要写的，其他的可以省略。 - 注意：fontsize这里，可以加上斜杠，表示第二个值是line-height;具体课看一下官方文档。
- 注意：针对font-style/font-weight/font-size/font-family，有一个更加快捷的写法
- text-align: left/right/center/justify(两端对齐)
- line-height:行高，文字在行高中默认是垂直居中的。所以为了句子在容器中垂直居中，可以将容器的高和字体的行高设置为一样。但是如有有多行文字，就只能用小盒子嵌套在大盒子中的方法来进行设置了,需要把文字用P标签进行包裹，然后看成一个整体。行高=文字大小(fontsize)+上边距+下边距
- text-decoration: none/underline/overline/line-through 无/下划线/上划线/删除线
- text-indent: 60px 文字缩进 一般是2em。1个em表示缩进一个文字的宽度
列表属性
- list-style-type:disc/circle/square/none（实心圆、空心圆、实心方块、去掉列表符号）
- list-style-image: url()使用图片作为列表符号
- list-style-position:outside/inside （就是前面的符号点，是不是和后面的文字作为一个整体出现）
- list-style:none去掉列表样式
背景属性
背景图片只是一种样式，不会溢出。而插入的图片，如果尺寸不合适，会有溢出的效果。
-
background-image:url()插入背景图片。整个html文档会发给服务器解析，其中遇到图片又会发送新的请求去解析图片。有几幅图就会发送几次请求，可以在开发者工具的Network中查看。
-
background-color:
-
background-repeat: no-repeat/repeat/repeat-x/repeat-y 不平铺/平铺/横向平铺/纵向平铺。应用：可以通过平铺，降低背景图片的大小，提升网页的访问速度，因为每次都要从服务器下载背景图片。(例如纯色的导航条)
-
background-positon: 值1控制水平(left/center/right), 值2控制垂直(top/center/bottom) 。如果只写一个值，那么第二个值默认是center。除此之外，还可以用%，或者是具体的数值来表示位置。应用：让最重要的信息作为背景居中显示，这样无论页面变大变小，信息都会出现。而如果采用img的方式，会出现滚动条，这是不推荐的。
-
background: 颜色，链接，位置，repeat…可以都写在一起，以减少代码量。
-
background-attachment:fixed/scroll。当出现滚动条的时候，背景图片会不会随着滚动条的滚动而变化。fixed就是保持不动。可以参考官网。
-
background-size:设置背景图片的大小
- num1 num2: 直接定死图片大小，会失真
- num% num% ：按照窗口的大小，对图片进行缩放，会失真
- num auto: 按照高度缩放比例，进行等比缩放，不会失真
- auto num: 按照宽度缩放比例，进行等比缩放，不会失真
- cover: 对图片进行等比缩放，直到宽、高都能覆盖整个页面
- contain: 对图片进行等比缩放，宽高覆盖其中一个就行。
-
background-clip:（规定背景颜色等布局的位置）
- border-box:背景从边框开始放置
- padding-box:背景从padding区域开始
- content-box:背景从content部分开始
-
background-origin:(规定背景图片等布局开始的位置)
- border-box:背景图片从边框开始放置
- padding-box:背景图片从padding区域开始
- content-box:背景图片从content部分开始
-
多重背景：可以插入多个背景，先插入的会覆盖后插入的。但是插入的图片都在top:0,left:0的位置，可以通过background-position对其进行调整。
位置属性
position
语法：{position : static/absolute/relative/fixed }
position: absolute; left:0px; top:0px;可以这样写
- static : 默认值，不具有位置
- absolute: 绝对位置
- relative：绝对位置
- fixed: 在窗口上固定的一个位置。
如果，存在一个嵌套关系，那么absolute和ralative是一样的。都是相对于父容器作为参照物。
如果是一个平级关系，那么absoulute参照网页的最左上角。relative参照该容器的上一个容器的位置。
如果position设置为absolute, 那么这个位置将会空出来。下面的容器将会顶上来。
z-index
{z-index: auto/number}
当网页上发生层叠时，较大的值会覆盖在较小的值上面。
但是，要先必须设置position后，方可使用。
宽度、高度自适应属性
- min-height: 维持一个边框，如果文字超过边框，则边框进行扩展
- max-height:维持一个边框，最大不能超过这个边框，如果内容小，边框随之减小。
- max-width,min-width同理
box-shadow:
- 左右偏移 上下偏移 模糊距离 阴影扩展的距离 阴影颜色 内/外阴影(通常指定前三个就好)。
- 本身阴影的大小和元素是一样大的。通过上面这六个属性进行阴影的位置、大小的更改。
text-shadow:
- 左右偏移 上下偏移 模糊距离 阴影颜色 (和盒子阴影一样，只是参数只有四个)
盒子模型
主要由四部分组成：内容(我们指定的width,height)+padding+border+margin
border: 2px solid/dashed/dotted/double(双线) red 边框像素 线性 颜色
- 也可以单独设置border border-bottom/border-left/border-right/border-top
- 也可以border-width,border-color, border-style这样统一设置。如果是四个值，那就是分别对（上、右、下、左）进行设置。如果设置是两个值，那就是分别对(上下、左右)进行设置
- 甚至还可以设置地更加具体：border-top-width,border-top-style,border-top-color,其他地以此类推。
- 如果不想要哪条边框，直接设置为none即可。例如border-bottom:none
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#a{
height: 200px; width: 200px;
border-width: 3px;
background : lightyellow;
border-style: solid dashed;
border-color: green red purple blue;
}
</style>
<body>
<div id="a">
</div>
</body>
</html>
padding:
- padding:padding是额外加上去的，当加上padding的时候，就需要人为进行调整了。同样的，border此类也是额外加上去的。所以原来的容器尺寸会变大。格式也是：上 右 下 左
- padding-top/padding-bottm/padding-left/padding-right
magin
- 既可以连写：margin: 上 右 下 左 。也可以margin-top/margin-right/margin-bottom/margin-left
- margin: 0 auto(常用写法，上下边距为0，左右边距相同，就自动居中了)
- 注意：一般来说，我们为了自我定义，会将系统自带的border或者padding去掉。代码为：*{margin:0; padding:0}
- 注意：margin没有背景颜色，而padding有背景颜色。
- 注意：margin在垂直方向上，会发生合并现象，即选取大的margin。但是在水平方向上不会。
box-sizing
由于加上boder,padding之后会引起元素尺寸的变化。CSS3增加了box-sizing属性，如果取值设置为content-box，那么原来的元素会变大。如果设置为border-box，则会保证原来的尺寸不变，缩减内容部分的尺寸来弥补。
浮动流（脱离标准流）
什么是浮动？
1.当一个元素浮动之后，这个元素看着从标准流中删除了一样。如果前面一个元素浮动了，后面一个元素没有浮动，则前面一个元素会盖住后面一个元素。设置方式为float:left/right.
2.浮动流是一种半脱离标准流的排版方式(浮动前在哪一行，浮动后就在哪一行)。它只有左对齐和右对齐。margin:0 auto对它无效。
3.元素浮动后，不区分块级、行内、行内块级。且所有的标签都可以设置宽高(有点类似行内块级的功能)
浮动的排序规则
1.在同一个方向上，先浮动的靠前，后浮动的靠后
2.在不同的方向上，左浮动找左浮动，右浮动找右浮动
3.元素浮动后的位置，由浮动元素浮动前在标准流中的位置决定。
如图所示：将1，3设置为浮动，2，4不变。其细节变化如下：
1号脱离标准流，2，3，4移动到一号的位置，此时1号覆盖在2，3，4上。
3号脱离标准流，因为2号并没有脱离标准流，所以2号占了一行。所以此时4号移动上来，贴在2号的下面，3号再覆盖到4号上面。（所以说浮动是半脱离标准流，因为3号在浮动的时候，考虑了2号的位置关系。）
浮动元素的贴靠
浮动元素的字围现象
如果上方的正方形设置了float，那么在父元素中输入文字的时候，会出现字围现象。
定位流（不脱离标准流）
相对对位
-
postion: relative
-
相对于自己之前在标准流中的定位，配合top/right/bottom/left使用。
-
同一个方向上：用了left就不要用right，用了top就不要用right
-
由于相对定位不脱离标准流，因此是区分块级、行内块级、行内元素的（设置height、weight）
-
经常和absolute配合使用
-
当给设置了定位流的元素添加margin等属性时，改变的是原来的元素，而不是定位完之后的元素(因为原来的元素并没有脱离标准流)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
}
.box1{
background-color: red;
}
.box2{
background-color: blue;
position: relative;
top: 10px;
left: 10px;
margin-top: 30px /*改变的是原来的位置，原来的移动30px后，再执行relative的属性*/
}
.box3{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
绝对定位
-
postion: absolute
-
绝对定位脱离标准流。（下面有元素的话会顶上来）且脱离的标准流之后，不区分块级、行内等，因此它可以设置宽高，有点类似于float。
-
绝对定位对针对body来进行设置left,right,bottom,left。这个body指的是初始化的窗口大小，而不是整个html页面的大小。也就是说，定位好的元素会随着滚动条的移动而变化。
-
绝对定位的参考：在一般情况下是body。如果祖先设置了Postion: relative/absolute/fixed，那么就会以祖先为参考。如果有多个祖先都设置了(例如，父亲设置了，祖父也设置了)，那么会以距离最近的作为参考。
-
一个绝对定位的元素会忽略祖先元素的padding。
入图所示：父元素设置了postion,boder,padding。子元素设置了postion，但是忽略了父元素设置的padding。像是在父亲给定的空间中，浮动起来了。 -
如何让一个元素相对于其父元素水平居中。
<!--
1.将其设置为Postion:absolute
2.将其left,top个设置为50%
3.将margin-left，margin-top设置为元素大小的一半。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 500px;
width: 500px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 一般来说，看到有元素覆盖在另一个元素上面的时候，都要想到用定位，父元素用relative，子元素用absolute。
固定定位
- postion: fixed
- 固定定位的元素是脱离标准流的，不会占用标准流的空间。也能设置宽高等。这些特性和absolute都是一样的
- 区别：下拉条就算在拉动，元素还是保证在页面窗口中保持不变。
z-index
- 默认情况下所有的元素都有一个默认的z-index，取值为0。
- 定位流的z-index大于标准流
- 如果没有指定z-index，后面编写的元素会覆盖住前面编写的元素。如果有设置，值大的覆盖值小的。
- 如果两个元素的父元素没有设置z-index，两个子元素按照正常的流程进行比较。如果两个父元素设置了z-index,那么子元素设置的z-index会失效。即父元素谁大，就在上方。
过渡模块
transition:
<!--
1.hover里面写的是，改变后的尺寸。
2.原来的元素里面要写上：property,duration,delay,timing-function等属性。
3.如果有多个属性需要修改，就并排写，中间用逗号分开。
4.例子里面注意写法：移动到box1上面，但是修改的是box2的样式。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: yellow;
}
.box2{
width: 100px;
height: 100px;
background-color: skyblue;
transition-property: width,background-color ;
transition-duration: 5s,5s;
transition-delay: 2s,2s;
transition-timing-function: linear, linear;
}
.box1:hover .box2{
width: 500px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<!-- 在滑过box1的时候，对box2的形状进行改变-->
<div class="box2"></div>
</div>
</body>
</html>
<!--
1.transition连写：property duration linear delay,中间用空格。
2.如果有多个属性需要修改，那中间用逗号分开。
3.连写的时候可以省略后面的两个参数。
4.如果要指定所有元素的运行时间：transition: all 5s。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: yellow;
transition: width 2s linear 0s, background-color 2s linear 0s;
}
.box1:hover {
width: 500px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
<!--
手风琴效果的应用
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>92-过渡模块-手风琴效果</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 960px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
overflow: hidden;
}
ul li{
list-style: none;
width: 160px;
height: 300px;
/*background-color: red;*/
float: left;
border: 1px solid #000;
box-sizing: border-box;
/*transition-property: width;*/
/*transition-duration: 0.5s;*/
transition: width 0.5s;
}
ul:hover li{
width: 100px;
}
ul li:hover{
width: 460px;
}
</style>
</head>
<body>
<ul>
<li><img src="images/ad1.jpg" alt=""></li>
<li><img src="images/ad2.jpg" alt=""></li>
<li><img src="images/ad3.jpg" alt=""></li>
<li><img src="images/ad4.jpg" alt=""></li>
<li><img src="images/ad5.jpg" alt=""></li>
<li><img src="images/ad6.jpg" alt=""></li>
</ul>
</body>
</html>
2D效果
- transform : rotate(30deg)
- transform:translate(100px, 200px)
- transform:translateX(100px)：
- transform:translateY(200px)
- 注意旋转命令会改变该元素的横纵坐标轴。也就是说，当一个物体先旋转，再平移的时候，不会朝着水平方向，而是旋转了多少度的那个方向。
```html
<html >
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width:100px; height: 100px; border: 2px green solid; margin: 50px auto; transition: all 5s ;}
div:nth-child(6):hover{
transform: rotate(30deg) translate(100px, 100px);
}
</style>
</head>
<body>
<div>点击放大</div>
<div>按照左上角进行旋转30°</div>
<div>X轴平移，Y轴平移</div>
<div>X轴Y轴各缩放2倍</div>
<div>X轴Y轴按30°方向扭曲</div>
<div>所有效果进行叠加</div>
</body>
</html>
- transform:scale(100px, 200px)
- transform:scaleX(100px)
- transform:scaleY(200px)
- transform:skew(30deg, 30deg)
- transform:skewX(30deg)
- transform:skewY(30deg)
- transform-origin(横坐标值，纵坐标值) ，可以用具体数值/top left等值/百分数
- 注意：元素的中线点与元素的本身有关。即当我先发生平移等运动时，元素的中心点随之发生了变化。
注意：对元素做变化的属性，例如transform写在hover这种动作里。而设置的命令，例如transition，transform-origin写在元素的属性里。
注意：
<html >
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width:100px; height: 100px; border: 2px green solid; margin: 50px auto; transition: all 2s; transform-origin: left top;}
div:nth-child(1):hover{width: 200px; height: 200px; }
div:nth-child(2):hover{transform: rotate(30deg);}
div:nth-child(3):hover{transform: translate(50px, 50px);}
div:nth-child(4):hover{transform: scale(2,2); }
div:nth-child(5):hover{ transform: skew(30deg, 30deg);}
div:nth-child(6):hover{transform: rotate(30deg) translate(50px, 50px) scale(2,2) skew(30deg, 30deg); width: 200px; height: 200px;}
</style>
</head>
<body>
<div>点击放大</div>
<div>按照左上角进行旋转30°</div>
<div>X轴平移，Y轴平移</div>
<div>X轴Y轴各缩放2倍</div>
<div>X轴Y轴按30°方向扭曲</div>
<div>所有效果进行叠加</div>
</body>
</html>
perspective
在进行rotateX,rotateY,rotateZ时，为了更好地观察旋转的程度，可以给旋转元素的父元素设置perspective属性，值越小，效果越明显。
<!--因为要观察inner，所以需要给它的父元素outer设置-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer{
width: 200px;
height: 300px;
background-color: lightcyan;
border: 1px solid #000;
box-sizing: border-box;
margin: 0 auto;
margin-top: 200px;
perspective: 400px;
}
.inner{
width: 200px;
height: 300px;
background-color: red;
transform-origin: center bottom;
transition: all 2s;
}
.outer:hover .inner{
transform: rotateX(90deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
动画模块
动画就是在不用鼠标操控下就可以自动进行播放的属性。
<!--
形式1：from...to...
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
animation: aaa 2s;
}
@keyframes aaa {
from{
margin-left: 0;
}
to{
margin-left: 400px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!--如果要设置多段动画，就可以用%-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: yellow;
animation: aaa 2s;
animation-iteration-count: infinite;
}
.box1:hover{
animation-play-state: paused;
}
@keyframes aaa {
0%{
margin-left: 0;
margin-top: 0;
}
25%{
margin-left: 200px;
margin-top: 0;
}
50%{
margin-left: 200px;
margin-top: 200px;
}
75%{
margin-left: 0px;
margin-top: 200px;
}
100%{
margin-left: 0px;
margin-top: 0;
}
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
其他的属性都比较好理解，只有下面这个属性。。。。
<!--
在默认状态下,物体是正方着放animation-fill-mode:none
1.backward:开始保持保持第一个状态的样子(旋转10°)
2.forward:结束保持保持最后一个状态的样子(旋转70°)
3.both:开始也有状态，结束也有状态
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
margin-top: 200px;
animation: aaa 5s;
animation-delay: 2s;
/*animation-fill-mode: backwards;*/
}
@keyframes aaa {
0%{
transform: rotate(10deg);
}
50%{
transform: rotate(50deg);
}
100%{
transform: rotate(70deg);
}
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
三维
如果要一个物体具备3d效果，只需要给他的父元素设置transform-style: preserve-3d;
<!--制作一个立方体-->
<!--
只要记住四个面：分别先设置顶部，后面，底部，前面(90,180,270,360)
设置4个面的时候，因为旋转导致3个轴的位置也发生了变化，所以是在Z轴平移。
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
width: 200px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
margin: 150px auto;
position: relative;
transform-style: preserve-3d;
/*transform: rotateX(0deg) rotateY(0deg);*/
animation: rotate 5s
}
li{
list-style: none;
width: 200px;
height: 200px;
font-size: 50px;
line-height: 200px;
text-align: center;
position: absolute;
}
li:nth-child(1){
background-color: red;
transform: rotateX(90deg) translateZ(100px);
}
li:nth-child(2){
background-color: orange;
transform: rotateX(180deg) translateZ(100px);
}
li:nth-child(3){
background-color: yellow;
transform: rotateX(270deg) translateZ(100px);
}
li:nth-child(4){
background-color: green;
transform: rotateX(360deg) translateZ(100px);
}
li:nth-child(5){
background-color: blue;
transform: translateX(100px) rotateY(90deg);
}
li:nth-child(6){
background-color: purple;
transform: translateX(-100px) rotateY(90deg);
}
@keyframes rotate {
0%{
transform: rotateX(0deg) rotateY(0deg);
}
50%{
transform: rotateX(180deg) rotateY(180deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
扫一扫
4881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
