CSS3选择器

相邻兄弟选择器:

选择器1+选择器2{ css代码}

最终找到的是选择器2的那个元素，选择器2必须满足是选择器1的兄弟 并且紧紧相连的下一个元素，这里面的选择器可以是基本选择器，也可以是复合选择器。

.box+div{ background-color: hotpink; }

通用兄弟选择器:

选择器1~选择器2{css代码}

选择器2必须是选择器1的后面兄弟之一，从选择器1开始往后找所有兄弟 符合当前选择器2的所有兄弟都可以匹配。

.box~.pox{ background-color: hotpink; }

属性选择器（8个）：

针对的就是标签上面的属性。

[属性名]{css代码}

表示所有body标签里面的具有该属性的标签都被选中。

[title]{ color:purple; }

·························································

选择器[属性名]{css代码}

表示在符合选择器的元素里面找到有title属性的选中。

ul>li[title]{ background-color: orange; }

·························································

选择器[属性名1][属性名2]{css代码}

表示在符合选择器的元素里面 找到所有具有着两个属性的元素并选中。

ul>li[title][class]{ background-color: hotpink; } !*三个属性也行*! ul>li[title][class][id]{ background-color: blue; }

·························································

选择器[属性名="属性值"]{css代码}

表示在符合选择器的元素里面 找到所有属性名="属性值"的那些元素并选中。

#box>input[type="text"]{ width: 300px; height: 70px; }

·························································

选择器[class~="class名字"]{css代码}

表示从当前选择器选择的元素中，找到具有该class名字的那个元素，如果该元素有多个class，则按照空格来区分class。

#box>input[class~="pox"]{ background-color: orange; }

·························································

选择器[class^="字符串"]{css代码}

表示从当前选择器选择的元素中找到class以当前字符串为开头的元素。

#box>input[class^="in"]{ background-color: hotpink; }

·························································

选择器[class*="字符串"]{css代码}

表示从当前选择器选择的元素中找到class中包含该字符串的元素。

#box>input[class*="o"]{ background-color: hotpink; }

·························································

选择器[class$="字符串"]{css代码}

表示从当前选择器选择的元素中，找到class以当前字符串为结尾的元素。

#box>input[class$="x"]{ background-color: orange; }

动态伪类选择器（5个）:

:link :visitied :hover :active :focus表示当前元素获取焦点时触发的伪类， 只针对获取能够获取焦点的元素生效。 例如:input[type=text] radio checkbox textarea #inp:focus{ background-color: hotpink; color:#fff; width: 300px; height: 70px; }

CSS3中新增了 目标伪类 元素状态伪类 结构伪类 否定伪类

目标伪类:

选择器:target 表示当前选择器选择的锚点被激活时触发的伪类选择器。

div:target{ color:orange; font-size: 50px; }

元素状态伪类

:enabled,匹配每个已启用的元素(大多用在表单元素上) :disabled,匹配每个被禁用的元素(大多用在表单元素上) :checked，匹配每个已被选中的input元素(只用于单选按钮和复选框)

选择器:元素状态伪类 #box :enabled{ width: 200px; height: 100px; }

结构伪类

1.子元素

选择器:nth-child(number){CSS代码}

在选择器中找到number(从1开始)位置的元素 2.第一个子元素

:first-child{css代码}

3.最后一个子元素

:last-child{css代码}

4.找到没有子元素的元素本身

选择器:empty{css代码}

如果元素里面带回车换行都不会匹配 只会匹配里面啥也没有的 5.匹配只有一个子元素的元素

选择器:only-child{css代码}

这个只能是选择器和伪类挨着写 表示 当前元素是不是它的父元素的唯一子元素，如果是则生效该选择器，否则不生效

否定伪类

表示一种排除关系:

:not(选择器){不是该选择器的元素生效该样式} ul>li:not(.pox){ background-color: orange; }

伪元素选择器

伪元素选择器主要针对盒子内部的文字进行设置:

:first-letter{表示当前选择器选择的元素的第一个字符} :first-line{表示当前选择器选择的元素第一行文字} ::selection{表示选中文字时 文字的样式} 注意: 文字大小不生效

下面两个选择器 表示动态的为当前元素的前后添加内容，要配合content来使用

:before{ content:"新添加的内容" } :after{content:"新添加的内容"} content可以写的内容: 1 url:图像 2 字符串：纯文本 3 计数器

CSS3–计数器counter

CSS3中计数器的使用

第一步: 在body里面创建计时器 为什么要在body? 因为全局可以使用 counter-reset: 计数器名字 计数器初始化值(不写默认0); 第二步 在要使用的选择器里面写上计数器的增长模式 (正增长还是负增长 幅度是多少)； counter-increment:计数器名字 增长幅度(正数就是正增长 反之亦然) 只能是阿拉伯数字 第三步: 使用计数器 在想要计数的地方 调用 counter(计数器名字) 就可以了；

body{ /*第一步*/ counter-reset: c1; } div{ width: 600px; padding: 20px; border: 1px solid #000; /* 第二步 */ counter-increment: c1 1; } div:before{ /*第三步 使用 此处不能写+号 因为不是js的字符串拼接 是css的拼接*/ /*选择器选择几个元素 那么计数器就增长几次*/ content:"第"counter(c1)"章" } <div> 新华社北京8月17日电 中华全国青年联合会第十三届委员会全体会议、中华全国学生联合会第二十七次代表大会17日上午在京开幕。中共中央总书记、国家主席、中央军委主席习近平发来贺信，代表党中央，向大会的召开表示热烈的祝贺，向全国各族各界青年和青年学生、向广大海外中华青年致以诚挚的问候。 </div> <div> 习近平在贺信中说，5年来，在党的领导下，在共青团帮助指导下，各级青联和学联组织锐意改革、积极进取，团结广大青年和青年学生在全面建成小康社会进程中贡献智慧力量、展现青春风采，为做好党的青年工作发挥了重要作用。 </div> <div> 习近平指出，经过全党全国各族人民团结奋斗，我们即将夺取全面建成小康社会伟大胜利，踏上实现第二个百年奋斗目标的新征程。我国广大青年要坚定理想信念，培育高尚品格，练就过硬本领，勇于创新创造，矢志艰苦奋斗，同亿万人民一道，在矢志奋斗中谱写新时代的青春之歌。 </div>

CSS3中多个计数器的使用

h1{ /*一次性定义多个计数器 (计数器的定义至少要在父元素里面)*/ counter-reset: c1 0 c2 15 c3 -16; } div{ counter-increment: c1 1 c2 5 c3 -2; } div:before{ content: "第 "counter(c3)" 章"; } <h1> <div>出席青年活动、与青年谈心、给青年回信、为青年鼓劲……习近平高度重视青年工作，站在确保党和人民的事业薪火相传的战略高度，为做好新时代青年工作指明了前进方向。</div> <div>经过全党全国各族人民团结奋斗，我们即将夺取全面建成小康社会伟大胜利，踏上实现第二个百年奋斗目标的新征程。习近平寄语我国广大青年，要坚定理想信念，培育高尚品格，练就过硬本领，勇于创新创造，矢志艰苦奋斗，同亿万人民一道，在矢志奋斗中谱写新时代的青春之歌。</div> <div>中国梦是全国各族人民的共同理想，也是青年一代应该牢固树立的远大理想。中国特色社会主义是我们党带领人民历经千辛万苦找到的实现中国梦的正确道路，也是广大青年应该牢固确立的人生信念。</div> </h1>

CSS3–文章分割列column

#box{ /* 文章分割列效果*/ /* 列数 默认按照容器的宽度去分配*/ column-count: 3; width: 800px; /* 列间隔 如果当前容器没设置高度 那么默认撑开高度*/ column-gap: 100px; /*如果容器有宽有高 那么一旦分割以后放不下默认牺牲宽 撑开宽*/ /*height: 50px;*/ /* 列之间的边框效果 值跟border一模一样*/ column-rule: 5px solid #ccc; } <div id="box"> 出席青年活动、与青年谈心、给青年回信、为青年鼓劲……习近平高度重视青年工作，站在确保党和人民的事业薪火相传的战略高度，为做好新时代青年工作指明了前进方向。 经过全党全国各族人民团结奋斗，我们即将夺取全面建成小康社会伟大胜利，踏上实现第二个百年奋斗目标的新征程。习近平寄语我国广大青年，要坚定理想信念，培育高尚品格，练就过硬本领，勇于创新创造，矢志艰苦奋斗，同亿万人民一道，在矢志奋斗中谱写新时代的青春之歌。 中国梦是全国各族人民的共同理想，也是青年一代应该牢固树立的远大理想。中国特色社会主义是我们党带领人民历经千辛万苦找到的实现中国梦的正确道路，也是广大青年应该牢固确立的人生信念。 </div>

浏览器兼容前缀的写法

#box{ width: 800px; /* IE10+和Opera浏览器 默认支持文章分割列 火狐和谷歌低版本不支持 所以要写CSS兼容写法 CSS兼容写法是什么呢? 就是靠浏览器前缀 来写多份 这样才能是属性在各大浏览器都支持 常见的浏览器前缀 Opera浏览器: -o- 火狐浏览器: -moz- 谷歌和Safari: -webkit- IE前缀: -ms-*/ -moz-column-count: 3; -moz-column-gap: 100px; -moz-column-rule: 5px solid #ccc; -webkit-column-count: 3; -webkit-column-gap: 100px; -webkit-column-rule: 5px solid #ccc; column-count: 3; column-gap: 100px; column-rule: 5px solid #ccc; } <div id="box"> 出席青年活动、与青年谈心、给青年回信、为青年鼓劲……习近平高度重视青年工作，站在确保党和人民的事业薪火相传的战略高度，为做好新时代青年工作指明了前进方向。 经过全党全国各族人民团结奋斗，我们即将夺取全面建成小康社会伟大胜利，踏上实现第二个百年奋斗目标的新征程。习近平寄语我国广大青年，要坚定理想信念，培育高尚品格，练就过硬本领，勇于创新创造，矢志艰苦奋斗，同亿万人民一道，在矢志奋斗中谱写新时代的青春之歌。 中国梦是全国各族人民的共同理想，也是青年一代应该牢固树立的远大理想。中国特色社会主义是我们党带领人民历经千辛万苦找到的实现中国梦的正确道路，也是广大青年应该牢固确立的人生信念。 </div>

浏览器的Hack的使用

通过不同的兼容手段 来实现不同浏览器显示的最终效果一致，就是浏览器的hack。 常用的手段: 浏览器前缀 -moz- -ms- -o- -webkit-； IE条件注释Hack，能够指明只在IE下显示的东西；

<!--[if IE]>此处内容只有IE可见 <br><![endif]--> <!--[if IE 6]>此处内容只有IE6.0可见<br><![endif]--> <!--[if IE 7]>此处内容只有IE7.0可见<br><![endif]--> <!--[if !IE 7]>此处内容只有IE7不能识别，其他版本都能识别，当然要在IE5以上。<br><![endif]--> <!--[if gt IE 6]> IE6以上版本可识别,IE6无法识别<br> <![endif]--> <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <br><![endif]--> <!--[if lt IE 7]> 低于IE7的版本才能识别，IE7无法识别。<br> <![endif]--> <!--[if lte IE 7]> IE7以及IE7以下版本可识别<br><![endif]--> <!--[if !IE]>此处内容只有非IE可见<br><![endif]-->

2D和3D转换的概述

css中的所谓转换 ：指的是改变元素位置,尺寸,形状的一种属性；分为 2D转换 和 3D转换。

转换分为四大方向: 旋转 位移 缩放 倾斜 分别进行2D和3D的效果转换；

2D转换

transform就是转换,默认值是 none 没有转换。 对应有四个值: rotate(旋转) translate(位移) scale(缩放) kew(倾斜)

2D转换之旋转 rotate

rotateX(角度) rotateY(角度) rotateZ(角度) rotate3d(矢量 矢量 矢量 角度) 角度的单位是deg

正数的角度是顺时针，负数的角度是逆时针。

<div id="box"></div> #box{ width: 200px; height: 200px; background: url("image/jiutong.jpg") no-repeat center/cover; margin: 100px auto; } #box:hover{ /*transform:rotate(90deg);*/ /*transform: rotateZ(-90deg);*/ /*transform: rotateX(40deg);*/ transform: rotateY(40deg); }

transform: rotate(60deg);默认是Z轴 默认的旋转圆心是中心点，也可以通过 transform-origin去改变圆心。

transform-origin:x轴圆心 y轴圆心 z轴圆心(只有3D转换才生效)； 一个值:表示三轴同值; 两个值:表示x轴和 Y轴; 值的类型:可以是 百分比 PX像素 五个方向单词;

2D转换之位移 translate

translate: x移动的位置(默认就是x轴) translateX:一个值; translateY:一个值; translate3d:x,y,z 单位是px或者百分比

<div id="parent"> <div id="box"></div> </div> #box{ width: 200px; height: 200px; background: url("image/jiutong.jpg") no-repeat center/cover; } #parent{ border: 1px solid #000; width: 200px; height: 200px; margin: 100px auto; } #box:hover{ /*transform:translateX(60px); 向右走*/ /*transform:translateX(-60px); 向左走*/ /*transform: translateY(60px); 向下走*/ /*transform: translateY(-60px);向上走*/ /*transform: translate(50px); 默认位移x轴 没有两个值的写法*/ /* transform可以多个转换连写*/ transform: translateX(60px) translateY(60px); /* 百分比是按照自身的宽高来计算百分比*/ /*transform: translateX(100%) translateY(100%);*/ /*transform-origin: right top; 圆心的改变对于位移没有任何效果*/ /*transform: translateX(100%) translateY(100%);*/ }

2D转换之缩放 scale

scale 缩放 表示缩小和放大,分为: scaleX(比例数值) scaleY(比例数值) scaleZ(比例数值) scale3d(x矢量,y矢量,z矢量,比例数值) 单位是整数数值:1表示不缩放 2表示两倍放大 0~1是缩小; 正数时直接缩放,负数翻转后缩放

<div id="parent"> <div id="box"></div> </div> #box:hover{ /*transform:scaleX(2);*/ /*transform: scaleY(2);*/ /*transform:scaleX(2) scaleY(2);*/ /*缩小至没有*/ /*transform:scaleX(0) scaleY(0);*/ /*比例没变化 但是左右翻转*/ /*transform:scaleX(-1);*/ /*transform:scaleX(-2);*/ /*缩小*/ transform: scaleX(0.3); } 思考: 圆心位置对于缩放有没有影响? 有! 缩放时 圆心的那个点不动 然后其他地方缩放 #box:hover{ transform-origin: left top; /*transform:scaleX(2) scaleY(2);*/ transform:scaleX(.2) scaleY(.2); }

2D转换之倾斜

skew倾斜: skew() skewX(角度) skewY(角度)

#box:hover{ /*如果是X轴倾斜 那么默认是逆时针倾斜*/ /*transform: skewX(50deg);*/ /*transform: skewX(-50deg);*/ /*transform: skewY(50deg);*/ /*默认是X轴*/ transform: skew(50deg); } 思考: 圆心对于清晰有没有影响? 有!!! #box:hover{ transform-origin: left top; /*transform-origin: right top;*/ /*transform: skewX(60deg);*/ /*如果倾斜是X轴 那么看元素的圆心是 上 中 下哪个位置 如果倾斜是Y轴 那么看元素的圆心是 左 中 右哪个位置*/ transform: skewY(50deg); }

关于Z轴的各种2D转换

#box:hover{ /*旋转的Z轴*/ /*transform: rotate(60deg);*/ /*transform: rotate3d(.2,.2,.2,60deg); 带有一点倾斜效果 主要是在3D转换里面实现*/ /*位移的Z轴*/ /*transform: translateZ(-600px); 看不出来效果 放到3D转换里面尝试*/ /*transform: translate3d(200px,200px,200px ); Z轴效果不明显*/ /*缩放的Z轴*/ /*transform: scaleZ(3); Z轴没效果 放到3D转换尝试*/ transform: scale3d(2,2,2); /*倾斜没有Z轴*/ }

关于2D转换的连写方式

旋转和位移要注意先后顺序: 如果先位移 那么就是在位移后的位置原地旋转; 如果先旋转 那么就会原地先旋转 会改变轴心的方向 会按照旋转后的轴心方向进行位移。 #box:hover{ /*transform可以进行 四个转换的连写 但是注意啊旋转和位移*/ /*transform: translateX(200px) scaleY(2);*/ /*transform: translateX(100px) scaleY(2) skewY(60deg) rotate(90deg);*/ /*transform: translateX(200px) rotate(90deg);*/ transform: rotate(60deg) translateX(200px) ; }

3D转换的初步使用

所谓的3D转换 就是在父元素里面添加一个属性

perspective:px值; 100~900之间；一般是600px。 值越小 3D效果越明显，值越大 3D效果越不明显。

然后 原来的 四个转换怎么写 现在还怎么写 就是效果不一样了。 这次会按照3D的方式进行转换。

body{ perspective: 600px; } #box{ width: 200px; height: 200px; background: url("image/jiutong.jpg") no-repeat center/cover; } #parent{ border: 1px solid #000; width: 200px; height: 200px; margin: 100px auto; } #box:hover{ transform: rotateX(60deg); }

3D转换之旋转

#parent{ width: 200px; height: 200px; border: 1px solid #000; margin: 50px auto; } body{ /*如果是3D转换 必须在要转换到元素的父系元素添加以下属性*/ /*值越小 3D效果越明显 一般实际开发600左右*/ perspective: 600px; } #box{ width: 200px; height: 200px; background-color: hotpink; } #box:hover{ /*transform: rotate(60deg); 跟2D效果一样*/ /*transform: rotateX(110deg);*/ /*transform: rotateY(60deg);*/ /*改变圆心*/ /*transform-origin: right top;*/ /*transform-origin: bottom;*/ /*3D转换下 X轴的旋转只看圆心的上中下*/ /*transform: rotateX(60deg);*/ /*transform-origin: left;*/ /*transform-origin: right;*/ /*3D转换下 Y轴的旋转只看圆心的左中右*/ transform: rotateY(60deg); /*transform: rotate3d(.3,.3,.3,60deg);*/ } <div id="parent"> <div id="box"></div> </div>

3D转换之位移

#parent{ width: 200px; height: 200px; border: 1px solid #000; margin: 50px auto; } body{ /*如果是3D转换 必须在要转换到元素的父系元素添加以下属性*/ /*值越小 3D效果越明显 一般实际开发600左右*/ perspective: 600px; } #box{ width: 200px; height: 200px; background-color: hotpink; } #box:hover{ /*transform: translateX(60px); 跟2D效果一样*/ /*transform: translateY(60px); 跟2D效果一样*/ /*transform: translateZ(70px); 2D中没效果 3D中跟Z轴的缩放效果一样 */ /*三个轴心同时位移*/ transform: translate3d(50px,50px,100px); }

3D转换之缩放

#parent{ width: 200px; height: 200px; border: 1px solid #000; margin: 50px auto; } body{ /*如果是3D转换 必须在要转换到元素的父系元素添加以下属性*/ /*值越小 3D效果越明显 一般实际开发600左右*/ perspective: 600px; } #box{ width: 200px; height: 200px; background-color: hotpink; } #box:hover{ /*transform: scaleX(3) scaleY(3); 2D效果一样*/ /*transform: scaleZ(3); 3D也没效果*/ /*x,y,z缩放 z没效果*/ transform: scale3d(2,2,2); }

3D转换之倾斜

#parent{ width: 200px; height: 200px; border: 1px solid #000; margin: 50px auto; } body{ /*如果是3D转换 必须在要转换到元素的父系元素添加以下属性*/ /*值越小 3D效果越明显 一般实际开发600左右*/ perspective: 600px; } #box{ width: 200px; height: 200px; background-color: hotpink; } #box:hover{ transform: skew(60deg) skewY(60deg); /*跟2D效果一样*/ }

transition过渡的使用

什么是过渡? 回忆我们之前通过css能够完成的动画 2D转换 3D转换；

我们的动画都是一瞬间完成 看不到中间变换的过程，而过渡就是用来把这个中间过程细节给放大 变慢 能够让我们看出来动画是如何进行过渡的。

transition 就是过渡的属性

transition要想实现过渡的前提就是: 元素的变化必须是结合用户的交互动作才能实现过渡， 如果是页面已加载就已经动画结束 则无法实现过渡。例如可以实现过渡的: 鼠标移入 盒子变大； 鼠标点击 盒子变化颜色 等等

transition过渡使用步骤:

在这个想要过渡的元素的原有选择器上面添加过渡监听。

第一种格式使用： transition: 要监听 过渡变化的属性名 过渡执行时间; 时间单位有 s秒 ms毫秒两种 只要被过渡监听的属性 一旦发生了值的变化 那么就可以使用过渡 hover 是鼠标移入发生变化 鼠标离开变化回去 所以才有两次过渡 **ps:**通过js改变了该属性的状态也能触发过渡

第二种格式: 监听多个属性 需要用到transition-property transition-duration 很麻烦 所以如果监听多个属性 建议用all transition : all 时间; 监听所有属性 但凡有变化的全部实现过渡

第三种格式: transition: 监听的属性 持续时间 延迟时间; transition: property duration delay; delay: 触发过渡延迟多久执行过渡

第四种格式: transition: 监听的属性 持续时间 延迟时间 动画差值器 transition: property duration delay timing-function; 所谓差值器就是动画的变化率 值: linear(匀速) ease(先快后慢) ease-in(先慢后快) ease-out(先快后慢) ease-int-out(先慢后快再慢)

ps: 过渡属性要记得 能够监听到属性值的改变!!! 改变表示原来有这个属性 现在值发生了变化 才能监听到，所以要保证原有的选择器有这个属性的初始值。

可以设置过渡的属性： ——颜色属性 ——取值为数值的属性 ——转换属性 ——渐变属性(后面讲 背景渐变) ——visibility属性 ——阴影属性(box-shadow 太极图部分讲) #box{ position: absolute; width: 200px; height: 200px; background-color: hotpink; left:0; /*transition: background-color 2s;*/ /*监听多个属性用逗号隔开*/ /*transition: background-color,width 2s;*/ /*如果监听两个以上的属性 则需要分开写*/ /*监听的属性名*/ /*transition-property: background-color,width,height;*/ /*持续时间 监听的属性顺序 和时间顺序要相对应 或者直接写一个值 全部按照相同时间*/ /*transition-duration: 2s,3s,3s;*/ /*transition:all 2s;*/ /*transition:all 2s 3s;*/ /*transition:all 2s 1s linear;*/ /*transition:all 2s 1s ease;*/ /*transition:all 2s 1s ease-in;*/ /*transition:all 2s 1s ease-out;*/ transition:all 5s 1s ease-in-out; } #box:hover{ /*颜色属性过渡*/ /*background-color: purple;*/ /*数值属性过渡*/ /*width: 600px;*/ /*height:600px;*/ left:400px; } <div id="box"></div> var box=document.getElementById("box"); box.onclick=function () { //JS的改变也能触发过渡效果 box.style.backgroundColor="red"; }

要想使本身具有3D效果的元素的子元素也可以3D转换 那么就要给当前父元素添加下面属性transform-style: preserve-3d; preserve /prɪˈzɜːv/

border-radius圆角的使用

border-radius关于倒角的运算: 值分为: 四个值 --左上角 右上角 右下角 左下角 两个值 --左上和右下角 右上和左下角 一个值 --四个角

border-radius:是连写属性，分开写是:border-left-top-radius:

border-radius的角是如何倒角的? 在前端中的圆倒角是按照矩形的内切圆来确定大小以及角度的。也就是说 正方形的宽度就是内切圆对应的直径。 border-radius所写的值都是倒角的那个圆的半径，所以border-radius写宽高的一半就实现了圆形，椭圆就是按照长方形画一个内切圆。

box-shadow阴影的使用:

x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

总共有五个值 必选的 是前两个 和最后一个 x y 阴影颜色 第一个值: x轴的阴影长度 第二个值: y轴的阴影长度 第三个值: 模糊的半径 在原有的阴影长度基础上把模糊度增加 模糊的范围增加 数值越大越模糊 模糊的范围越大 第四个值: 模糊的范围 左上角也会出现阴影 值越大左上角包含阴影的范围越大 第五个值: 阴影的颜色

animationd动画概述

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。 CSS3动画:当在@keyframe创建动画,把它绑定到一个选择器,否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器:

规定动画的名称

规定动画的时长 (如果不添加时长 则默认是0就等于没有动画执行时间 就没有效果)

请用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100%。

0%是动画的开始, 100%是动画的完成。

@keyframes 规定动画。 animation 所有动画属性的简写属性,除了 animation-play-state属性 animation-name 规定@keyframes动画的名称。 animation-duration 规定动画完成一个周期所花费的秒或革秒。默认是0. animation-timing-function 规定动画的速度曲线。默认是"eage". animation-delay 规定动画何时开始。默认是0。 animation-iteration-count 规定动画被播放的次数。默认是1 animation-direction 规定动画是否在下一周期逆向地播放。默认是"normal" animation-fill-mode:规定动画执行完是否停留最终状态 默认值是none forwards(最后义诊) backwards(第一帧) animation-play-state规定动画是否正在运行或暂停。默认是"running"

animation帧动画的使用

通过@keyframes来设置帧动画中间的动画过程 两种设置方式: from 和to的 还有 百分比 格式: @keyframes 自己起一个动画名称{ from{ css代码 } to{ cs代码 } } 在想使用动画的元素选择器里面通过animation开头的各种属性来使用动画 #box{ /*引入动画的名字*/ /*animation-name:change;*/ animation-name:change1; /*动画执行时间 s秒 ms毫秒*/ animation-duration: 2s; /*动画差值器 还是那几个 ease ease-in ease-out ease-in-out linear*/ animation-timing-function: linear; /*动画执行的延迟 s秒 ms毫秒*/ /*animation-delay: 2s;*/ /*动画执行的次数 默认是每次都从头开始执行*/ animation-iteration-count: 3; /*下一次动画的执行方向 默认值是normal(每次从头开始) revert跟normal效果一样 alternate 是来回执行 前提是 执行次数要大于1次 alternate-reverse 先从终点开始 然后来回执行 执行次数要大于1次 reverse 每次都从终点开始执行*/ /*animation-direction: reverse;*/ animation-direction: alternate; /*animation-fill-mode: 规定动画执行完是否停留最终状态 默认值是none(回归初始状态) forwards(最后一帧) backwards(回归初始状态)*/ animation-fill-mode: forwards; /*规定动画是否正在运行或暂停。默认是"running" 一般是js属性控制动画的 暂停和开始*/ /*animation-play-state:paused;*/ } @keyframes change{ from{ background-color: hotpink; width: 200px; height: 200px; } to{ height: 400px; width: 400px; background-color: orange; } } @keyframes change1 { /*百分比设置动画时 要注意 最好比例差不多 要不然会出现 效果前后不一致的卡顿效果 帧动画里面一样可以写 2D 3D转换哟!!!*/ 0%{ width: 0px; height: 0px; background-color: hotpink; transform: rotateZ(0deg); } 50%{ width: 200px; height: 200px; background-color: orange; transform: rotateZ(180deg); } 100%{ width: 400px; height: 400px; background-color: red; transform: rotateZ(360deg); } }

js控制animtion动画的暂停与开始

#box{ /*width: 200px;*/ /*height: 200px;*/ background-color: hotpink; } #box{ /*引入动画的名字*/ /*animation-name:change;*/ /*animation-name:change1;*/ /*动画执行时间 s秒 ms毫秒*/ /*animation-duration: 4s;*/ /*动画差值器 还是那几个 ease ease-in ease-out ease-in-out linear*/ /*animation-timing-function: linear;*/ /* 动画执行的延迟 s秒 ms毫秒*/ /* animation-delay: 2s;*/ /* 动画执行的次数 默认是每次都从头开始执行*/ /* animation-iteration-count: 3;*/ /*下一次动画的执行方向 默认值是normal(每次从头开始) revert跟normal效果一样 alternate 是来回执行 前提是 执行次数要大于1次 alternate-reverse 先从终点开始 然后来回执行 执行次数要大于1次 reverse 每次都从终点开始执行*/ /*animation-direction: reverse;*/ /*animation-direction: alternate;*/ /*animation-fill-mode: 规定动画执行完是否停留最终状态 默认值是none(回归初始状态) forwards(最后一帧) backwards(回归初始状态)*/ /*animation-fill-mode: forwards;*/ /*规定动画是否正在运行或暂停。默认是"running" 一般是js属性控制动画的 暂停和开始*/ /*animation-play-state:paused;*/ /*连写属性的写法*/ animation:change1 4s linear 2s 3 alternate forwards; } @keyframes change{ from{ background-color: hotpink; width: 200px; height: 200px; } to{ height: 400px; width: 400px; background-color: orange; } } @keyframes change1 { /*百分比设置动画时 要注意 最好比例差不多 要不然会出现 效果前后不一致的卡顿效果 帧动画里面一样可以写 2D 3D转换哟!!!*/ 0%{ width: 0px; height: 0px; background-color: hotpink; transform: rotateZ(0deg); } 50%{ width: 200px; height: 200px; background-color: orange; transform: rotateZ(180deg); } 100%{ width: 400px; height: 400px; background-color: red; transform: rotateZ(360deg); } } #btns{ position: fixed; right: 100px; top: 50px; } <div id="box"></div> <div id="btns"> <button>开始</button> <button>暂停</button> </div> var btnArr=document.getElementsByTagName("button"); var box=document.getElementById("box"); btnArr[0].onclick=function () { box.style.animationPlayState="running" } btnArr[1].onclick=function () { box.style.animationPlayState="paused" // console.log(1); } box.onmouseover=function () { box.style.animationPlayState="paused" } box.onmouseout=function () { box.style.animationPlayState="running" }

面试题:

过渡动画和帧动画的区别: 过渡动画指的是 针对元素某几个属性变化 而把这个过程拉长变慢的过程 强调过渡; 而帧动画 是真的为每一帧设置动作 从而实现动画 所以帧动画过程更细腻; 实际开发中 如果是短距离的小范围的动画 建议用过渡; 如果是多属性 大范围的动画效果 建议使用帧动画;

IE浏览器的兼容后缀写法

#box{ width: 200px; height: 200px; background-color: hotpink; /* \9 是IE10及以下能加载的属性*/ /*background-color: red\9;*/ /*\0 是只能IE8及以上版本能识别*/ /*background-color: red\0;*/ /*\9\0 只能识别 IE9 IE10 两个版本*/ background-color: red\9\0; }

引入自定义字体库

#box{ background-color: hotpink; color:#fff; font-size: 30px; /*font-family: 华文新魏;*/ /*使用自定义引入的字体*/ font-family: 炫酷古风字体; } /*引入一个自定义的ttf字体库文件 通过@font-face @font-face{ font-family:自定义字体名称(可以是中文); scr:url("字体.ttf文件的网络路径或者相对路径"); } 一般网络路径用的多*/ @font-face { font-family: 炫酷古风字体; /*src: url("fonts/myziti.ttf");*/ /*实际开发路径要不写协议 直接//开头 这样的效果就是自动识别当前网页打开的环境是什么协议 自动补齐*/ /*src: url("//static.yufenghen.cn/demo/fonts//myziti.ttf");*/ /*但是现在我们没有上线的服务器 所以靠ws无法实现自动补齐域名*/ src: url("https://static.yufenghen.cn/demo/fonts/myziti.ttf"); }

iconfont在线字体库的使用

使用步骤: 1.打开iconfont.cn网站 2.选择自己想要的图标 点击加入购物车按钮 3.打开自己购物车 把加入购物车的一堆图标 点击添加至项目 4.如果没有自己的项目 可以先创建一个项目 5.点击查看在线链接 6.暂无代码 点此生成 点就完了 7.切换到font-class 把那个网址复制打开 8.看到一堆代码了么 复制 9.本地自己创建css文件 10.自己创建标签 定义class为复制过来代码的那个class(别忘记引入外链css) 11.别忘记基本类名 class=“iconfont 下面的想要引入的那个图标类名” <link rel="stylesheet" href="css/fonts.css"> <div id="box" class="iconfont icon-headphones"></div>

背景渐变的使用

所谓的渐变使用的是background-image 不过值不再是url而是 linear-gradient和radial-gradient 线性渐变 linear-gradient 径向渐变 radial-gradient

线性渐变

用法1: linear-gradient(颜色1,颜色2,颜色3,…颜色n); 都是平均分的渐变

用法2 linear-gradient(颜色1 百分比,颜色2 百分比,…颜色n 百分比);

用法3: linear-gradient(角度deg,颜色1 百分比…) background-image:linear-gradient(red,#0f0,purple);

所谓的百分比不是颜色占比多少 而是指 当前颜色结束点的位置 也就是纯色所占的位置 剩下颜色直接的差 才是自动渐变的部分

#box{ width: 400px; height: 400px; border: 1px solid #000; /*background-image:linear-gradient(red 10%,#0f0 50%,blue 80%);*/ /*默认是180deg*/ /*background-image: linear-gradient(180deg,red,blue);*/ /*background-image: linear-gradient(red,blue);*/ border-radius: 200px; /*径向渐变*/ /* 用法1*/ /* background-image: radial-gradient(red,blue);*/ /* 用法2 */ /* background-image: radial-gradient(red 10%,blue 30%);*/ /* 改变圆心位置 center表示默认 是中心*/ /* background-image: radial-gradient(circle at center ,red 10%,blue 30%);*/ /* background-image: radial-gradient(circle at left ,red 10%,blue 30%);*/ /* 圆心可以写一个方向*/ /* background-image: radial-gradient(circle at bottom ,red 10%,blue 30%);*/ /* 圆心可以写两个方向*/ /* background-image: radial-gradient(circle at left top ,red 10%,blue 30%);*/ /* 圆心还可以写px值*/ /* background-image: radial-gradient(circle at 100px 100px ,red 10%,blue 30%);*/ /* 可以设置径向的大小 宽 高 at 圆心的位置*/ /* background-image: radial-gradient(300px 200px at center ,red 10%,blue 30%);*/ /* background-image: radial-gradient(300px 200px at 100px 200px ,red 10%,blue 30%);*/ /* 如果后面两个数是相等的 那么就是正圆的径向 如果不相等 这就是椭圆*/ /* background-image: radial-gradient(ellipse at 100px 100px ,red 10%,blue 30%);*/ /*线性渐变重复*/ /* background-image: repeating-linear-gradient(60deg,red 10%,blue 30%);*/ /*径向渐变重复*/ background-image: repeating-radial-gradient(red 10%,#0f0 20%); }