CSS3
CSS3 选择器
1、属性选择器
选择符：
E[att] 选择具有att属性的E元素
E[att = "val"] 选择具有att属性且属性值等于val的E元素
E[att ^= "val'] 匹配具有att属性、且值以val开头的E元素
E[att $= "val'] 匹配具有att属性、且值以val结尾的E元素
Elatt *= "val"] 匹配具有att属性、且值中含有val的E元素
- 类选择器、属性选择器、伪类选择器，权重为10
2、结构伪类选择器
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个E元素
E:nth-child(n) 匹配父元素中的第n个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后个
E:nth-of-type(n)指定类型E的第n个
- nth-child( n )
- n可以是数字、关键字和公式
- n如果是数字 就是选择第几个
- 常见的关键词有 even 偶数odd 奇数
- 常见的公式如下(如果n是公式,则从0开始计算)
- 但是 第0个元素或者超出了元素的个数会被忽略)
3、伪元素选择器
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
- 注意：
- before和after必须有content属性
- before在内容的前面，after在内容的后面
- before和after创建一个元素，但是属于行内元素
- 因为在dom里面看不见刚才创建的元素，所以我们称为伪元素
- 伪元素和标签选择器一样，权重为1
- 案例：伪元素字体图标
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?67yly4');
src: url('fonts/icomoon.eot?67yly4#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?67yly4') format('truetype'), url('fonts/icomoon.woff?67yly4') format('woff'), url('fonts/icomoon.svg?67yly4#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div,
p {
position: relative;
width: 250px;
height: 35px;
border: 1px solid red;
}
span {
font-family: 'icomoon';
position: absolute;
top: 10px;
right: 10px;
}
/* p::after {
content: '';
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
color: gray;
} */
p::after {
content: '\e900';
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
/* color: gray; */
}
</style>
<body>
<div>
<span></span>
</div>
<p></p>
</body>
CSS3 2D转换
- 转换 transform 是CSS3 中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。
- 转换可以理解为变形。
- 移动：translate
- 旋转：rotate
- 缩放：scale
1、二维坐标系
- 2D转换是改变标签在二维平面上的位置和形状的一种技术。
2、2D转换之移动 translate
-
2D移动 可以改变元素在页面中的位置，类似定位。
-
语法
transform: translate(x,y); transform: translateX(n); transform: translateY(n);移动盒子的位置：定位 盒子外边距 2D转换移动translate
-
重点：
- 定义2D转换中的移动，沿着X轴和Y轴移动元素
- translate最大的优点：不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%);
- 对行内标签没有效果
3、2D转换之旋转 rotate
-
2D旋转 是让元素在2维平面内顺时针旋转或逆时针旋转。
-
语法 ：transform: rotate(度数)
-
重点：
- 度数的单位：deg 如：rotate(45deg);
- 角度为正是顺时针，负为逆时针
- 默认旋转的中心点是元素的中心点
-
案例：三角
<title>10-CSS3书写三角</title>
<style>
div {
position: relative;
width: 250px;
height: 35px;
border: 1px solid red;
}
div::after {
content: "";
position: absolute;
top: 25%;
right: 15px;
width: 10px;
height: 10px;
/* border: 1px solid #000; */
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
/* 过渡 */
transition: all 0.2s;
}
/* 鼠标经过div 里面的三角旋转*/
div:hover::after {
transform: rotate(225deg);
}
</style>
<body>
<div></div>
</body>
4、2D转换中心点 transform-origin
- 可以设置元素转换的中心点
- 语法： transform-origin: x y;
- 重点：
- 参数x 和y 用空格隔开
- x y 默认旋转的中心点是元素的中心点（50% 50%）
- 可以给x y 设置像素 或者 方位名词（top bottom left right center）
5、2D转换之缩放 scale
- 给元素添加上该属性 就能控制它放大放小。
- 语法 ：transform:scale(x,y);
- 注意：
- x 和y用逗号隔开
- transform:scale(1,1) 宽高都放大一倍，相当于没有放大
- transform:scale(2,2) 宽高都放大了2倍
- transform:scale(2) 只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
- transform:scale(0.5,0.5) 缩小
- scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
6、2D转换综合写法
- 注意：
- 1.同时使用多个转换，其格式为：transform:translate() rotate() scale()…等
- 2.其顺序会影响转换的效果。（先旋转会改变坐标轴方向）
- 3.当我们同时有移位和其他属性的时候，记得要将移位放到最前面
CSS3 动画
- 动画（animation）可通过设置多个节点来精确控制一个或一组动画，常用来实现复制的动画效果。
- 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
1、动画的基本使用
制作动画的步骤： 1.先定义动画 2.再使用（调用）动画
-
1.用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称{ 0% { width: 100px; } 100% { width: 200px; } } -
动画序列
- 0%是动画的开始，100%是动画的完成。这样的规则就是动画系列。
- 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
- 用百分比来规定变化发生的事件，或用关键词"from"和"to",等同于0%和100%。
-
2.元素使用动画
div { width: 200px; height: 200px; background-color: olive; margin: 100px auto; /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration: 持续时间； }
2、动画常用属性
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了animation play state属性。
animation-name 规定@keyframes动画的名称。( 必须的)
animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是0。(必须的)
animation-timing-function 规定动画的速度曲线,默认是"ease" 。
animation-delay 规定动画何时开始，默认是0。
animation-iteration-count 规定动画被播放的次数，默认是1， 还有infinite
animation-direction 规定动画是否在下一周期逆向播放。默认是"normal " ，alternate逆播放
animation-play-state 规定动画是否正在运行或暂停。默认是'running",还有 "paused".
animation-fill-mode 规定动画结束后状态，保持forwards 回到起始backwards
3、动画简写属性
-
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: move 2s linear 1s 1 alternate forwards; -
简写属性里面不包含animation-play-state
-
暂停动画：animation-play-state：pause；经常和鼠标经过等其他配合使用
-
想要动画走回来，而不是直接跳回来：animation-direction：alternate
-
盒子动画结束后，停在结束位置：animation-fill-mode：forwards
4、速度曲线细节
- animation-timing-function：规定动画的速度曲线，默认使“ease”。
- linear 动画从头到尾的速度是相同的。匀速。
- ease 默认。动画以低速开始，然后加快，在结束前变慢。
- ease-in 动画以低速开始。
- ease-out 动画以低速结束。
- ease-in-out 动画以低速开始和结束。
- steps() 指定了时间函数中的间隔数量（步长）。
CSS3 3D转换
1、三维坐标系
- 三维坐标系其实就是立体空间，立体空间是由3个轴共同组成。
- x轴：水平向右 右正左负
- y轴：垂直向下 下正上负
- z轴：垂直屏幕 外正里负
2、3D位移 translate3d
- transform:translateX(100px)：仅仅在x轴上移动
- transform:translateY(100px)：仅仅在y轴上移动
- transform:translateZ(100px)：仅仅在z轴上移动（translateZ 一般用px单位）
- transform:translate3d(x,y,z)：其中x,y,z分别指要移动的轴的方向的距离
3、透视 perspective
在2D平面产生近大远小视觉立体,但是只是效果二维的
- 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。
- 模拟人类的视觉位置,可认为安排一只眼睛去看
- 适视我们也称为视距: 视距d就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大 ,越远成像越小
- 透视的单位是像素
-
透视写在被观察元素的父盒子上面的
- d :就是视距，视距就是一个距离人的眼睛到屏幕的距离。
- z:就是z轴，物体距离屏幕的距离，z轴越大(正值)我们看到的物体就越大。
4、translateZ
- transform:translateZ(100px):仅仅在Z轴上移动。
- 要有透视prespective ，才能看到translateZ 引起的变化。
5、3D旋转 rotate3d
-
3D旋转 是可以让元素在三位平面内沿着x轴，y轴，z轴或自定义轴进行旋转。
-
语法：
- transform:rotateX(45deg)：沿着x轴正方向旋转45度
- transform:rotateY(45deg)：沿着y轴正方向旋转45度
- transform:rotateZ(45deg)：沿着z轴正方向旋转45度
- transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转 deg为角度
- xzy表示旋转轴的矢量，标示是否希望沿着该轴旋转，最后一个标示旋转的角度。
-
左手准则（对于元素旋转的方向的判断）
- 左手的拇指指向x轴（或y轴 或z轴）的正方向。
- 其余手指的弯曲方向 就是该元素沿着x轴（或y轴 或z轴）旋转的方向（正值）。
6、3D呈现 transform-style
- 控制子元素是否开启三维立体环境。
- transform-style:flat; 子元素不开启3d立体空间，默认的。
- transform-style:preserve-3d; 子元素开启3d立体空间。
- 代码写给父级元素，但是影响的是子盒子。
7、案例：两面翻转的盒子
-
1.搭建HTML结构
<div class="box"> <div class="front">前</div> <div class="back">后</div> </div>- box父盒子 中包含前后两个子盒子
- box是翻转的盒子 ， front是前面的盒子，back是后面的盒子
-
2.CSS样式
- box指定大小，要添加3d呈现
- back盒子沿着Y轴翻转180度
- 最后鼠标经过box沿着Y轴旋转180deg
8、案例：3D导航栏
-
1.搭建HTML结构
<ul> <li> <div class="box"> <div class="front">前</div> <div class="bottom">后</div> </div> </li> </ul>- li做导航栏
- .box是翻转的盒子 front是前面的盒子，bottom是后面的盒子
-
2.CSS样式
- box指定大小，要添加3d呈现
- bottom 盒子先沿着X轴翻转-90deg,然后沿着Y轴向下移动盒子自身高度的一半
- 最后鼠标经过box沿着X轴旋转90deg
4、H5C3 综合案例
旋转木马
-
1.搭建HTML结构
<section> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </section> -
2.CSS样式
- section 指定大小，要添加3d呈现，旋转动画效果
- div盒子加上背景图并定位。
- 对每个div设置摆放的位置（先沿着Y轴旋转好了，再沿着Z轴移动）
5、浏览器私有前缀
- 浏览器前缀 是为了兼容老版本的写法。
1、私有前缀
- -moz-：代表Firefox浏览器私有属性
- -ms-：代表IE浏览器私有属性
- -webkit-：代表safari、chrome私有属性
- -o-：代表Opera私有属性
2、提倡写法
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
