CSS学习笔记（五）

CSS hack

由于低版本浏览器不兼容一些样式的功能

为了让css能够兼容低版本浏览器，我们需要些css hack

-webkit--moz--o--ms-

转换

1.什么是转换

改变元素在页面中的位置，大小，角度，形状

2D转换，只在x和y轴上进行转换

3D转换，添加了Z轴

2.转换属性

transform:转换函数1 转换函数2 转换函数3…；

2D，学习4个转换函数，3个要背

3D，学习1个转换函数

转换

①位移

改变元素在页面中的位置

transform:translate(v1); 在x轴上向右水平位移

translateX(v1) 在x轴上向右水平位移

translateY(v1) 在y轴上向下垂直位移

translate(v1,v2) 分别设置x和y的位移

②缩放

改变图片在页面中尺寸

transform:scale(v1); 同时设置x轴和y轴的缩放倍数

v1>=1 放大

0<v1<1 缩小

-1<v1<0 缩小并翻转

v1<-1 放大并翻转

scaleX(v1) 单独设置x轴缩放

scaleY(v1) 单独设置y轴缩放

scale(x,y) 分别设置x和y轴的缩放

③旋转

设置元素在页面上的角度

transform:rotate(45deg);+ 顺时针，- 逆时针

旋转的问题

1.通过设置转换原点，来设置旋转的圆心，圆心不同，旋转效果不同

transform-origin:x y; 取值：1.px为单位的数字

2.%3.关键字 x:left/center/right y:top/center/bottom

2.旋转会带着坐标轴一起旋转，会影响旋转之后的位移方向

④倾斜

skewX(ndeg)和skew(ndeg)skewY(ndeg)skew(x,y)

旋转

页面中的3D都是模拟的

透视距离，会影响人看这个3D转换的效果不同

设置透视距离，一定要写在3D转换元素的父元素上

perspective:200px;

3D旋转

transform:rotateX(xdeg) 元素围绕x轴进行旋转 单杠，烤羊腿

rotateY(ydeg) 元素围绕y轴进行旋转 土耳其烤肉，旋转门

rotatez(zdeg) 元素围绕z轴进行旋转 风车，电风扇，摩天轮

rotate3d(x,y,z,ndeg) x,y,z>0 参与旋转 等于0不参与

具体取值为旋转的倍数

过渡

css值在两个状态间，在一段时间内平缓的变化过程

1.指定参与过渡的css属性

transition-property: css属性1 css属性2 css属性3.....

all; 支持过渡属性，都参与过渡

哪些属性是支持过渡

1.颜色属性

2.阴影

3.转换

4.大多数取值为具体数字的属性

2.设置过渡的出持续时长

transition-duration: s/ms;

3.设置过渡的时间曲线函数（设置过渡的速度）

transition-timing-function: （贝塞尔曲线）

ease 默认值，慢速开始，先加速，在减速，慢速结束

linear 匀速运动

ease-in 慢慢开始，一直提速

ease-out 急速开始，一直减速

ease-in-out 慢速开始，疯狂加速，疯狂减速，慢速结束

4.过渡的延迟

transition-delay: 2s;

5.过渡代码的编写位置

过渡代码写在原来的样式中，过渡效果，有去有回

写在伪类中，过渡效果，有去无回

6.过渡的简写方式

transition: property duration timing-functin delay;

最简方式 transition: duration；

五.动画

过渡 动画

两个css之间的变化 两个，两个以上css的变化

伪类激活过渡 F5和伪类激活动画

1.关键帧

关键帧，某一个时间点执行的样式

来控制动画的每一个状态

2.使用

①创建动画

@keyframes 动画名称{

0% | from{样式…}

…

99.99% | to{样式…}

}

②调用动画

/* 指定调用的动画名称 /

animation-name: change;

/ 设置持续时间 /

animation-duration: 5s;

/ 设置时间曲线函数 /

animation-timing-function: ease;

/ 设置延迟 */

animation-delay: 0s;

3.动画的专有属性

①动画的播放次数

animation-iteration-count:

具体的数字

infinite;

②动画的播放顺序

animation-direction:

normal 0~~100

reverse; 100~0

③动画的简写方式

animation:name duration timg-function delay count direction;

最简方式 animation:name duration;

④动画的填充状态

animation-fill-mode:

backwards 在动画延迟时间内，填充动画的一帧

forwards 在动画播放结束之后，填充动画的最后一帧

both 前后都填充

的使用

是全世界程序员共用的动画库

只要把css文件导入，就可以直接使用动画名称了

CSS优化

1.优化的目的

减少服务器端的压力

提升用户体验

优化的原则

尽量减少请求的个数-----缓存（精灵图的使用，雪碧图）

在页面的顶部引入css文件

将css和js写在独立的文件中

代码优化

尽量合并样式 （能群组就群组，能简写就简写）

避免出现空的href和src

代码压缩，压缩之后代码在名称会添加min

css reset

HTML的标签在不同浏览器中，有不同的默认样式

一般情况下，我们在开发之前，会把这些不同的默认样式，进行统一

①都清除

②给统一值

1. css reset

样式重置，没有规则,只要适合你的项目，怎么写怎么对

css reset 很霸道，把html语义中的样式，都清除了

这种霸道的统一，有人追捧，有人抵触

是一个非常小的css文件，保留了默认语义样式

只为不同浏览器的兼容性，和bug做了修改，非常温和

分享标题：CSS学习笔记（五）
地址分享：/news8/188058.html

成都网站建设公司_创新互联，为您提供网站策划、云服务器、品牌网站设计、App设计、搜索引擎优化、定制网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联