CSS3渐变、过渡、2D、3D和动画

最新推荐文章于 2024-03-20 15:35:46 发布

牛先森家的牛奶

最新推荐文章于 2024-03-20 15:35:46 发布

阅读量604

点赞数

分类专栏： HTML 文章标签： css3

本文链接：https://blog.csdn.net/weixin_42681295/article/details/106279589

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

渐变

线性渐变

就是“一个方向” 向 “另一个方向”渐变（或从一个颜色到另一个颜色平稳得过渡（颜色逐渐得变化））
语法：
background：liner-gradient（directon ，color-stop1，color-stop2，…）
说明：
directon：方向，默认值是to bottom 即从上向下的渐变；
color-stop：颜色的分布位置，默认均匀分布，例如有三个颜色，各个颜色为33.33%

解释方向：
to right 是到右，就是从左到右，同理 to left （从右到左）、to top （从下到上）、to
bottom（从上到下）

这里的渐变色，颜色的分布可以用百分比控制：
举例：
background:linear-gradient(to left,red 10%,blue 30%);
说明：到10%的位置都为红色，出来10%的位置开始向蓝色渐变，直到渐变到30%的位置为蓝色
注：后面一个颜色的百分比不能小于前面一个颜色的百分比

示例：

 <style>
    div{
      width: 500px;
      height: 300px;
      margin: 50px auto;
      background: linear-gradient(to right,red,blue);
    }
  </style>
</head>
<body>
  <div></div>

在这里插入图片描述

注意：这里需要了解各大游览器厂商的效果，也就是通常说的，加浏览器的前缀的效果

css3: 没有最终形成正式版。
每个浏览器商，为了能对css3属性形成一个更好得支持，浏览器形成自己得一套语法规范。
一些css3属性，如果想在浏览上形成支持，有时候需要添加浏览器前缀。

谷歌前缀： -webkit-    eg:   -webkit-属性:属性值
火狐前缀： -moz-       eg：  -moz-属性：属性值
IE前缀：  -ms-         eg：  -ms-属性：属性值
欧鹏前缀： -o-         eg：  -o-属性：属性值

不添加浏览器前缀   ->   标准模式
添加浏览器前缀     ->   兼容模式

            /* 线性渐变   ->  标准模式 */
            background:linear-gradient(to left,red,blue,yellow);
            /* 线性渐变   ->  兼容模式 */
            background:-webkit-linear-gradient(right,red,blue,yellow);
            background:-moz-linear-gradient(right,red,blue,yellow);
            background:-ms-linear-gradient(right,red,blue,yellow);
            background:-o-linear-gradient(right,red,blue,yellow);

注：如果 linear-gradient() 添加浏览器前缀，方向是不加to的！指的是从哪个方向开始

线性渐变兼容写法：

 <style>
    .box1{
      width: 500px;
      height: 300px;
      margin: 50px auto;
      background: linear-gradient(to right,red,blue);
    }
    .box2{
      width: 500px;
      height: 300px;
      margin: 50px auto;
      background: -webkit-linear-gradient(left,red,blue);
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

在这里插入图片描述
写法：

<style>
      *{
          margin:0;
          padding:0;
      }
      .box{
          width:500px;
          height:300px;
          margin:50px auto;
          /* 不添加浏览器前缀 ->  标准模式 */
          background:linear-gradient(to left,red 10%,blue 30%);
      }

      .box1{
          width:500px;
          height:300px;
          margin:50px auto;
          /* 添加浏览器前缀   ->  兼容模式 */
          background:-webkit-linear-gradient(0deg,red,blue);
      }
  </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>

在这里插入图片描述
里面还有角度渐变：

角度是指水平线和渐变线之间的角度，逆时针方向的计算，换句话说，0 deg将创建一个从下到上的渐变，90 deg 将创建一个从左到右的渐变。
但是其他的游览器厂商的标准不太一样，即0 deg从左到右，90 deg是从下到上，可以记个公式：
90-x=y（其中x为标准角度，y为非标准角度）

方向可以使用角度的变化： deg 代表度数
例如:
标准模式： background:linear-gradient(30deg,red,blue)
兼容模式： background:-webkit-linear-gradient(60deg,reb,blue)

径向渐变：
从一个点向四周渐变
语法：（必须添加浏览器前缀）
background: radial-gradient(center, shape, size, start-color, …, last-color);
说明：
radial-gradient（渐变原点的位置，形状[椭圆或正圆],大小，颜色值1，颜色值2）

  渐变原点的位置：
            50% 50%   =  center
            10px 30px   =  距离左侧10px  距离顶端30px
            right bottom
            left bottom

  形状：
            默认是椭圆：ellipse
            circle  正圆
            

   渐变的大小：
            注：径向渐变的大小，从圆心点到规定渐变位置（最近边、最近角、最远边、最远角）进行颜色的渐变走向

    默认值为最远角
                closest-side 最近边
                farthest-side 最远边
                closest-corner 最近角
                farthest-corner 最远角

写法：

  <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:500px;
            height:300px;
            margin:100px auto;
            background:-webkit-radial-gradient(center,yellow 10%,red,green);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

在这里插入图片描述

重复性渐变

分为重复性线性渐变、重复性径向渐变
例：

 重复性线性渐变：
        background:-webkit-repeating-linear-gradient(red 10%,yellow 20%)
        
    重复性径向渐变：
        background:-webkit-repeating-radial-gradient(red 10%,yellow 20%)

写法：

<style>
      *{
          margin:0;
          padding:0;
      }
      .box1{
        width:300px;
        height:300px;
        margin:20px auto;
        background:-webkit-repeating-linear-gradient(red,yellow 10%,green 20%)
      }
      .box2{
          width:300px;
          height:300px;
          margin:0 auto;
          background:-webkit-repeating-radial-gradient(red,yellow 10%,green 20%)
      }
  </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

在这里插入图片描述

过渡（较重要的属性）

transition：all/具体属性值、运动时间s/ms、延迟时间s/ms、动画类型
transition:属性值1 属性值2 属性值3 属性值4

属性值1（transition-property） : 过渡的属性[width,height,background…] 默认的是all
属性值2（transition-duration） : 过渡的时间单位为 s(秒) ms(毫秒)
属性值3 （transition-delay）: 过渡的延迟时间
属性值4（transition-timing-function） : 过渡动画的类型（加速、减速、匀速[linear]）(默认是先加速后减速)

注：
1： transition必须通过事件（鼠标滑过）触发
2：如果一个元素，单独设置每个属性的过渡。
transition:width 1s,height 2s,background 5s;

注意：放在初始状态里面

<style>
      *{
          margin:0;
          padding:0;
      }
      .box{
          width:700px;
          height:400px;
          margin:100px auto;
          background:orange;
      }
      h2{
          width:100px;
          height:100px;
          background:blue;
          /* 添加过渡属性*/
          transition:width 1s,height 1s 1s,background 1s 2s;
      }
      /* 鼠标滑过让h2宽度变化 */
      .box:hover h2{
          width:700px;
          height:300px;
          background:red;
      }
  </style>
</head>
<body>
    <div class="box">
        <h2></h2>
    </div>
</body>

~~这里动态不上图了，效果很明显的~~

2D

transform的属性（功能函数）包含：translate（）、scale（）、rotate（）、skew（）；
分别还有X、Y之分，比如：translateX、rotateY（）等；

1、移动 translate（）

将元素向指定的方向移动，类似于position的relative；
水平移动：
向右移动：translate（tx，0）、向左移动：translate（-tx，0）；
垂直移动：
向下移动：translate（0，tx）、向上移动：translate（0，-tx）；
对角移动：
translate（tx，tx）、translate（-tx，-tx）、translate（-tx，tx）、translate（tx，-tx）；
分别对应着右下、左上、左下、右上

建议：一般可以结合定位加位移组合修改元素

2、缩放 scale（）

让元素根据中心原点对对象进行缩放，默认值为1，因此0.01—0.99之间的值使元素缩小，大于1的值使元素放大；

只在X轴缩放 transform:scaleX()
只在Y轴缩放 transform:scaleY()

对于线条的设计，可以用盒子加边框的方式实现

3、旋转 rotate（）

旋转函数通过指定的角度参数对元素根据对象原点指定一个2D旋转，他主要是二维空间内进行操作，接收一个角度值，用来指定旋转的幅度，如果这个值为正值，元素相对原点中心顺时针旋转，相反，如果这个值为负值，元素相对原点中心逆时针旋转。（里面的值为deg）

绕着X轴旋转 transform:rotateX()
绕着Y轴旋转 transform:rotateY()

4、倾斜 skew（）

倾斜函数能够让元素倾斜显示，他可以将一个元素以其中心位置围绕着X轴和Y轴按照一定的角度倾斜
一个参数时：表示水平方向的倾斜角度
二个参数时：第一个值表示水平方向的倾斜，第二值表示垂直方向的倾斜

transform:skewX(deg)
transform:skewY(deg)

5、控制变形原点

改变变形原点的位置：
transform-origin:x y
x 横向的位置
y 纵向的位置

接收的值：
left center
right top
50% 50%
10px 20px

都可以用于前面4个属性

注意点：

旋转缩放对位移的影响：
1、当位移和缩放同时出现时，先写位移在写缩放
transform：translate（300px） scale（2）；

2、当位移和旋转同时出现时，先写位移在写旋转
transform：translate（300px） rotate（60deg）；

因为旋转，缩放和位移位置互换的话，会导致坐标系发生变化影响

补充一个属性：

使元素的背面不可见：background-visibility：hidden；
注意在图片中，不能直接使用这个属性，需要给img套一个盒子使用，给盒子使用这个属性；

案例：正反翻牌效果

    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:400px;
            height:400px;
            border:10px solid pink;
            margin:100px auto;
            position: relative;
        }


        .box div{
            width:400px;
            height:400px;
            position:absolute;
            top:0;
            /* 过渡 */
            transition:3s;
            /* 让背面不可见 */
            backface-visibility:hidden;
        }
        .box div img{
            width:100%;
            height:100%;
        }
        /* 让con2转动180deg */
        .con2{
            transform:rotateY(180deg);
        }
        /* 鼠标滑过让con2转到正面 */
        .box:hover .con2{
            transform:rotateY(360deg);
        }
        /* 鼠标滑过让con1转到后面 */
        .box:hover .con1{
            transform:rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con1"><img src="./images/5.jpg" alt=""></div>
        <div class="con2"><img src="./images/7.jpg" alt=""></div>
    </div>
</body>
</html>

~~这里动态不上图了，效果自试哦~~

3D

3D是在2D的基础上多一个坐标系就是Z轴；

先说说景深（近小远大）：在程序中实现的方法perspective 元素距离视线的距离（物体和眼睛的距离越小，近小远大的效果越明显；如果你的视线距离物体足够远时，基本就不会有近小远大的感觉）；

放在父元素中使用—perspective：1200px
放在子元素中使用—transform：perspective（1200px）
注意两个都设置的话会冲突，建议只设置父元素，看网上说这个值通常可以900~1200之间

属性：perspective-origin：；观察3D元素的位置角度
perspective-origin：center center；中心
perspective-origin：left top；左上角
perspective-origin：100% 100%；右下角
在这里插入图片描述

transform-style：

这个属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现，主要有两个属性值：
flat和preserve-3d;

例：
transform-style：preserve-3d；

3D下的位移、旋转、缩放：

3D位移：
transform:translate3d(x,y,z)
transform:translateZ(); 正值往前、负值往后

3D旋转：
transform:rotateZ(deg)
transform:rotate3d(x,y,z,度数)
参数x,y,z是一个矢量值 0 代表不旋转、1代表旋转 0.6
解释：x,y,z矢量值绘制一个点，绘制出得这个点，和变形原点形成一条线，这条线就是旋转得轴

3D缩放：
transform:scale3d(X,Y,Z)
transform:scaleZ();

案例：立方体：

<style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:400px;
            height:400px;
            position:fixed;
            left:0;right:0;
            top:0;bottom:0;
            margin:auto;
            /* 形成3D空间 */
            transform-style:preserve-3d;
            /* 为了方便观察。让3d舞台转动一个角度 */
            transform:rotateX(20deg) rotateY(30deg);
            /* 过渡 */
            transition:2s;
        }
        .box img{
            width:100%;
            height:100%;
        }
        .box div{
            width:400px;
            height:400px;
            text-align:center;
            line-height:400px;
            font-size:100px;
            font-weight:900;
            color:#fff;
            /* 定位把6个面叠加再一起 */
            position: absolute;
            /* 透明 */
            opacity:0.6;
            /* 背面不可见 */
            backface-visibility:hidden;
        }
        .con1{
            background:red;
            /* 沿着Z轴往前200px */
            transform:translateZ(200px);
        }
        .con2{
            background:blue;
            /* 沿着Z轴往后走200px   把正面冲外：绕着Y轴转180deg*/
            transform:translateZ(-200px) rotateY(180deg);
        }
        .con3{
            background:green;
            /* 沿着X轴位移200px  然后在绕着Y轴转动90deg */
            transform:translateX(200px) rotateY(90deg);
        }
        .con4{
            background:pink;
            /* 沿着X轴左位移200px   然后在绕着Y轴转动-90deg */
            transform:translateX(-200px) rotateY(-90deg);
        }

        .con5{
            background:purple;
            /* 下面得面：沿着Y轴往下位移200px  绕着X轴转动-90deg*/
            transform:translateY(200px) rotateX(-90deg);
        }
        .con6{
            background:gray;
            /* 上面得面：沿着Y轴往上位移-200px  绕着X轴转动90deg */
            transform:translateY(-200px) rotateX(90deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con1">1</div>
        <div class="con2">2</div>
        <div class="con3">3</div>
        <div class="con4">4</div>
        <div class="con5">5</div>
        <div class="con6">6</div>
    </div>
</body>

效果图：
在这里插入图片描述
使背面可见的效果：

动画

CSS3-动画：不用任何事件触发，能自动执行。

制作关键帧：
    语法：

    @ keyframes 关键帧名称{
        from{ 初始状态属性 }
        to{ 结束状态的效果 }
    }

    常用方法：
    @ keyframes 关键帧的名称{
        0%{
            //动画开始状态
        }
        20%{
            
        }
        40%{

        }
        60%{

        }
        100%{
            //动画结束状态
        }
    }

animation

复合属性（简写形式），检索动画或设置所应用的动画特效

animation:

animation-name：关键帧名称（自定义）
animation-duration：动画执行的时间（秒s 毫秒 ms）
animation-delay：动画的延迟时间（秒s 毫秒 ms）
animation-timing-function：动画的过渡类型：linear(匀速) step-start (跳到每一个关键帧) ease（平滑） ease-in（由慢到快）ease-out（由快到慢）ease-in-out（由慢到快到慢）—贝塞尔曲线
animation- iteration-count：动画的次数：直接写次数number 3 、5 无限循环 infinite
animation- direction：动画的方向：正常的运动（normal）、反向运动（reverse）、交替运动（alternate）、先反后正（alternate-reverse）
animation-play-state: 动画的状态：running 运动、paused 暂停
让动画停在最后一帧：forwards

animation：mymove 20s ease-in-out 2s infinite alternate
分别对应：动画名称、持续时间、动画频率、动画延迟时间、循环次数、动画运动方向

注意：
animation和transition的区别：
相同点：
都是随时间改变元素的属性值；
不同点：
transition需要触发一个事件（比如hover事件或click事件）才会随时间改变其css属性；而 animation在不需要触发事件的情况下可以显式的随着时间的变化来改变元素的css属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值；

案例：奔跑的小女孩：

 <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:180px;
            height:300px;
            margin:100px auto;
            background:#dd0 url(./images/bg.png) no-repeat;
            /* 调用关键帧 */
            animation:picRun 0.5s step-start infinite;
        }

        /* 制定关键帧 */
        @keyframes picRun {
            0%{
                background-position:0 0;
            }
            14.2%{
                background-position:-180px 0;
            }
            28.4%{
                background-position:-360px 0;
            }
            42.6%{
                background-position:-540px 0;
            }
            56.8%{
                background-position:-720px 0;
            }
            71%{
                background-position:-900px 0;
            }
            85.2%{
                background-position:-1080px 0;
            }
            100%{
                background-position:0px 0;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

效果图：
在这里插入图片描述
那CSS3的渐变、过渡、2D、3D和动画先到这里吧！~~你知道的越多，你不知道的越多！~~

牛先森家的牛奶

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3渐变、过渡、2D、3D和动画

渐变线性渐变就是“一个方向” 向 “另一个方向”渐变（或从一个颜色到另一个颜色平稳得过渡（颜色逐渐得变化））语法：background：liner-gradient（directon ，color-stop1，color-stop2，…）说明：directon：方向，默认值是to bottom 即从上向下的渐变；color-stop：颜色的分布位置，默认均匀分布，例如有三个颜色，各个颜色为33.33%解释方向：to right 是到右，就是从左到右，同理 to left （从右到左）
复制链接

扫一扫