• CSS3专题-[上篇]：过渡、2D转换、动画

    目录

    CSS3：前置特性

    CSS3：盒子模型

    CSS3：图片滤镜与模糊处理

    blur()：高斯模糊

    CSS3：计算盒子宽度calc()函数

    CSS3：过渡效果

    transition属性

    2D转换：transform属性

     translate()方法

    * translate应用：结合定位实现水平+垂直居中

    rotate()方法

    *rotate应用案例：结合transition过渡实现盒子过渡旋转

    *rotate应用案例：绘制倒三角

    转换中心点：transform-origin属性

    * rotate + transform-origin：旋转案例

    scale()方法

     使用多个2D转换

    CSS3：动画（animation）

    定义动画：@keyframes 规则

    *动画案例：运动的DOM元素

    动画序列

     *动画序列案例：转圈的DOM元素

    动画常见属性

    动画速度曲线

    * 速度曲线案例：进度条分步长加载

    CSS3：前置特性

    CSS3：盒子模型

            CSS3中可以通过borde-sizing来指定盒模型，属性值有2个：context-box、border-box，其中：

            ①context-box：盒子大小的计算方式为-width+padding+border（传统默认方式）；

            ②border-box：盒子大小的计算方式为-width。

            属性值为border-box的盒子，可以避免由于指定了padding和border属性值时，盒子会被撑大的问题。

    CSS3：图片滤镜与模糊处理

            CSS3提供了filter属性，可以实现DOM元素的模糊或者颜色偏移等视觉效果。filter属性值默认为none,即：没有任何特殊效果。

            除了下面介绍的高斯模糊效果，其它方法可参考：CSS3 filter(滤镜) 属性 | 菜鸟教程。

    blur()：高斯模糊

            blur()可以实现高斯模糊，并且，blur()函数的参数越大、模糊度越高。

             如下示例代码，实现图片的高斯模糊处理，

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>高斯模糊title>
    8.   <style>
    9.     img{
    10.       filter: blur(3px);
    11.     }
    12.   style>
    13. head>
    14. <body>
    15.   <img src="./images/hu.jpg" alt="">
    16. body>
    17. html>

    CSS3：计算盒子宽度calc()函数

            CSS3中提供了calc()函数，可以实现width、height等宽高属性的数学计算，括号内部可以实现基本的+、-、*、\运算。

            如下所示，定义Div盒子的宽度比视口宽度永远小80px。

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>calc-计算盒子宽高属性title>
    8.   <style>
    9.     .calc{
    10.       margin: 0 auto;
    11.       width: calc(100% - 80px);
    12.       height: 150px;
    13.       background-color: skyblue;
    14.     }
    15.   style>
    16. head>
    17. <body>
    18.   <div class="calc">div>
    19. body>
    20. html>

    CSS3：过渡效果

            CSS3的过渡效果，可以使我们在无需使用Flash和JavaScript的情况下，实现元素从一种状态转换为另一种状态时，提供一种视觉上的过渡效果。

            所谓过渡效果，也称过渡动画，是指：从一个状态，渐渐过渡到另一个状态。可以使我们的网页页面切换时，更加流畅，无缝衔接，极具体验感，同时又不会影响页面布局。

    transition属性

            transition属性用于设置DOM元素的过渡效果。而要实现过渡效果，必须指定两项内容：添加效果的CSS属性、效果的持续时间。该属性的4个属性值参数为，

    transition：过渡属性   花费时间   运动曲线    开始时间。

            上述4个参数的取值可参考：CSS3 transition 属性 | 菜鸟教程。

           如下代码，实现了在鼠标滑过div盒子时，其width宽度属性，从100px到400px变化的过渡效果，延迟0.0s执行，持续时间为0.5s。 

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>CSS3-过渡效果title>
    8.   <style>
    9.     .trans{
    10.       width: 100px;
    11.       height: 50px;
    12.       background-color: skyblue;
    13.       /* 使用过渡效果 */
    14.       transition: width 0.5s ease 0.0s;
    15.     }
    16.     .trans:hover{
    17.       width: 400px;
    18.     }
    19.   style>
    20. head>
    21. <body>
    22.   <div class="trans">div>
    23. body>
    24. html>

     

    2D转换：transform属性

            transform属性是CSS3中具有颠覆性的特征之一，可以实现元素的移动、缩放、旋转、拉伸等效果。

     translate()方法

            已知的可以实现盒子移动的方法有：定位（position）、外边距（margin），现在可以通过2D转换的translate()方法，根据指定的X轴和Y轴位置给定的参数，实现元素的位置移动。

            如下代码，可以使得div盒子，向X轴方向移动100px,向Y轴方向移动200px的效果，

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>2D转换title>
    8.   <style>
    9.     div{
    10.       width: 200px;
    11.       height: 200px;
    12.       background-color: skyblue;
    13.     }
    14.     .translate{
    15.       /* 向X轴方向移动100px,向Y轴方向移动200px */
    16.       transform: translate(100px,200px);
    17.       -ms-transform: translate(100px,200px);/*IE9*/
    18.       -webkit-transform: translate(100px,200px);/*safari,chrome */
    19.     }
    20.  
    21.   style>
    22. head>
    23. <body>
    24.   
    25.   <div class="translate">div>
    26. body>
    27. html>

             translate()方法最大的优点是：不会影响其它盒子的位置，即：translate中的百分比是相对于自身元素的translate：（50%，50%），只会修改自身的位置，而不会影响其它盒子的位置。一个注意点是：translate()属性对于行内标签无效。

    * translate应用：结合定位实现水平+垂直居中

            translate()方法的参数可以是百分比，此时，百分比的计算是相对于盒子的宽高而言的。

            translate()方法的一个实际应用场景是：结合position定位，实现DOM元素的水平和垂直居中效果。示例代码如下，

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>2D转换title>
    8.   <style>
    9.     div{
    10.       width: 200px;
    11.       height: 200px;
    12.       background-color: skyblue;
    13.     }
    14.     /* 盒子水平和垂直居中 */
    15.     .center{
    16.         position: absolute;
    17.         top: 50%;
    18.         left: 50%;
    19.         transform: translate(-50%,-50%);
    20.     }
    21.  
    22.   style>
    23. head>
    24. <body>
    25.   
    26.   <div class="center">div>
    27. body>
    28. html>

     

    rotate()方法

            rotate()方法可以实现DOM元素在二维平面中的旋转效果，给定一个正的度数，向顺时针旋转，单位为deg。

            如下代码，实现div元素的顺时针渲染45度。

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>CSS-旋转title>
    8.   <style>
    9.     div{
    10.       margin: 100px auto;
    11.       width: 200px;
    12.       height: 200px;
    13.       background-color: skyblue;
    14.     }
    15.     .rotate{
    16.       /* 顺时针旋转45度 */
    17.       transform: rotate(45deg);
    18.       -ms-transform: rotate(45deg);/*IE9*/
    19.       -webkit-transform: rotate(45deg);/*safari,chrome */
    20.     }
    21.  
    22.   style>
    23. head>
    24. <body>
    25.     <div class="rotate">div>
    26. body>
    27. html>

    *rotate应用案例：结合transition过渡实现盒子过渡旋转

            效果描述：当属性悬浮在div上面时，div盒子从原始的旋转45度，逐渐过渡到旋转360度，延时0.5s执行，持续时间为1.0s。

            示例代码如下，

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>CSS-旋转title>
    8.   <style>
    9.     div{
    10.       margin: 100px auto;
    11.       width: 200px;
    12.       height: 200px;
    13.       background-color: skyblue;
    14.     }
    15.     .rotate{
    16.       /* 顺时针旋转45度 */
    17.       transform: rotate(45deg);
    18.       -ms-transform: rotate(45deg);/*IE9*/
    19.       -webkit-transform: rotate(45deg);/*safari,chrome */
    20.       transition: transform 1.0s ease 0.5s;
    21.     }
    22.     .rotate:hover{
    23.       transform: rotate(360deg);
    24.     }
    25.  
    26.   style>
    27. head>
    28. <body>
    29.     <div class="rotate">div>
    30. body>
    31. html>

    *rotate应用案例：绘制倒三角

            rotate()属性，结合transition过渡属性，可以实现鼠标滑过时候的倒三角效果。

            示例代码如下，

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>旋转-倒三角效果title>
    8.   <style>
    9.     .trani{
    10.       position: relative;
    11.       width: 150px;
    12.       height: 35px;
    13.       border: 1px solid #ccc;
    14.     }
    15.     .trani::after{
    16.       content: "";
    17.       position: absolute;
    18.       right: 7px;
    19.       top: 7px;
    20.       display: inline-block;
    21.       width: 10px;
    22.       height: 10px;
    23.       border-right: 1px solid #ccc;
    24.       border-bottom: 1px solid #ccc;
    25.       transform: rotate(45deg);
    26.       transition: transform 0.5s ease 0.1s;
    27.     }
    28.     .trani:hover::after{
    29.       transform: rotate(225deg);
    30.     }
    31.   style>
    32. head>
    33. <body>
    34.   <div class="trani">div>  
    35. body>
    36. html>

    转换中心点：transform-origin属性

            可以通过transform-origin属性，设置元素2D转换的中心点。基本语法如下，

    transform-origin:x y;

            其中：x y默认是元素的中心点（50%，50%），但是我们可以通过transform-origin属性，设置自定义的中心点。其取值可以是像素值，或者是方位名词left、top、right、bottom、center。

    * rotate + transform-origin：旋转案例

            示例代码如下，

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>旋转案例title>
    8.   <style>
    9.     .box{
    10.       width: 150px;
    11.       height: 150px;
    12.       border: 1px solid #fff;
    13.       background-color: #ccc;
    14.       /* 溢出隐藏 */
    15.       overflow: hidden;
    16.     }
    17.     .inner{
    18.       width: 100%;
    19.       height: 100%;
    20.       /* 文字水平垂直居中 */
    21.       color: #fff;
    22.       font-weight: 700;
    23.       font-size: 24px;
    24.       text-align: center;
    25.       line-height: 150px;
    26.       background-color: skyblue;
    27.       /* 设置旋转中心点位左下角 */
    28.       transform-origin: left bottom;
    29.       transform: rotate(90deg);
    30.       /* 设置过渡效果 */
    31.       transition: transform 1.0s ease 0.1s;
    32.     }
    33.     .box:hover .inner{
    34.       transform: rotate(0deg);
    35.     }
    36.   style>
    37. head>
    38. <body>
    39.   <div class="box">
    40.     <div class="inner">Boxdiv>
    41.   div>
    42. body>
    43. html>

    scale()方法

            scale()方法可以实现元素的宽度width+高度height的缩放效果。相比基于transition过渡效果直接操作width、height宽高属性来说，可以实现等比缩放，并且不会影响其它盒子，并且可以设置缩放的中心点。

            基本语法规则为：

    transform: scale(x,y);

            如下示例代码，可以实现相对于元素的本身1.2倍的等比缩放。

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>scale缩放title>
    8.   <style>
    9.     .scale{
    10.       margin: 200px auto;
    11.       width: 200px;
    12.       height: 200px;
    13.       border: 1px solid #ccc;
    14.       background-color: skyblue;
    15.       /* 过渡效果 */
    16.       transition: transform 1.5s ease 0.1s;
    17.     }
    18.     .scale:hover{
    19.       /* 等比扩大1.2倍 */
    20.       transform: scale(1.2,1.2);
    21.     }
    22.  
    23.   style>
    24. head>
    25. <body>
    26.   <div class="scale">div>
    27. body>
    28. html>

     使用多个2D转换

            同时使用多个2D转换时，基本语法格式为：

    transform: translate() rotate() scale()...等;

            注意：transform属性值中的方法的顺序，会影响转换的效果。当同时有位置和其它属性的时候，记得应当将位移translate()方法放在最前面。

    CSS3：动画（animation）

            动画（animation）是CSS3中最具有颠覆性的特征之一，可通过设置多个节点，来精确控制一个或者一组动画，常用来实现复杂的动画效果。

            相比transition过渡属性，动画可以实现更多变化，更多控制，连续自动播放等效果。

            例如：如下的跑马灯效果，就可以通过CSS3动画实现。

    定义动画：@keyframes 规则

            想要定义一个动画，需要了解@keyframes规则。

            @keyframes规则是创建动画；而在@keyframes规则内部，可以指定一个样式和动画，实现从当前样式到目标样式的逐步过渡。

            @keyframes规则的基本格式如下，

    1. @keyframes 动画名称{
    2.     0%{
    3.         width:100px;
    4.     }
    5.     100%{
    6.         width:200px;
    7.     }
    8. }

             其中：0%对应起始时DOM元素的样式；100%对应结束时DOM元素的样式。

    *动画案例：运动的DOM元素

            如下代码，实现了这样的动画效果：当页面渲染时，div盒子就从页面的左边运动到右边。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>动画定义title>
    9.   <style>
    10.     .animation {
    11.       width: 150px;
    12.       height: 150px;
    13.       border: 1px solid #ccc;
    14.       background-color: skyblue;
    15.       /* 使用动画 */
    16.       animation-name: move;
    17.       /* 动画的持续时间 */
    18.       animation-duration: 3s;
    19.     }
    20.  
    21.     @keyframes move {
    22.       /* 开始时的动画 */
    23.       0% {
    24.         transform: translateX(0px);
    25.       }
    26.       /* 结束时的动画 */
    27.       100% {
    28.         transform: translateX(1600px);
    29.       }
    30.     }
    31.   style>
    32. head>
    33.  
    34. <body>
    35.   <div class="animation">div>
    36. body>
    37.  
    38. html>

             

    动画序列

            在CSS3中，只要@keyframes中规定了某项CSS样式，就能由当前样式逐渐改变到新样式的动画效果。

            一个完整的动画， 是由若干个动画序列组成的，其中：0%表示动画的开始，100%表示动画的结束，中间可以创建任意多个样式效果，这样的@keyframes规则，就定义了一个动画序列。     

              除了上面例子中，0%和100%的写法，也可以使用from和to的关键字，来定义起始、终止动画的样式，两者对于简单动画来讲是等价的。

     *动画序列案例：转圈的DOM元素

     

            动画效果如上，示例代码如下，

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>动画序列title>
    9.   <style>
    10.     .animation {
    11.       width: 150px;
    12.       height: 150px;
    13.       border: 1px solid #ccc;
    14.       background-color: skyblue;
    15.       /* 使用动画 */
    16.       animation-name: move;
    17.       /* 动画的持续时间 */
    18.       animation-duration: 5s;
    19.     }
    20.  
    21.     @keyframes move {
    22.       /* 开始时的动画 */
    23.       0% {
    24.         transform: translate(0px, 0px);
    25.       }
    26.       25% {
    27.         transform: translate(1700px, 0px);
    28.       }
    29.       50% {
    30.         transform: translate(1700px, 800px);
    31.       }
    32.       75% {
    33.         transform: translate(0px, 800px);
    34.       }
    35.       /* 结束时的动画-回到原点 */
    36.       100% {
    37.         transform: translate(0px, 0px);
    38.       }
    39.     }
    40.   style>
    41. head>
    42.  
    43. <body>
    44.   <div class="animation">div>
    45. body>
    46.  
    47. html>

    动画常见属性

            常见的动画属性如下，

             基于以上动画属性，例如：为上面的转圈的DOM元素添加animation-iteration-count:infinite，使其可以循环播放。也可以通过绑定按钮的点击事件，通过修改animation-play-state属性，来控制动画的运行或者停止状态。

    循环动画

     

    动画速度曲线

            在常见的动画属性中有一个较为有意思的属性：animation-timing-function，即：动画的速度曲线。该属性的默认值是：ease，但是也存在着其它的属性值。

             例如，我们可以通过设置steps属性值，来规定整个动画分几步执行。

    * 速度曲线案例：进度条分步长加载

     

            下面，我们看一个如上图所示的例子：进度条，分成100个步长来执行进度条加载；并且，当鼠标悬浮到进度条上面时，暂时停止进度条加载，示例代码如下，

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>动画-速度曲线title>
    8.   <style>
    9.     .box{
    10.       margin: 0 auto;
    11.       width: 200px;
    12.       height: 25px;
    13.       border: 1px solid #ccc;
    14.       background-color: #ccc;
    15.       border-radius: 5px;
    16.     }
    17.     /* 鼠标悬浮在box上面时,暂时停止动画 */
    18.     .box:hover::after{
    19.         animation-play-state: paused;
    20.     }
    21.     .box::after{
    22.       content: "";
    23.       display: inline-block;
    24.       width: 0%;
    25.       height: 100%;
    26.       background-color: skyblue;
    27.       border-radius: 5px;
    28.       /* 设置动画名称 */
    29.       animation-name: progress;
    30.       /* 设置动画持续时间 */
    31.       animation-duration: 10s;
    32.       /* 设置步长：进度条到100%,那么可设置步长为100 */
    33.       animation-timing-function: steps(100);
    34.       /* 设置循环动画 */
    35.       animation-iteration-count: infinite;
    36.     }
    37.     /* 进度条动画 */
    38.     @keyframes progress{
    39.         from{
    40.           width: 0%;
    41.         }
    42.         to{
    43.           width: 100%;
    44.         }
    45.     }
    46.   style>
    47. head>
    48. <body>
    49.   <div class="box">div>
    50. body>
    51. html>

    matrix

  • 相关阅读:
    NodeJS 5分钟 连接MySQL 增删改查
    深入多线程锁
    [附源码]计算机毕业设计勤工俭学管理小程序Springboot程序
    【YOLO系列】YOLOv9论文超详细解读（翻译 ＋学习笔记）
    并发之固定运行和交替运行方案
    Springboot毕设项目基于Java的比亚迪汽车大数据评分系统c34pk（java+VUE+Mybatis+Maven+Mysql）
    【每日一题（滑动窗口）】
    MySQL 主从复制
    iOS NSKeyedUnarchiver归档和读取
    H5组件Canvas画电子印章
  • 原文地址：https://blog.csdn.net/weixin_43524214/article/details/127623993