onc-virn

【笔记】玩转CSS3新特性_from_JSPang

文章目录

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

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
    }

}