文章目录
技术胖-技术胖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的支持情况
3.渐进增强和优雅降级
autoprefixer
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;
}
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）
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函数）
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) 一个阶梯函数除于输出值的域在等距离的步骤。
✿ 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
}
}
案例：css3
5.3、CSS动画综合实例制作-内容加载loading动画实现
.spinner {
width: 300px;
height: 50px;
margin: 200px auto;
}
.spinner>div {
height: 50px;
width: 8px;
margin: 1px;
background: #67cf22;
display: inline-block;
animation: rectScale 1.3s ease infinite
}
/* 利用animation-delay延时执行动画 */
.spinner>div:nth-of-type(1){
animation-delay: -1.1s
}
.spinner>div:nth-of-type(2){
animation-delay: -.9s;
}
.spinner>div:nth-of-type(3){
animation-delay: -0.8s;
}
.spinner>div:nth-of-type(4){
animation-delay: -0.7s;
}
.spinner>div:nth-of-type(5){
animation-delay: -0.6s;
}
@keyframes rectScale {
0%,50%,100% {
transform: scale(1,1);
}
25%{
transform: scale(1,2);
}
}
5.4、CSS3Loading动画效果实例2
.cilcle {
margin: 300px auto;
position: relative;
width: 1px;
height: 1px;
}
.cilcle::before {
content: '';
width: 60px;
height: 60px;
background: #a1d679;
border-radius: 50%;
animation: cilcleScale 1s infinite;
position: absolute;
left: 0;
top: 0;
}
.cilcle::after {
content: '';
width: 30px;
height: 30px;
background: #82c04a;
border-radius: 50%;
position: absolute;
top: 15px;
left: 15px;
animation: cilcleScale 1s infinite;
animation-delay: -.5s;
}
@keyframes cilcleScale {
0%,
100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
案例：Loading
第六章：文字排版的一些新特性
6.1、CSS3制作发光字、立体字、苹果字（text-shadow）
/* text-shadow: 阴影的x 阴影的y 阴影模糊宽度 颜色; 用来设置文字的阴影效果 */
/* 发光字 */
.font1 {
text-shadow: 0 0 10px #f00;
color: white;
}
/* 发光字 */
.font2 {
text-shadow: 0 2px #9d9c9d;
}
/* 立体字 */
.font3 {
text-shadow: 1px 1px 0 rgba(248, 178, 255, .6),
2px 2px 0 rgba(248, 178, 255, .6),
3px 3px 0 rgba(248, 178, 255, .6),
4px 4px 0 rgba(248, 178, 255, .6);
}
6.2、CSS3 用text-overflow解决文字排版问题
/* text-overflow:ellipsis(代表字符 ... )|clip|string(用来替代截取截取掉的字符) */
.demo1 {
border: 1px solid black;
margin: 100px auto;
width: 300px;
/* 发出未显示的溢出内容信号 这里使用的ellipsis代表 ... */
text-overflow:ellipsis ;
/* 强制文字不换行 */
white-space: nowrap;
/* 隐藏超出部分 */
overflow: hidden;
}
/* 多行截取参考 https://github.com/happylindz/blog/issues/12 */
案例：Document
6.3、CSS3 性的字体单位rem
html{
/* 这里的62.5是根据 10/16*100% */
/* 10代表10px，16代表游览器默认的字体大小16px */
font-size: 62.5%;
}
body{
font-size: 30px;
}
.font1{
/* em是根据它的父级字体大小来决定的 */
font-size:1.4em
}
.font2{
/* rem(root em)是根据文档中的根元素来决定的 */
/* 移动端多用rem，需要配合html里面的font-size利用js获取视窗来进行计算获得font-size的值 */
font-size: 1.4rem
}
案例：Rem单位
学完之后，收获颇多，感谢胖哥的免费教程！
案例代码 forded from https://github.com/DFLMJ/css3-Review，感谢作者！
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
