HelloWorld
登录

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

Stella981

2021-10-11

984 0 0

1. css3介绍

1.1. 原则

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

2. 选择器部分

  • nth-child()选择器

    • 选择前五个用nth-child(-n+5)
    • 他的规则是符合kn+b的表达式,nth-child(5-n)是不可以的，必须n在前面
    • 数元素从1开始数，但是n是从零开始的
    • 参考点
      • 参照父级的"第几个"子元素
      • 不但参照父元素，而且“相应位置”的元素类型E必须匹配
    • 实现效果

  • :empty选择器可以用作为购物车没有商品的时候不显示数字图标

  • ::before和::after

    • 内容

      • ::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属性

    • 一个元素上可以设置多个阴影

    • 可分别设置偏移量、模糊度、颜色（可设透明度）。

      • 水平偏移量 正值向右 负值向左；
      • 垂直偏移量 正值向下 负值向上；
      • 模糊度是不能为负值；

    • 实现效果

    • 可以实现浮雕特效

    1  body {
2      background-color: gray;
3      font: bold 6em "microsoft yahei";
4  }
5
6  div {
7      margin: 30px;
8      color: #808080;
9      text-align: center;
10  }
11
12  .to {
13      text-shadow: -1px -1px #FFF, 1px 1px #000;
14  }
15
16  .ao {
17      text-shadow: 1px 1px 0px #FFF, -1px -1px 0px #000;
18  }

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)
      • 也就是盒子大小不会改变

  • 动画效果

6. 颜色

  • 赋值方式可以是数值或者角度

6.1. opacity

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

6.2. transparent

  • transparent属性值，不可调节透明度，始终完全透明

    • 可以实现截取三角的效果

    1.inner {
2  width: 0px;
3  height: 0px;
4  border-width:20px;
5  border-style:solid;
6  border-color:red transparent transparent transparent
7  background: transparent;
8}

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的了

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

      1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>CSS3 渐变</title>
6    <style>
7        body {
8            margin: 0;
9            padding: 0;
10            background-color: #CCC;
11        }
12
13        .linear:nth-child(1) {
14            width: 1000px;
15            height: 100px;
16            margin: 100px auto;
17            background-color: #FFF;
18            background-image: linear-gradient(
19                135deg,
20                black 25%,
21                transparent 25%,
22                transparent 50%,
23                black 50%,
24                black 75%,
25                transparent 75%
26            );
27            /*background-repeat: no-repeat;*/
28            background-size: 100px 100px;
29            animation: move 1s linear infinite;
30
31        }
32
33        /*定义动画序列*/
34        @keyframes move {
35            from {}
36            to {
37                background-position: 100px 0;
38            }
39        }
40    </style>
41</head>
42<body>
43    <div class="linear"></div>
44</body>
45</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);

    1/*辐射范围可以是椭圆*/
2background-image: radial-gradient(120px 80px at center center, yellow, green);
3
4/*可以给多个渐变色和渐变色位置*/
5background-image: radial-gradient(120px at center center, yellow, green, blue, pink);
6 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; } 
      1    .radial-gradient {
2        width: 200px;
3        height: 200px;
4        margin: 40px auto;
5        border-radius: 100px;
6
7        background-color: blue;
8
9        background-image: radial-gradient(
10            200px at 50px 60px,
11            rgba(0, 0, 0, 0),
12            rgba(0, 0, 0, 0.6)
13        );
14    }
15</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; } 
    1    .logo {
2        width: 270px;
3        height: 129px;
4        margin: 100px auto;
5        background-image: url(./baidu.png);
6        background-position: 0 0;
7    }
8</style>
    </head> <body> <div class="logo"></div> <script> var logo = document.querySelector('.logo'); 
    1    var offset = -270;
2    var n = 0;
3
4    setInterval(function () {
5        n++;
6
7        logo.style.backgroundPosition = offset * n + 'px 0px';
8
9        if(n >= 64) n = 0;
10    }, 100);
11</script>
    </body> </html>

8.3. 补间动画

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; } 
    1    .drop-shadow {
2        position: relative;
3        width: 45%;
4        padding: 14px; 
5        margin: 28px auto 70px; 
6        background: #fff;
7        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),
8                    0 0 40px rgba(0, 0, 0, 0.1) inset;
9    }
10
11    .drop-shadow:before,
12    .drop-shadow:after {
13        content: "";
14        position: absolute; 
15        z-index: -2;
16        bottom: 15px;
17        left: 10px;
18        width: 50%;
19        height: 20%;
20    }
21
22    .drop-shadow:after {                 
23        right: 10px; 
24        left: auto;
25    }
26
27    .round {
28        border-radius: 4px;
29    }
30
31    .round:before,
32    .round:after { 
33        max-width: 300px;
34        box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
35        transform: rotate(-3deg);
36    }
37
38    .round:after {
39        transform: rotate(3deg);
40    }
41
42    .curls {
43        border: 1px solid #efefef;   
44        border-radius: 0 0 120px 120px / 0 0 6px 6px;
45    }
46
47    .curls:before,
48    .curls:after { 
49        bottom: 12px;
50        max-width: 200px;
51        height: 55%;
52        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
53        transform: skew(-8deg) rotate(-4deg);
54    } 
55
56    .curls:after {
57        transform: skew(8deg) rotate(4deg);
58    }
59
60    .perspective:before {
61        left: 28px;
62        bottom: 8px;
63        max-width: 200px;
64        height: 35%;
65        box-shadow: -60px 5px 8px rgba(0, 0, 0, 0.4);
66        transform: skew(50deg);
67    }
68
69    .perspective:after {
70        display: none;
71    }
72
73    .raised:before {
74        width: auto;
75        right: 10px;
76        left: 10px;
77        bottom: 0;
78        box-shadow: 0 8px 10px rgba(0, 0, 0, 0.5);
79    }
80
81
82</style>
    </head> <body> 
    1<div class="drop-shadow round">
2    <h1>CSS drop-shadows without images</h1>
3    <p>No extra markup, fluid, all modern browsers</p>
4</div>
5
6<div class="drop-shadow curls">
7    <h1>Some curls</h1>
8    <p>No extra markup, all modern browsers</p>
9</div>
10
11<div class="drop-shadow perspective">
12    <h1>Some perspective</h1>
13    <p>No extra markup, all modern browsers</p>
14</div>
15
16<div class="drop-shadow raised">
17    <h1>Raised box</h1>
18    <p>No extra markup, all modern browsers</p>
19</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; } 
    1    .wallet {
2        width: 300px;
3        height: 300px;
4        margin: 50px auto;
5        position: relative;
6        transform-style: preserve-3d;
7        transition: all 10s;
8    }
9
10    .wallet::before, .wallet::after {
11        content: '';
12        position: absolute;
13        left: 0;
14        top: 0;
15        display: block;
16        width: 100%;
17        height: 100%;
18        background-image: url(./images/bg.png);
19        background-repeat: no-repeat;
20    }
21
22    .wallet::before {
23        background-position: right top;
24        transform: rotateY(180deg);
25    }
26
27    .wallet::after {
28        background-position: left top;
29        /*backface-visibility: hidden;*/
30        transform: translateZ(2px);
31    }
32
33    .wallet:hover {
34        transform: rotateY(180deg);
35    }
36</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; } 
    1    .box {
2        width: 200px;
3        height: 200px;
4        text-align: center;
5        line-height: 200px;
6        font-size: 24px;
7        margin: 100px auto;
8        position: relative;
9        transform: rotateY(30deg) rotateX(-30deg);
10        transform-style: preserve-3d;
11
12        animation: rotate 8s linear infinite;
13    }
14
15    .front, .back, .left, .right, .top, .bottom {
16        width: 200px;
17        height: 200px;
18        /*关键点是让几个面重合，这样坐标系可以统一*/
19        position: absolute;
20        top: 0;
21        left: 0;
22        /*给透明度是为了可以看到后面的面*/
23        /*opacity: 0.5;*/
24    }
25
26    .front {
27        background-color: pink;
28        transform: rotateY(0) translateZ(100px);
29    }
30
31    .back {
32        background-color: blue;
33        transform:  translateZ(-100px);
34    }
35
36    .left {
37        background-color: green;
38        transform:  rotateY(90deg) translateZ(-100px);
39    }
40
41    .right {
42        background-color: yellow;
43        transform: rotateY(90deg) translateZ(100px);
44    }
45
46    .top {
47        background-color: red;
48        transform: rotateX(90deg) translateZ(100px);
49    }
50
51    .bottom {
52        background-color: orange;
53        transform:  rotateX(90deg) translateZ(-100px);
54    }
55
56    @keyframes rotate {
57        from {
58            transform: rotateX(0) rotateY(360deg);
59        }
60
61        to {
62            transform: rotateX(360deg) rotateY(0);
63        }
64    }
65</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; } 
    1    .nav {
2        height: 40px;
3        margin-top: 50px;
4        text-align: center;
5        list-style: none;
6    }
7
8    li {
9        width: 120px;
10        height: 40px;
11        float: left;
12        position: relative;
13
14        transition: all 1s;
15
16        transform-style: preserve-3d;
17    }
18
19    li span {
20        height: 100%;
21        width: 100%;
22        line-height: 40px;
23        position: absolute;
24        left: 0;
25        top: 0;
26    }
27
28    li span:nth-child(1) {
29        transform: translateZ(20px);
30        background: green;
31    }
32
33    li span:nth-child(2) {
34        transform: rotateX(90deg) translateZ(20px);
35        background: yellow;
36    }
37
38    li:hover {
39        transform: rotateX(-90deg);
40    }
41
42</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. 其他

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时，报错：原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等，这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时，如何在新增行里自动增加id呢？能新增整数排序id吗？目前可以在新增行里自动增加id，但只能用uuid函数增加UUID编码，不能新增整数排序id。uuid函数说明：获取一个UUID，可以在填报表中用来创建数据ID语法：uuid()或uuid(sep)参数说明：sep布尔值，生成的uuid中是否包含分隔符''，缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

2020年前端实用代码段，为你的工作保驾护航

有空的时候，自己总结了几个代码段，在开发中也经常使用，谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )