文章目录
CSS进阶属性(渐变、过渡、动画)
一、浏览器的认识
- 浏览器的认识：市面常见的五大浏览器是：EDGE(IE)、Firefox、Safari、Opera、Google Chrome
- 浏览器的内核与浏览器前缀（五大主流浏览器及四大内核）
| 浏览器名称 | 浏览器名称 | 浏览器前缀 |
|---|---|---|
| IE浏览器 | Trident内核 | -ms- |
| Firefox浏览器 | Gecko内核 | -moz- |
| Safari浏览器 | Webkit内核 | -webkit- |
| Opera浏览器 | 最初是自己的Presto内核，后来是Webkit，现在是Blink内核 | -o- / -webkit- / -blink- |
| Google浏览器 | 以前是Webkit内核，现在是Blink内核 | -webkit- / -blink- |
- 渐进增强和优雅降级
● 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
● 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
.transition{
/*渐进增强写法从小到大*/
-webkit-transition: all .5%;
-moz-transition: all .5%;
-o-transition: all.5%;
transition: all .5%;
}
.transition{
/*优雅降级写法 从大到小*/
transition: all .5%;
-o-transition: all.5%;
-moz-transition: all .5%;
-webkit-transition: all .5%;
}
二、CSS3属性
- 文本属性
text-shadow /*文本阴影*/ box-shadow /*盒子阴影*/ - 背景属性
background-size /*背景尺寸*/ - 边框属性
border-radius /*边框圆角*/
三、CSS3渐变属性
CSS3 渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前你必须使用图像来实现这些效果。但是通过使用 CSS3 渐变，你可以减少下载的事件和宽带的使用。此外渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的。
- 线性渐变的使用：指定水平和垂直的起始位置来制作一个对角渐变
| 标准写法 | 兼容写法 | |
|---|---|---|
| 属性 | background | background |
| 属性值 | linear-gradient | -浏览器前缀-linear-gradient |
| 方向使用1 | to 结束的方向值 | 不加to，设置开始的方向 |
| 方向使用2 | to 结束的对角值 | 不加to，设置开始的对角 |
| 方向使用2 | to 结束的对角值 | 不加to，设置开始的对角 |
| 注意点 | 方向可以不写（默认是从上到下的）、 | 多个参数之间使用逗号隔开 |
- 径向渐变的使用：带有指定的角度的线性渐变
| 属性 | background |
|---|---|
| 属性值 | -浏览器前缀-radial-gradient |
| 参数1：起点位置 | 默认center（方向值）/ 设置坐标值 |
| 参数2：渐变形状 | ellipse 椭圆形（默认值） / circle 表示圆形 |
| 参数3：渐变大小 | closest-side / farthest-side（最近/远边） closest-corner / farthest-corner（最近/最远角） |
| 注意点 | 径向渐变只有兼容写法、当渐变的形状和大小同时存在的时候之间需要使用空格隔开 |
- 重复渐变的使用：重复线性渐变和重复径向渐变
| 渐变名称 | 重复线性渐变 | 重复径向渐变 |
|---|---|---|
| 属性 | background | background |
| 属性值 | repeating-linear-gradient | repeating-radial-gradient |
四、圆角 border-radius
圆角 border-radius
属性值一个值代表的四个角，如果没有/，只有一个值，代表水平垂直半径相同
属性值两个值分别代表对角（左右下 右上左下）
属性值三个值分别代表左上 右上左下 右下
属性值四个值分别代表顺时针（左上 右上 右下 左下）
水平半径/垂直半径
如果不简写，一定要先写上下，再写左右
/* 只想设置一下右下角 */border-bottom-right-radius: 50px;
思考：如何画一个半圆 如何画一个椭圆 如何画一个四分之一圆（正月）
五、引入图标与字体
(一)、iconfont阿里云图标库
官网：iconfont官网
由于在项目中经常需要使用字体类型和小图标，字体类型有版权问题并且之前使用及精灵图方式实现小图标比较麻烦，现在提供一种安全简单的在线使用方式：阿里巴巴矢量图标库
矢量：矢量图像，又称为向量，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点，在计算机中，矢量图可以无限放大永不变形
字体图标 www.iconfont.cn 以图形的方式表示的文字
1，找到图标-添加入库-添加至项目
2，字体图标可以进行修改，也可以添加，但是需要在网站上进行操作，下载至本地
3，解压，建议文件夹命名为font
4，用link引用iconfont.css 如
5，在任意标签上用class引用iconfont
class调用
- 魂牵梦萦
- Unicode调用
-
(二)、fontawesome字体库
官网：fontawesome
(三)、字体引入
@font-face语法
@font-face{
font-family:;
src:url();/先下载该字体/
}
1、yourwebfontname:此值指的技术自定义的字体名称，Web元.中nfont-famih，如"font-fammih yourWvebfontMamme"."
2、s0urce此值指的是你自定义的字件的存效路径，可以是相对路径也可以是的路径;
3，format:此值指的是你白定火的字体的格式，主要用来想助浏览器识别，其值主要有以下几种学型，
truetyneopentyoe truetwoe aat embedded-opentypeavg s :
4、weight和style:这两个值大家一定很热悉，weight定交字体是否为姐体，style主要定义字体样式，如斜体，
六、背景渐变
<!-- 背景渐变(gradient) 1,线性渐变(由两个或两个以上的颜色) 从一个方向向(颜色)另外一方向（颜色）的渐变 background-image:linear-gradient(方向,颜色1,颜色2,......) background-image可以省略为background:linear-gradient(方向,颜色1,颜色2,......) 方向： 向上 向下 向左 向右 对角的渐变(left top deg 度数 可以取负值) to 到... to可以省略不写，但要加前缀 默认值是从上到下的渐变(to bottom) 重复线性渐变 background-image:repeating-linear-gradient(方向,颜色1,颜色2,......) 2, 径向渐变(由两个或两个以上的颜色) 从中心向四周的渐变 background-image: radial-gradient(方向,起始的颜色1,颜色2,.....); 方向：默认的是center或50% center可以省略不写，如果写加前缀 -->CSS3 渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前你必须使用图像来实现这些效果。但是通过使用 CSS3 渐变，你可以减少下载的事件和宽带的使用。此外渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的。
- 线性渐变的使用：指定水平和垂直的起始位置来制作一个对角渐变
标准写法 兼容写法 属性 background background 属性值 linear-gradient -浏览器前缀-linear-gradient 方向使用1 to 结束的方向值 不加to，设置开始的方向 方向使用2 to 结束的对角值 不加to，设置开始的对角 方向使用2 to 结束的对角值 不加to，设置开始的对角 注意点 方向可以不写（默认是从上到下的）、 多个参数之间使用逗号隔开 2.径向渐变的使用：带有指定的角度的线性渐变
属性 background 属性值 -浏览器前缀-radial-gradient 参数1：起点位置 默认center（方向值）/ 设置坐标值 参数2：渐变形状 ellipse 椭圆形（默认值） / circle 表示圆形 参数3：渐变大小 closest-side / farthest-side（最近/远边） closest-corner / farthest-corner（最近/最远角） 注意点 径向渐变只有兼容写法、当渐变的形状和大小同时存在的时候之间需要使用空格隔开 3.重复渐变的使用：重复线性渐变和重复径向渐变
渐变名称 重复线性渐变 重复径向渐变 属性 background background 属性值 repeating-linear-gradient repeating-radial-gradient
七、背景显示位置
/* 背景图的显示位置 background-origin:padding-box border-box content-box */ /* background-origin: content-box; */ /* 背景图的显示位置 background-clip:padding-box border-box content-box */
八、过渡属性
过渡(慢慢的变化过程) transition
注意：不是所有的css属性都能够进行过渡，比如display:none display:block visibility:hidden;
过渡必须要有事件（鼠标悬停，点击，双击，右击…）
过渡必须要有过渡的属性和过渡的时间初始的状态 (默认的状态) 结束的状态 (鼠标悬停)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> li{ width:100px; height: 60px; background: red; margin-bottom: 10px; } ul:hover li{ width:1000px; } ul li:nth-child(1){ transition: all 5s ease; } ul li:nth-child(2){ transition: all 5s linear; } ul li:nth-child(3){ transition: all 5s ease-in; } ul li:nth-child(4){ transition: all 5s ease-out; } ul li:nth-child(5){ transition: all 5s ease-in-out; } ul li:nth-child(6){ transition: all 5s steps(5); } ul li:nth-child(7){ transition: all 5s cubic-bezier(0, 1.32, 0.51,-0.11); } </style> </head> <body> <ul> <li>ease 慢速开始，然后变快，然后慢速结束</li> <li>linear 匀速</li> <li> ease-in 加速(以慢开始)</li> <li> ease-out 减速(以慢结束)</li> <li> ease-in-out 先加速再减速</li> <li> steps 步值</li> <li> 贝塞尔曲线</li> </ul> </body> </html>属性 说明 transition-property 参与过渡的属性，默认是all transition-duration 过渡的时间，单位使用s transition-delay 过渡的延迟时间，单位使用s transition-timing-function 过渡运动的方式：ease（慢速开始）/linear(匀速)/ease-in（慢变快）/ease-out（快变慢）/ease-in-out transition 复合属性/简写方式 网站
cubic-bezier(.17,.67,.83,.67) ✿ cubic-bezier.com
案例1：验证过渡的默认运动方式
案例2：奇虎导航案例
九、2D的属性
2D的属性（X，y） transform 改变 更换
- 偏移
x 水平方向 取值为正往右偏移取值为负往左偏移
Y 垂直方向 取值为正往下偏移取值为负往说偏移
方法一：transform ： translate(水平方向，垂直方向)；
方法二：transform:translateX(100px)translateY(100px)- 缩放 scale() 默认 X Y 不加单位 可以取负值
比1小则表示的是缩小
比1大则代表的是放大
如果1表示不变
X相当于把宽度缩放了多少
Y相当于把高度缩放了多少
方法一：transform:scale(2，0.5);
方法二：transform:scaleX(2) scaleY(0.5);- 旋转(翻转) rotate()默认是Z轴 单位deg 可以取负值
x轴可以看成上下旋转
Y可以看成左右旋转
方法：transform: rotateX(45deg) rotateY(55deg);
以下这种写法是错误的
transform: rotate(360deg,45deg);- 倾斜
倾斜 skewX() 默认是X轴 单位是deg，可以取负值
transform: skewY(15deg) skewX(20deg);
transform: skew(15deg,25deg);
十、3D属性
3d的属性（X Y Z） transform 改变 变换
- 偏移 translate() 默认值X轴 单位 px %是自己的，不是父元素的 可以取负值
X 水平方向 取值为正往右偏移 取值为负往左偏移
Y 垂直方向 取值为正往下偏移，取值为负往上偏移
Z 前后方向 取值为正往前偏移，取值为负往后偏移
方法一transform: translate3d(100px,200px,200px);
方法二
transform: translateX(100px) translateY(100px) translateZ(100px);- 缩放 scale() 默认是X Y 不加单位 可以取负值
比1小则代表的是 缩小
比1大则代表的是 放大如果1表示不变
X轴相当于把宽度缩放了多少
Y轴相当于把高度缩放了多少
Z轴相当于把厚度缩放了多少 缩放单独只看Z轴看不出效果，需要配合旋转一起
方法一transform: scale3d(2,0.5,1);
方法二
transform: scaleX(2) scaleY(0.5) scaleZ(1);- 旋转(翻转) rotate() 默认是Z轴 单位deg 可以取负值
X轴可以看成是上下旋转
y轴可以看成是左右旋转方法
transform: rotateX(45deg) rotateY(55deg);
transform: rotate3d(1,1,1,15deg); X y Z
1代表的是旋转
0代表的不旋转3d要改变的属性和2d是一样的，在2d的基础上增了一个Z轴，声明为3d
3d里没有倾斜 缩放单独只看Z轴看不出效果
perspective 如何查看透视图（专业点景深） 可以加给父元素也可以加给子元素，建议一般加在父元素，取值一般在800-1000之间立方体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="basic.css"> <!-- 立方体 分析 1，立方体有几个面 6 2，上下 前面 左右 3，声明为3d 4,需要用到偏移和旋转的属性 --> <style> ul{ width:200px; height: 200px; background: red; position: absolute; left: 0; right:0;bottom:0; top:0; margin: auto; transform-style: preserve-3d; /* 为了方便查看 */ transform: rotateX(20deg) rotateY(25deg); } ul li{ width:200px; height: 200px; background: rgba(0,255,255,0.5); position: absolute; border: solid 1px #000; } /* 前面 */ ul li:nth-child(1){ transform: translateZ(100px); } ul li:nth-child(2){ transform: translateZ(-100px); } /* 上下 */ ul li:nth-child(3){ /* transform: translateY(100px) rotateX(90deg); */ /* 演变 */ transform: rotateX(90deg) translateZ(-100px); } ul li:nth-child(4){ /* transform: translateY(100px) rotateX(90deg); */ /* 演变 */ transform: rotateX(90deg) translateZ(100px); } /* 左右 */ ul li:nth-child(5){ transform: translateX(100px) rotateY(90deg); } ul li:nth-child(6){ transform: translateX(-100px) rotateY(90deg); } /* 添加过渡效果+旋转 ul:hover li{} */ </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>基（原）点的位置
transform-origin:X y z; 其中Z轴不能取方向值
注意：想改变原点的位置必须要有transform属性
十一、动画
动画可以添加事件,也可以不添加事件
过渡
初始的
结束的动画 可以添加事件，也可以不添加事件,可以实现帧动画
初始的结束的 /* 创建动画 方法一 */ @keyframes 自己取的动画名字{ from{ /* 初始的 */ 自己修改的css代码（一段，符合CSS语法） } to{ /* 结束的 */ 自己修改的css代码（一段，符合CSS语法） } } /* 创建动画 方法二 帧动画 */ @keyframes go{ 0%{ /* 初始的 */ background:pink 自己修改的css代码（一段，符合CSS语法） } ...... 100%{ /* 结束的 */ background: green; 自己修改的css代码（一段，符合CSS语法） } }
5009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
