Css3系列——css3新特性学习笔记

时间 2019-11-13

标签 css3 css 系列特性学习笔记栏目 CSS 繁體版

原文原文链接

1. css3介绍

学习网址：http://css.doyoe.com/

1.1. 原则

渐进加强原则
- 例如圆角和box-shadow

2. 选择器部分

nth-child()选择器css
- 选择前五个用nth-child(-n+5)
- 他的规则是符合kn+b的表达式,nth-child(5-n)是不能够的，必须n在前面
- 数元素从1开始数，可是n是从零开始的
- 参考点
  - 参照父级的"第几个"子元素
  - 不但参照父元素，并且“相应位置”的元素类型E必须匹配
- 实现效果
:empty选择器能够用做为购物车没有商品的时候不显示数字图标html
::before和::after前端
- 内容css3
  - ::before ::after 会分别在元素的最前面和最后面添加一个元素,会影响布局
  - 而且咱们可像定义一个正常元素同样去定义它的样式
  - 必需要有content ，content 能够写入文本内容，一般给空
```
/*也能够这样使用*/
.main .item:after {
    content: attr(data-brief);
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 210px;
    position: absolute;
    top: 0;
    left: 0;
    color: #FFF;
    font-family: '微软雅黑';
    font-size: 18px;
    background-color: rgba(170, 170, 170, 0);
    z-index: -1;
    transition: all 0.3s ease-in;
}
```
  - 新建立的元素是一个行内元素，在使用时一般会转成块元素，但并非必需要转
- ：和::区别
  - CSS2里伪元素是用:来表示的，可是低版本只有:after :before两个伪元素
  - CSS3里新增了更多的伪元元素，而且约束伪元素使用::来规范，因此在CSS3里也就变成了 ::after ::before
  - 支持CSS3伪元素的浏览器，是能够正常识虽::，假如遇到:伪元素，会自动转成::。是为了作一个兼容处理
- 将来开发用：仍是：：?
  - :建议采用的::不建议采用

li::before {
            content: 'itcast';
            /*display: block;*/
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        li::after {
            content: '';
            /*display: block;*/
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .add {
            display: block;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

::selection选择器
- 须要注意的是，::selection只能定义被选择时的background-color，color及text-shadow

3. 文本

text-shadow属性浏览器
- 一个元素上能够设置多个阴影
- 可分别设置偏移量、模糊度、颜色（可设透明度）。curl
  - 水平偏移量正值向右负值向左；
  - 垂直偏移量正值向下负值向上；
  - 模糊度是不能为负值；
- 实现效果wordpress
- 能够实现浮雕特效
```
body {
      background-color: gray;
      font: bold 6em "microsoft yahei";
  }

  div {
      margin: 30px;
      color: #808080;
      text-align: center;
  }

  .to {
      text-shadow: -1px -1px #FFF, 1px 1px #000;
  }

  .ao {
      text-shadow: 1px 1px 0px #FFF, -1px -1px 0px #000;
  }
```

4. 边框

4.1. 边框圆角：border-radius

圆形写法和椭圆形写法

参数写法

两种写法原理图

以后咱们若是想获得什么样的圆角能够画上面的，而后计算百分比等
实现效果

4.2. 边框阴影:box-shadow

用法

/*使用方法和文字阴影同样，也能够设置多个阴影*/
.item:nth-child(5) {
    box-shadow: 2px 2px 10px #CCC, 4px 4px 4px blue, inset 8px 8px 10px red;
}

语法说明
- 水平偏移量正值向右负值向左；
- 垂直偏移量正值向下负值向上；
- 模糊度是不能为负值
- inset能够设置内阴影
设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局,只是视觉上的变化。能够设置多重边框阴影，实现更好的效果，加强立体感
实现效果

4.3. 边框图片：border-image

做用：经过边框背景图片能够实现自适应的边框样式，无需准备多张图片。
混合写法：border-image: url(./images/border.png) 27 stretch repeat;
多属性写法布局
- border-image-source: url(./images/border.png)；引入一个图片
- border-image-slice: 27 27 27 27；四刀裁剪
- border-image-repeat: stretch；平铺效果
- border-image-width: 80px; 改变边框背景的宽度

5. 盒子模型

计算盒子大小=content + padding + border
CSS3有一个新的属性能够改变计算盒子大小的方式,box-sizing
- box-sizing: content-box;:默认计算方式 content = width => (盒子大小=width + padding + border)
- box-sizing: border-box;:计算方式 content = width - padding - border => (盒子大小= width - padding - border + padding + border)
  - 也就是盒子大小不会改变
动画效果post

6. 颜色

赋值方式能够是数值或者角度

6.1. opacity

透明度能够用opacity属性，不过有个bug，opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度

6.2. transparent

transparent属性值，不可调节透明度，始终彻底透明学习

能够实现截取三角的效果

.inner {
  width: 0px;
  height: 0px;
  border-width:20px;
  border-style:solid;
  border-color:red transparent transparent transparent
  background: transparent;
}

6.3. RGBA模式

相较opacity，它们不具备继承性，即不会影响子元素的透明度
Red、Green、Blue、Alpha即RGBA
取值
- R、G、B 取值范围0~255
- background: rgba(255, 255, 255, 0.5);

6.4. HSLA模式

相较opacity，它们不具备继承性，即不会影响子元素的透明度。
Hue、Saturation、Lightness、Alpha即HSLA
取值
- H 色调取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
- S 饱和度取值范围0%~100%
- L 亮度取值范围0%~100%
- A 透明度取值范围0~1
- 注意只能是百分号，不能是数值background-color: hsla(360, 50%, 50%, .5);

7. 渐变

7.1. 线性渐变

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果
必要参数：方向、起始颜色、终止色
方向说明
- 直线
  - background: linear-gradient(to right, yellow, green)
- 角度
  - background: linear-gradient(45deg, yellow, green)
  - 角度计算图
渐进范围说明
- 此时的百分比是相对于父盒子的百分比
- 下面的百分比是位置，若是不一样颜色的位置相同，说明他们中间没有渐进
```
background: linear-gradient(
      90deg,
      yellow 25%,
      green 25%,
      green 50%,
      blue 50%,
      blue 75%,
      pink 75%,
      pink 100%
  );
```
- 实现效果

赋值给background-image

浏览器会自动把渐变转换为一张图片，那么背景图片涉及到的属性，这里就均可以用了
当指定了背景图片尺寸的时候，百分比相对于background-size的了

代码实现借助透明属性值和背景来实现的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 渐变</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #CCC;
        }

        .linear:nth-child(1) {
            width: 1000px;
            height: 100px;
            margin: 100px auto;
            background-color: #FFF;
            background-image: linear-gradient(
                135deg,
                black 25%,
                transparent 25%,
                transparent 50%,
                black 50%,
                black 75%,
                transparent 75%
            );
            /*background-repeat: no-repeat;*/
            background-size: 100px 100px;
            animation: move 1s linear infinite;

        }

        /*定义动画序列*/
        @keyframes move {
            from {}
            to {
                background-position: 100px 0;
            }
        }
    </style>
</head>
<body>
    <div class="linear"></div>
</body>
</html>

7.2. 径向渐变

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果
必要参数：辐射范围即圆半径,中心点,渐变起始色,渐变终止色
代码

.radial {
    width: 300px;
    height: 300px;
    margin: 100px auto;
    /*位置给英文*/
    background-image: radial-gradient(120px at left top, yellow, green);
    /*位置能够是百分比和数值*/
    background-image: radial-gradient(120px 80px at 100% 100%, yellow, green);

    /*辐射范围能够是椭圆*/
    background-image: radial-gradient(120px 80px at center center, yellow, green);

    /*能够给多个渐变色和渐变色位置*/
    background-image: radial-gradient(120px at center center, yellow, green, blue, pink);
     background-image: radial-gradient(120px at center center, yellow 25%, green 45%, blue, pink);
}

效果实现

渐变效果

球体

球体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 渐变</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }

        .radial-gradient {
            width: 200px;
            height: 200px;
            margin: 40px auto;
            border-radius: 100px;

            background-color: blue;

            background-image: radial-gradient(
                200px at 50px 60px,
                rgba(0, 0, 0, 0),
                rgba(0, 0, 0, 0.6)
            );
        }
    </style>
</head>
<body>
    <div class="radial-gradient"></div>
</body>
</html>

8. 过渡

8.1. 基础

过渡是CSS3中具备颠覆性的特征之一，能够实现元素不一样状态间的平滑过渡（补间动画），常常用来制做动画效果。
得让他具有两种状态才能过渡
- hover能够作到这个效果
- 用js动态增长新的类样式能够作到这个效果
过渡属性写在A,B状态均可以，可根据自已状况来设置

// 进入的时候有动画，离开的时候没动画，加载上面就是进入和离开的时候都有动画
.transition {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    background-color: green;
}

.transition:hover {
    transition: all 3s;
    background-color: yellow;
}

复合和拆分写法
- 参数之间除，过渡时间和延迟时间有前后要求，其余没有位置要求
- 建议写法:transition:属性时间延迟速度

过渡能够实大部分属性的过渡，但并非所有属性，具体哪些属性也没有明确的说明，你们也不用记住

8.2. 帧动画

经过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度LOGO</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }

        .logo {
            width: 270px;
            height: 129px;
            margin: 100px auto;
            background-image: url(./baidu.png);
            background-position: 0 0;
        }
    </style>
</head>
<body>
    <div class="logo"></div>
    <script>
        var logo = document.querySelector('.logo');

        var offset = -270;
        var n = 0;

        setInterval(function () {
            n++;

            logo.style.backgroundPosition = offset * n + 'px 0px';

            if(n >= 64) n = 0;
        }, 100);
    </script>
</body>
</html>

8.3. 补间动画

自动完成从起始状态到终止状态的的过渡
扩展：http://mux.alimama.com/posts/1009

9. 变换

⭐️⭐️⭐️注意在进行rocate操做的时候，坐标系也会跟着发生改变，因此动画的执行顺序不同，效果是不同的⭐️⭐️⭐️

9.1. 2D变换

转换是CSS3中具备颠覆性的特征之一，能够实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，能够取代大量以前只能靠Flash才能够实现的效果。
咱们能够同时执行多个操做,transform: translate(400px, 0) rotate(360deg) scale(2)；，☆☆☆其顺序会影响转换的效果。☆☆☆
- 咱们能够同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，

9.1.1. 经常使用方法

9.1.1.1. 移动 translate(x, y)

能够改变元素的位置，x、y可为负值；
移动位置至关于自身原来位置
轴正方向朝下
除了能够像素值，也能够是百分比，相对于自身的宽度或高度

9.1.1.2. 缩放 scale(x, y)

能够对元素进行水平和垂直方向的缩放，x、y的取值可为小数；

9.1.1.3. 旋转 rotate(deg)

能够对元素进行旋转，正值为顺时针，负值为逆时针；
当元素旋转之后，坐标轴也跟着发生的转变
调整顺序能够解决，把旋转放到最后

9.1.1.4. 倾斜 skew(deg, deg)

可使元素按必定的角度进行倾斜，可为负值，第二个参数不写默认为0。
倾斜角度的时候通常不一样时给两个参数，这样的话人脑很差想象

9.1.1.5. 矩阵matrix()

把全部的2D转换组合到一块儿，须要6个参数。

9.1.2. transform-origin

transform-origin能够调整元素转换的原点，主要用于rotate,对于transform: translate(x，y) 没有影响。
- 扑克旋转的原点变为右下角

9.1.3. 其余

效果实现

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drop-shadows</title>    
    <style>
        body {
            font: 14px/1.5 Arial, sans-serif;
            padding: 20px 0 0;
            text-align: center;
            color: #333;
            background: #ccc;
        }

        .drop-shadow {
            position: relative;
            width: 45%;
            padding: 14px; 
            margin: 28px auto 70px; 
            background: #fff;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),
                        0 0 40px rgba(0, 0, 0, 0.1) inset;
        }

        .drop-shadow:before,
        .drop-shadow:after {
            content: "";
            position: absolute; 
            z-index: -2;
            bottom: 15px;
            left: 10px;
            width: 50%;
            height: 20%;
        }

        .drop-shadow:after {                 
            right: 10px; 
            left: auto;
        }

        .round {
            border-radius: 4px;
        }

        .round:before,
        .round:after { 
            max-width: 300px;
            box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
            transform: rotate(-3deg);
        }

        .round:after {
            transform: rotate(3deg);
        }

        .curls {
            border: 1px solid #efefef;   
            border-radius: 0 0 120px 120px / 0 0 6px 6px;
        }

        .curls:before,
        .curls:after { 
            bottom: 12px;
            max-width: 200px;
            height: 55%;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
            transform: skew(-8deg) rotate(-4deg);
        } 

        .curls:after {
            transform: skew(8deg) rotate(4deg);
        }

        .perspective:before {
            left: 28px;
            bottom: 8px;
            max-width: 200px;
            height: 35%;
            box-shadow: -60px 5px 8px rgba(0, 0, 0, 0.4);
            transform: skew(50deg);
        }

        .perspective:after {
            display: none;
        }

        .raised:before {
            width: auto;
            right: 10px;
            left: 10px;
            bottom: 0;
            box-shadow: 0 8px 10px rgba(0, 0, 0, 0.5);
        }


    </style>
</head>
<body>

    <div class="drop-shadow round">
        <h1>CSS drop-shadows without images</h1>
        <p>No extra markup, fluid, all modern browsers</p>
    </div>

    <div class="drop-shadow curls">
        <h1>Some curls</h1>
        <p>No extra markup, all modern browsers</p>
    </div>

    <div class="drop-shadow perspective">
        <h1>Some perspective</h1>
        <p>No extra markup, all modern browsers</p>
    </div>

    <div class="drop-shadow raised">
        <h1>Raised box</h1>
        <p>No extra markup, all modern browsers</p>
    </div>
</body>
</html>

效果实现
- 左右翻转，其实在一张图片上

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 3D转换</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #B3C04C;
        }

        .wallet {
            width: 300px;
            height: 300px;
            margin: 50px auto;
            position: relative;
            transform-style: preserve-3d;
            transition: all 10s;
        }

        .wallet::before, .wallet::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-image: url(./images/bg.png);
            background-repeat: no-repeat;
        }

        .wallet::before {
            background-position: right top;
            transform: rotateY(180deg);
        }

        .wallet::after {
            background-position: left top;
            /*backface-visibility: hidden;*/
            transform: translateZ(2px);
        }

        .wallet:hover {
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="wallet"></div>
</body>
</html>

9.2. 3D变换

translateX的时候出滚动条了，因此会影响元素位置
若是想要作3D效果，有遮挡的立体感，通常要设置transform-style和perspective属性

9.2.1. 3D坐标系

通常图形中点是坐标系的原点

9.2.2. 经常使用方法

9.2.3. 透视（perspective）

9.2.3.1. 注意点

电脑显示屏是一个2D平面，图像之因此具备立体感（3D效果），其实只是一种视觉呈现，元素自己大小没有改变，经过透视能够实现此目的。
并不是任何状况下须要透视效果

9.2.3.2. 原理图

9.2.3.3. perspective有两种写法

做为一个属性，设置给父元素，做用于全部3D转换的子元素
- perspective:1000px
做为transform属性的一个值，作用于元素自身
- 注意必需要写在最前面，顺序能够影响效果
- transform: perspective(400px) translateZ(200px);

9.2.3.4. 实现效果

只是起到透视会产生“近大远小”的效果，但仍是平面

9.2.4. 3D呈现（transform-style）

☆☆☆☆☆☆☆☆这个属性必须给父盒子加，里面的子元素必须为变形原素,也就是子元素运用transform属性。☆☆☆☆☆
- 这样是把一个平面的东西变为多个面!
取值flat：全部子元素在 2D 平面呈现。取值preserve-3d：保留3D空间
效果

9.2.5. backface-visibility

设置元素背面是否可见

9.2.6. 效果实现

立方体效果

立方体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 3D转换</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }

        .box {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 24px;
            margin: 100px auto;
            position: relative;
            transform: rotateY(30deg) rotateX(-30deg);
            transform-style: preserve-3d;

            animation: rotate 8s linear infinite;
        }

        .front, .back, .left, .right, .top, .bottom {
            width: 200px;
            height: 200px;
            /*关键点是让几个面重合，这样坐标系能够统一*/
            position: absolute;
            top: 0;
            left: 0;
            /*给透明度是为了能够看到后面的面*/
            /*opacity: 0.5;*/
        }

        .front {
            background-color: pink;
            transform: rotateY(0) translateZ(100px);
        }

        .back {
            background-color: blue;
            transform:  translateZ(-100px);
        }

        .left {
            background-color: green;
            transform:  rotateY(90deg) translateZ(-100px);
        }

        .right {
            background-color: yellow;
            transform: rotateY(90deg) translateZ(100px);
        }

        .top {
            background-color: red;
            transform: rotateX(90deg) translateZ(100px);
        }

        .bottom {
            background-color: orange;
            transform:  rotateX(90deg) translateZ(-100px);
        }

        @keyframes rotate {
            from {
                transform: rotateX(0) rotateY(360deg);
            }

            to {
                transform: rotateX(360deg) rotateY(0);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="front">front</div>
        <div class="back">back</div>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="top">top</div>
        <div class="bottom">bottom</div>
    </div>
</body>
</html>

3D导航效果

3D导航代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 3D转换</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: '微软雅黑';
            background-color: #F7F7F7;
        }

        .nav {
            height: 40px;
            margin-top: 50px;
            text-align: center;
            list-style: none;
        }

        li {
            width: 120px;
            height: 40px;
            float: left;
            position: relative;

            transition: all 1s;

            transform-style: preserve-3d;
        }

        li span {
            height: 100%;
            width: 100%;
            line-height: 40px;
            position: absolute;
            left: 0;
            top: 0;
        }

        li span:nth-child(1) {
            transform: translateZ(20px);
            background: green;
        }

        li span:nth-child(2) {
            transform: rotateX(90deg) translateZ(20px);
            background: yellow;
        }

        li:hover {
            transform: rotateX(-90deg);
        }

    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <span>Web前端</span>
            <span>石国庆</span>
        </li>
        <li>
            <span>Web前端</span>
            <span>石国庆</span>
        </li>
        <li>
            <span>Web前端</span>
            <span>石国庆</span>
        </li>
        <li>
            <span>Web前端</span>
            <span>石国庆</span>
        </li>
    </ul>
</body>
</html>

10. 动画

11. 其余

定位：
css浮动
行内元素和块级元素
- http://www.cnblogs.com/malinlin/p/4800683.html
- http://www.cnblogs.com/dearxinli/p/3591790.html
- http://www.jb51.net/css/68729.html
  - 行内元素中不能有块级元素
- <>
什么时候用marging和padding:http://www.cnblogs.com/victent/p/3969338.html
盒子模型知多少：http://www.cnblogs.com/wangfupeng1988/p/4287292.html
- margin纵向会重叠
- 两种塌陷问题：http://www.cnblogs.com/hugejinfan/p/5901320.html
css定位：http://www.cnblogs.com/bokin/archive/2012/12/14/2816864.html
撑满盒子的两种办法

扩展：两种设置撑满全屏的方法，下面的写法用的比较多
width: 100%;
height: 100%;


position: absolute;
top: 0;
left: 0;
right:0;
bottom:0;

居中的三种方法

.arms {
    width: 340px;
    background-color: #A4CA39;
    border-radius: 25px;

    方法一
    test-align:center;
    // 垂直方向两条基线对齐
    vertual-align:center;

    方法二
    position: absolute;
    left:50%;
    top:50%;
    宽度的一半
    这样有问题，当盒子变化的时候有问题，因此推荐你们用方法3
    margin:-170px 0 0 -170px;

   方法三
    position: absolute;
    left:50%;
    top:50%;
    宽度的一半
    /*位移时设置百分比，相对盒子的大小和原来的位置*/
    transform: translate(-50%, -50%);
}