文章目录

第一章：环境搭建，伪类选择器，伪元素
- 1.1、嫁汉嫁汉穿衣吃饭
- 1.2、新特性简介和浏览器支持情况
- - 1.新特性简介
  - 2.浏览器对CSS3的支持情况
  - 3.渐进增强和优雅降级
- 1.3、伪类选择器（1）
- - 1.动态伪类选择器
  - 2.UI元素状态伪类选择器
- 1.4、伪类选择器（2）
- - 1.结构伪类选择器
- 1.5、伪元素案例精讲
第二章：CSS3的变形，画多边形，星形
- 2.1、CSS3用border-radius画图形
- 2.2、画三角形和对话效果
- 2.3、画菱形和平行四边形
- 2.4、CSS3画五角星和六角星
- 2.5、CSS3画五边形和六角形
- 2.6、CSS3画心形和蛋形
- 2.7、CSS3画太极阴阳图
第三章：CSS3的颜色，透明属性，颜色模式，渐变
- 3.1、css3制作透明背景层
- 3.2、css3的颜色模式(1)
- - rgba
  - hsla
- 3.3、css3的颜色模式（2）
- 3.4、css3线性渐变
- 3.5、css3径向渐变 radial-gradient
- 3.6、css3重复性渐变
- 3.7、CSS3盒子阴影效果box-shadow
第四章：CSS3的过度属性，简单的过渡动画
- 4.1、CSS3制作缓慢变长的方向（transition特效）
- 4.2、CSS3过渡的timing-function属性详解
- 4.3、CSS3仿天猫专题过渡效果实例
- 4.4、CSS3仿天猫类别过度效果制作
第五章：CSS3的动画，制作复杂的CSS动画
- 5.1、CSS3动画中的@keyframes关键帧讲解
- 5.2、CSS3动画中的animation复合属性讲解
- 5.3、CSS动画综合实例制作-内容加载loading动画实现
- 5.4、CSS3Loading动画效果实例2
第六章：文字排版的一些新特性
- 6.1、CSS3制作发光字、立体字、苹果字（text-shadow）
- 6.2、CSS3 用text-overflow解决文字排版问题
- 6.3、CSS3 性的字体单位rem

技术胖-技术胖CSS3免费视频教程(共31集)
CSS3免费视频教程_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

第一章：环境搭建，伪类选择器，伪元素

1.1、嫁汉嫁汉穿衣吃饭

body{text-align:center;
}
xxx{border-radius:50%;transition:all 0.5s;cursor:pointer;
}
xxx:hover{transform:scale(1.1);}

1.2、新特性简介和浏览器支持情况

1.新特性简介

强大的CSS3选择器
抛弃图片的视觉效果
盒模型变化（多列布局和弹性盒模型）
阴影效果
Web字体和web font图标
CSS3过渡与动画交互效果
媒体查询

2.浏览器对CSS3的支持情况

网站流量平台 - 百度统计流量研究院

Can I use… Support tables for HTML5, CSS3, etc

3.渐进增强和优雅降级

autoprefixer

HBuilder中Autoprefixer的配置方法 - DCloud问答

cnpm i -g autoprefixer postcss-cli

1.3、伪类选择器（1）

1.动态伪类选择器

 /* 为确保生效须遵循LVHA顺序声明：:link :visited :hover :active  *//* link选择器是用来选中标签当中的未访问的连接 *//* 它将选中那些尚未访问的链接，包括那些给定了其他伪类元素的选择器连接 *//* 例如：:hover :active :visited */a:link {}/* visited选择器是用来选中已经访问过链接的标签*/a:visited {}/* hover选择器是用来选中将鼠标悬停到上面的标签(适用于用户使用指示设备虚指一个元素(没有激活)的情况 */a:hover {}/* active选中器是用来匹配被用户激活的元素(选中当前用户鼠标激活的标签)*/a:active {}

2.UI元素状态伪类选择器

 /* enableb选择器是用来表示任何启用的(enabled)元素*/input:enabled {}/*disabled表示禁用状态的元素 */input:disabled {}/*checked选择器表示任何处于选中的rediu、checkbox、option */input:checked {}

案例：css3伪类选择器1

1.4、伪类选择器（2）

1.结构伪类选择器

/* 匹配某个元素中的第一个元素 */
.demo li:first-child {}/* 匹配某个元素中的最后一个元素 */
.demo li:last-child {}/* 匹配某个元素中的一个或多个特定子元素  :nth-child(n) :nth-child(2n) :nth-child(2n+1)*/
.demo li:nth-child(2) {}/* 从这个元素的最后一个子元素开始匹配一个或多个特定子元素（倒着数） */
.demo li:nth-last-child(8) {}/* 匹配具有相同节点的元素（匹配元素和他相同的） */
.demo li:nth-of-type(4) {}/* 倒序 匹配具有相同节点的元素（匹配元素和他相同的）  */
.demo li:nth-last-of-type(6) {}/* 匹配一个上级元素的第一个子元素 */
.demo2 li:first-of-type {}/* 匹配一个上级元素的最后一个子元素*/
.demo2 li:last-of-type {}/* 匹配一个元素,这个元素没有相同类型的兄弟元素*/
.demo2 li:only-of-type {}/* 匹配一个父元素的唯一 一个子元素 （也就是说这个子元素在同级中只有一个）*/
.demo2 li:only-child {}/* 匹配没有任何内容的元素 */
.demo2 div:empty {}
.clearfix {clear: both;overflow: auto;
}

案例：css3伪类选择器2

1.5、伪元素案例精讲

/* 任何伪元素都不能匹配所有真是存在的html元素 *//* :::first-letter 选中元素的第一个元素 */
.demo p::first-letter {color: #f00;font-size: 30px;float: left;/*形成下沉*/
}/* :::first-line 选中元素的第一行应用样式 */
.demo p::first-line {}/* ::after 与 ::before必需配合content属性使用 默认为行内元素 *//* ::before 用来创建一个伪元素，作为已选中元素的第一个子元素 */
.demo1::before {content: url(./head.jpg);display: block
}/* ::after 用来创建一个伪元素，作为已选中元素的最后一个子元素*/
.demo1::after {content: url('./bottom.jpg');height: 100px;display: block;/* 这是控制图片大小方法 *//* content: '';background: url(../bottom.jpg) no-repeat;background-size: contain; */
}

案例：css3伪元素

第二章：CSS3的变形，画多边形，星形

2.1、CSS3用border-radius画图形

.demo{width: 200px;height: 100px;border: 1px solid #ccc;background-color: #f66;/* border-top-left-radius: 100px;border-top-right-radius: 100px; *//* 值的排列顺序： 左上角 右上角 右下角 左下角*/border-radius: 100px 100px 0 0;
}

案例：css3用户border-radius画图形

2.2、画三角形和对话效果

.dialog {background: #6a6;width: 330px;height: 50px;line-height: 50px;padding-left: 20px;border-radius: 10px;margin: 40px auto;position: relative;
}.dialog::before {content: '';display: block;position: absolute;border: 10px solid transparent;border-right-color: #6a6;left: -20px;top: 15px;
}

案例：CSS3画三角形和对话框

2.3、画菱形和平行四边形

/* transform适用于盒模型元素来倾斜（skew）、旋转（rotate）、缩放（transform-origin）、位移（transform-origin） */
.rhomboid,
.diamond {margin: 100px auto;background: #6a6;width: 200px;
}.diamond {height: 200px;transform: rotate(45deg)
}.rhomboid {height: 100px;transform: skew(30deg, 0);
}

案例：Transform

2.4、CSS3画五角星和六角星

/* 五角星 */
/* 先绘制最顶部的三角形 */
.pentagram {position: relative;border: 30px solid transparent;border-bottom: 80px solid #f00;width: 0px;margin: 50px auto;
}/* 为三角形制定统一的样式 */
.pentagram::before,
.pentagram::after {content: '';display: block;border: 112px solid transparent;position: absolute;width: 0;height: 0;border-bottom: 80px solid #f00;
}/* 绘制左边的三角形  */
.pentagram::before {left: -75px;transform: rotate(35deg);top: -31px;
}/* 绘制右边的三角形 */
.pentagram::after {right: -75px;transform: rotate(-35deg);top: -31px
}/* 六角星 (两个等边三角形组合)*/
.hexagram {margin: 200px auto;width: 0;height: 0;border: 60px solid transparent;border-bottom: 100px solid #f00;position: relative;
}.hexagram::before {content: '';border: 60px solid transparent;border-bottom: 100px solid #f00;position: absolute;transform: rotate(180deg);left: -60px;top: 25px
}

案例：css3画五角星和六角星

2.5、CSS3画五边形和六角形

.pentagon,
.hexagon {margin: 120px auto;
}/* 开始绘画五角形 *//* 绘制梯形(通过控制宽度来撑开内部x方向的长度) */
.pentagon {width: 100px;border: 50px solid transparent;border-top:100px solid #f00;position: relative;
}/* 绘制三角形 */
.pentagon::before {content: '';display: block;width: 0;height: 0;border: 100px solid transparent;border-bottom: 75px solid #f00;position: absolute;top: -275px;left: -50px
}/* 绘制六边形 */
/* 通过控制高度来撑开内部y方向的长度 */
.hexagon,
.hexagon::after {width: 0;height: 100px;border: 50px solid transparent;
}.hexagon {border-left: 100px solid #f00;position: relative;
}.hexagon::after {content: '';border-right: 100px solid #f00;position: absolute;left: -250px;top: -50px
}

案例：css3画五角形和六角形

2.6、CSS3画心形和蛋形

.eggShape {margin: 200px auto;
}.heartShaped {margin: 100px auto;position: relative;height: 1px;width: 1px
}.heartShaped::before {position: absolute;content: '';width: 0;height: 40px;border: 40px solid #f00;border-radius: 60px 60px 0 0;transform: rotate(-45deg);transform-origin: 0  100%;left: 0px;
}.heartShaped::after {content: '';display: block;height: 40px;border: 40px solid #f00;border-radius: 60px 60px 0 0;position: absolute;transform: rotate(45deg);transform-origin: 100% 100%;right: 0px;top: 0
}
/* border-radius的值（符号‘/’前面的是x值，后面的是y值 ） */
.eggShape {width: 126px;height: 180px;background-color: #f00;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}

案例：心形和蛋形

2.7、CSS3画太极阴阳图

/* 太极图的主圆，一半黑一半白（边跨与宽度加起来必需相等于高度） */
#taiji{margin: 90px auto;background-color: #fff;width: 100px;height: 200px;border-radius: 50%;border-left:100px solid #000;position: relative;
}
/* 绘制白底黑框圆 */
#taiji::before{content: '';width: 0;height: 0;padding: 15px;background-color: #fff;border: 35px solid #000;border-radius: 50%;position: absolute;left: -50px;
}
/* 绘制黑底白框圆 */
#taiji::after{content: '';width: 0px;height: 0px;padding: 15px;background-color: #000;border: 35px solid #fff;position: absolute;border-radius: 50%;left: -50px;bottom: 0
}

案例：css3画太极阴阳图

第三章：CSS3的颜色，透明属性，颜色模式，渐变

3.1、css3制作透明背景层

#background {background: url(./rectangle.jpg) center;...position: relative;
}
/* box-shadow值的说明 x、y、阴影宽度、阴影颜色 */
#content {padding: 20px;position: absolute;...border-radius: 10px;box-shadow: 3px 3px 5px #888;opacity: 0.8;text-align: center
}

案例：css3制作透明背景层

3.2、css3的颜色模式(1)

rgba

R:红色（取值范围0-255）
G:绿色（取值范围0-255）
B:蓝色（取值范围0-255）
A:透明度（取值范围0-1）

使用：rgba(255,0,0,1)

hsla

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。

直白点讲，H就是来控制颜色的变化（这个最好理解），S就是控制颜色的浓淡，L来控制亮度，100%是白色，0%是黑色，不论是那种颜色或者饱和度，A是透明度。

使用：hsla(0,30%,20%,0.3)

案例：css3的颜色模式（1）

RGB颜色查询对照表_颜色代码表_颜色的英文名称大全

3.3、css3的颜色模式（2）

案例：3.3 css3的颜色模式（2）-实例仿天猫商品

3.4、css3线性渐变

/* 渐变适用于list-style-image、border-image、background-image、
::before、::after、cursor *//* 这是线性渐变的用法 */
/* linear-gradient(方向或度数(可以省略)，颜色 开始渐变的百分比或像素，颜色n ) */
.ceng{margin: 80px auto;width: 400px;height: 200px;border: 1px solid #f00;background-image: linear-gradient(to bottom,red,blue);/* 控制颜色梯度 */background-image: linear-gradient(red,20%,blue);/* 渐变范围 */background-image: linear-gradient(to left,red 30%,blue 10px);/* 使用不同的颜色标准 */background-image: linear-gradient(to left,#f00 200px,blue 100px);/* 堆积渐变和累积效果 */background-image: linear-gradient(to right, rgba(255,0,0,.3), mistyrose),url("https://mdn.mozillademos.org/files/15525/critters.png");
}

案例：css3线性渐变

3.5、css3径向渐变 radial-gradient

/* radial-gradient(确定渐变圆心,颜色 开始渐变的百分比或像素，颜色n ) */.circle {/* 以圆形渐变  默认以圆形渐变为准*/background: radial-gradient(rgba(255,0,0,1),blue);background: radial-gradient(circle at center,orange,green);background: radial-gradient(circle at right,orange,green);background: radial-gradient(circle at top,orange,green);background:radial-gradient(circle at top left,orange,green);/* 圆心渐变的大小 */background:radial-gradient(20px circle at center,orange,green);background: radial-gradient(20px at center,orange,green,red);
}.ellipse {/* 以椭圆形渐变 */background: radial-gradient(ellipse at center,orange,green);background: radial-gradient(ellipse at right,orange,green);background: radial-gradient(ellipse at top,orange,green);background: radial-gradient(ellipse at top left,orange,green);/* 圆心渐变的大小 椭圆渐变需要填充 x,y坐标 */background: radial-gradient(20px 30px ellipse at center,orange,green);background: radial-gradient(20px 30px ellipse at center,orange,green,red);
}

案例：css3径向渐变

3.6、css3重复性渐变

/* 要点详记： */
/* 1.只需要在线性渐变或径向渐变的前面加上repeating单词即可 */
/* 2.颜色的后面一定要跟上色标值，否则没有作用 */
.circle {background: repeating-linear-gradient(red 0px, green 40px, orange 80px);
}.ellipse {border-radius: 50%;background:repeating-radial-gradient(red 0px, green 30px, orange 40px);
}

案例：css3重复性渐变

3.7、CSS3盒子阴影效果box-shadow

box-shadow:h-shadow v-shadow blur spread color inset

h-shadow：必选，水平阴影位置，允许负值
v-shadow：必选，垂直阴影位置，允许负值
blur：模糊距离(可选)
spread：阴影尺寸(可选)
color：阴影颜色(可选)
inset：将外部阴影改为内部阴影(可选)

案例：扔在桌子上的图片

第四章：CSS3的过度属性，简单的过渡动画

4.1、CSS3制作缓慢变长的方向（transition特效）

transition是以下属性的简写属性

transition-property:过度属性（默认值all）可填写其他属性例如background、width、height
transition-duration:过渡持续时间(默认值为0)
transition-delay:过渡延迟时间（默认值为0）
transition-timing-function:过度函数（默认值为ease函数）

案例：CSS3的过度属性，简单的过渡动画

4.2、CSS3过渡的timing-function属性详解

transition-timing-function:过度函数（默认值为ease函数）

timing-function属性有如下参数可选:

ease 前期加速，中期附近减速至后期
ease-in 前期缓慢，逐渐加速，至最终状态，动画突然停止
ease-out 前期快速，接近最终状态时逐渐减速
ease-in-out 前期缓慢，中期加速，后期减速
linear 以恒定速度执行动画
cubic-bezier(x1,y1,x2,y2) 贝塞尔曲线函数
step-start 立即跳转到结束状态并保持在该位置知道动画结束
step-end 动画将保持初始状态，直到结束，直接跳转到最终位置
steps(4,end) 一个阶梯函数除于输出值的域在等距离的步骤。
steps(start,end) 一个阶梯函数除于输出值的域在等距离的步骤。

案例：CSS3过渡的timing-function属性详解

✿ cubic-bezier.com

4.3、CSS3仿天猫专题过渡效果实例

案例：仿天猫专题过渡效果

4.4、CSS3仿天猫类别过度效果制作

关于transition的bug(chrome、edge均是这个bug)，在填写属性时需要在填写属性的样式里面把要变化的样式写一下，否则没有效果

案例：天猫类别过渡效果

第五章：CSS3的动画，制作复杂的CSS动画

5.1、CSS3动画中的@keyframes关键帧讲解

/* keyframes有两种方式 */
/* 1：form to */
/* 2：百分比 */
.rect {width: 100px;height: 100px;position: fixed;animation: mymove 10s infinite;background: #f00;
}
@keyframes mymove {0% {left: 0;top: 0;background: #f00}25% {left: 95%;top: 0;background: #0f0}50% {top: 90%;left: 95%;background: #00f}75% {left: 0;top: 90%;background: #ff0}100% {left: 0;top: 0;background: #f00}
}

案例：css3

5.2、CSS3动画中的animation复合属性讲解

/* CSS种的animation是复合属性 */
/* animation是以下所有符合属性的简写，使用时只需要把值顺序填入即可 *//* animation-name 需要执行的动画，值为关键帧名字由@keysfamts定义 */
/* animation-duration 执行动画的总时间，值为number类型*/
/* animation-timing-function  */
/*(timing-function)是css数据类型表示一个数学函数（又称缓动函数），他描述了一个过渡或动画中一维数值的改变速度。（加速度曲线） */
/* 值：case、case-in、case-in-out、step-end、step-start、steps()、cubic-bezier(x1,y1,x2,y2)、linear、 */
/* animation-delay 延时执行动画，值为number*/
/* animation-iteration-count 执行动画的次数，值可为number或infinite(重复执行)*/
/* animation-direction 指示动画是否反向播放，值：normal | reverse | alternate | alternate-reverse*/
/* animation-fill-mode 设置css样式再执行之前和执行之后如何将样式应用于目标，值：none | forwards | backwards | both */
/* animation-play-state 查询或设置动画的播放状态，值：running | paused */.rect {width: 100px;height: 100px;position: fixed;background: #f00;animation: mymove 3s ease 2s 1 alternate both running;/* animation-name: mymove;animation-duration: 3s;animation-timing-function: ease;animation-delay: 2s;animation-iteration-count: 1;animation-direction: alternate;animation-fill-mode: both;animation-play-state: running */
}@keyframes mymove {0% {left: 0;top: 0;background: #f00}25% {left: 95%;top: 0;background: #0f0}50% {top: 90%;left: 95%;background: #00f}75% {left: 0;top: 90%;background: #ff0}100% {left: 0;top: 0;background: #f00}}