【CSS3】化神篇

悠扬随风  金牌会员 | 2025-3-15 16:29:14 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 947|帖子 947|积分 2841

平面转换

作用：为元素添加动态效果，一般与过渡配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
平面转换又叫 2D 转换
属性名：transform
代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         div{
  9.             margin: 100px 0;
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: #e08b8b;
  13.             transition: all 1s;
  14.         }
  15.         div:hover{
  16.             transform: translate(700px) rotate(360deg) scale(2) skew(360deg);
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div></div>
  22. </body>
  23. </html>
复制代码
结果如下：

     屏幕录制 2025-03-13 153147
  
平移

属性名：transform: translate(X轴移动距离, Y轴移动距离);
属性值：


  • 像素单位数值
  • 百分比（参照盒子自身尺寸计算结果）
  • 正负均可
代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .father{
  9.             width: 500px;
  10.             height: 300px;
  11.             margin: 100px auto;
  12.             border: 1px solid black;
  13.         }
  14.         .son{
  15.             width: 200px;
  16.             height: 100px;
  17.             background-color: antiquewhite;
  18.             transition: all 0.5s;
  19.         }
  20.         .father:hover .son{
  21.             transform: translate(150%,200%);
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="father">
  27.         <div class="son"></div>
  28.     </div>
  29. </body>
  30. </html>
复制代码
结果如下：

     屏幕录制 2025-03-13 154956
  
注意事项：


  • translate() 只写一个值，表示沿着 X 轴移动
  • 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()
旋转

属性名：transform: rotate(旋转角度);
属性值：


  • 角度单位是 deg
  • 取值正负均可
  • 取正顺时针旋转，取负逆时针旋转
代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         img{
  9.             width: 200px;
  10.             transition: all 1s;
  11.         }
  12.         img:hover{
  13.             transform: rotate(360deg);
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <img src="./img/3.jpg" alt="">
  19. </body>
  20. </html>
复制代码
结果如下：

     屏幕录制 2025-03-13 162633
  
改变旋转原点

默认情况下，旋转远点是盒子中心点
属性名：transform-origin: 程度原点位置 垂直原点位置;
属性值：


  • 方位名称（left、top、right、bottom、center）
  • 像素单位数值
  • 百分比
代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         img{
  9.             width: 200px;
  10.             transition: all 1s;
  11.             transform-origin: right bottom;
  12.         }
  13.         img:hover{
  14.             transform: rotate(360deg);
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <img src="./img/3.jpg" alt="">
  20. </body>
  21. </html>
复制代码
结果如下：

     屏幕录制 2025-03-13 163957
  
多重转换

先平移再旋转
属性名：transform: translate() rotate();
代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         div{
  9.             width: 1200px;
  10.             height: 200px;
  11.             border: 1px solid black;
  12.         }
  13.         img{
  14.             width: 200px;
  15.             transition: all 4s;
  16.         }
  17.         div:hover img{
  18.             transform: translateX(500%) rotate(360deg);
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div>
  24.         <img src="./img/4.jpg" alt="">
  25.     </div>
  26. </body>
  27. </html>
复制代码
结果如下：

     屏幕录制 2025-03-13 165216
  
注意事项：


  • 不能先旋转再平移，因为旋转会改变坐标轴向
  • 复合属性不能分开写，否则反面的属性会覆盖前面的属性
缩放

属性名：


  • transform: scale(缩放倍数);
  • transform: scale(X轴缩放倍数, Y轴缩放倍数);
属性值：


  • 通常只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
  • 取值大于 1 表示放大，取值小于 1 表示缩小
代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         div{
  9.             width: 200px;
  10.             height: 143px;
  11.             margin: 100px auto;
  12.         }
  13.         img{
  14.             width: 200px;
  15.             transition: all 4s;
  16.         }
  17.         div:hover img{
  18.             transform: scale(2);
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div>
  24.         <img src="./img/4.png" alt="">
  25.     </div>
  26. </body>
  27. </html>
复制代码
结果如下：

     屏幕录制 2025-03-13 171831
  
倾斜

属性名：transform: skew();
属性值：


  • 角度度数 deg
  • 取正向左倾斜，取负向右倾斜
代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         div{
  9.             width: 200px;
  10.             height: 143px;
  11.             margin: 100px auto;
  12.         }
  13.         img{
  14.             width: 200px;
  15.             transition: all 2s;
  16.         }
  17.         div:hover img{
  18.             transform: skew(30deg)
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div>
  24.         <img src="./img/4.png" alt="">
  25.     </div>
  26. </body>
  27. </html>
复制代码
结果如下：

     屏幕录制 2025-03-13 174606
  
渐变

渐变是多个颜色渐渐变革的效果，一般用于设置盒子配景
线性渐变

属性名：
  1. background-image: linear-gradient(
  2.         渐变方向,
  3.         颜色1 终点位置,
  4.         颜色2 终点位置,
  5.         ......
  6. );
复制代码
属性值：


  • 渐变方向：（可选）

    • to 方位名词
    • 角度度数

  • 尽头位置：（可选）

    • 百分比

代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         div{
  9.             width: 200px;
  10.             height: 200px;
  11.             background-color: #a0adf7;
  12.             background-image: linear-gradient(
  13.                 45deg,
  14.                 red,
  15.                 #f8a4a4,
  16.                 #a0adf7
  17.             );
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div></div>
  23. </body>
  24. </html>
复制代码
结果如下：

径向渐变

作用：给按钮添加高光效果
属性名：
  1. background-image: radial-gradient(
  2.         半径 at 圆心位置,
  3.         颜色1 终点位置,
  4.         颜色2 终点位置,
  5.         ......
  6. );
复制代码
属性值：


  • 半径可以是两条，则为椭圆
  • 圆心位置取值：像素单位数值/百分比/方位名词
代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         div{
  9.             width: 100px;
  10.             height: 100px;
  11.             background-color: pink;
  12.             border-radius: 50%;
  13.             background-image: radial-gradient(
  14.                 50px at center center,
  15.                 red,
  16.                 pink
  17.             );
  18.         }
  19.         button{
  20.             width: 100px;
  21.             height: 40px;
  22.             background-color: purple;
  23.             border: 0;
  24.             border-radius: 5px;
  25.             color: white;
  26.             background-image: radial-gradient(
  27.                 30px at center center,
  28.                 rgba(255,255,255,0.2),
  29.                 transparent
  30.             );
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div></div>
  36.     <button>按钮</button>
  37. </body>
  38. </html>
复制代码
结果如下：

空间转换

空间：是从坐标轴角度定义的 X、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴与视线方向雷同
空间转换也叫 3D 转换
属性：transform
平移

属性名：


  • transform: translate3d(x,y,z);
  • transform: translateX();
  • transform: translateY();
  • transform: translateZ();
属性值：


  • 像素单位数值
  • 百分比（参照盒子自身尺寸计算结果）
代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .box{
  9.             width: 200px;
  10.             height: 200px;
  11.             margin: 100px auto;
  12.             background-color: pink;
  13.             transition: all 0.5s;
  14.         }
  15.         .box:hover{
  16.             transform: translate3d(100px,200px,300px);
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div class="box"></div>
  22. </body>
  23. </html>
复制代码
结果如下：

     屏幕录制 2025-03-13 194159
  
注意事项：默认无法观察 Z 轴平移效果
视距

作用：制定了观察者与 z=0 平面的距离，为元素添加透视效果
透视效果：近大远小、近实远虚
属性名：perspective: 视距;
属性值：


  • 添加给父级，取值范围 800-1200
代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .father{
  9.             perspective: 1000px;
  10.         }
  11.         .son{
  12.             width: 200px;
  13.             height: 200px;
  14.             margin: 100px auto;
  15.             background-color: pink;
  16.             transition: all 0.5;
  17.         }
  18.         .son:hover{
  19.             transform: translateZ(-300px);
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="father">
  25.         <div class="son"></div>
  26.     </div>
  27. </body>
  28. </html>
复制代码
结果如下：

     屏幕录制 2025-03-13 195356
  
旋转

属性名：
transform: rotateZ() 沿着 Z 轴旋转
transform: rotateX() 沿着 X 轴旋转
transform: rotateY() 沿着 Y 轴旋转
transform: rotate3d(x,y,z,角度度数); x，y，z 取值为 0-1 之间的数字
代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         div{
  9.             width: 300px;
  10.             margin: 100px auto;
  11.             perspective: 1000px;
  12.         }
  13.         img{
  14.             width: 200px;
  15.             transition: all 2s;
  16.         }
  17.         .d1 img:hover{
  18.             transform: rotateZ(360deg);
  19.         }
  20.         .d2 img:hover{
  21.             transform: rotateX(60deg);
  22.         }
  23.         .d3 img:hover{
  24.             transform: rotateY(60deg);
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="d1">
  30.         <img src="./img/3.jpg" alt="">
  31.     </div>
  32.     <div class="d2">
  33.         <img src="./img/1.png" alt="">
  34.     </div>
  35.     <div class="d3">
  36.         <img src="./img/2.png" alt="">
  37.     </div>
  38. </body>
  39. </html>
复制代码
结果如下：

     屏幕录制 2025-03-13 201450
  
左手法则
根据旋转方向确定取值正负
左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向

立体呈现

作用：设置元素的子元素是位于 3D 空间中照旧平面中
属性名：transform-style
属性值：


  • flat：子级处于平面中
  • preserve-3d：子级处于 3D 空间中
呈现立体图形步调：

  • 父元素添加 transform-style: preserve-3d;
  • 子级定位
  • 调整子盒子的位置（位移或旋转）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .cube{
  9.             position: relative;
  10.             width: 200px;
  11.             height: 200px;
  12.             margin: 100px auto;
  13.             /* background-color: pink; */
  14.             transition: all 1s;
  15.             transform-style: preserve-3d;
  16.         }
  17.         .cube div{
  18.             position: absolute;
  19.             left: 0;
  20.             top: 0;
  21.             width: 200px;
  22.             height: 200px;
  23.         }
  24.         .front{
  25.             background-color: orange;
  26.             transform: translateZ(100px);
  27.         }
  28.         .back{
  29.             background-color: green;
  30.             transform: translateZ(-100px);
  31.         }
  32.         .cube:hover{
  33.             transform: rotateY(90deg);
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38.     <div class="cube">
  39.         <div class="front">前面</div>
  40.         <div class="back">后面</div>
  41.     </div>
  42. </body>
  43. </html>
复制代码
结果如下：

     屏幕录制 2025-03-13 213518
  
缩放

属性名：


  • transform: scale3d(x,y,z);
  • transform: scaleX();
  • transform: scaleY();
  • transform: scaleZ();
代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .cube{
  9.             position: relative;
  10.             width: 200px;
  11.             height: 200px;
  12.             margin: 100px auto;
  13.             /* background-color: pink; */
  14.             transition: all 4s;
  15.             transform-style: preserve-3d;
  16.             transform: scale3d(1.5,2,3);
  17.         }
  18.         .cube div{
  19.             position: absolute;
  20.             left: 0;
  21.             top: 0;
  22.             width: 200px;
  23.             height: 200px;
  24.         }
  25.         .front{
  26.             background-color: orange;
  27.             transform: translateZ(100px);
  28.         }
  29.         .back{
  30.             background-color: green;
  31.             transform: translateZ(-100px);
  32.         }
  33.         .cube:hover{
  34.             transform: rotate3d(1,1,1,90deg);
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <div class="cube">
  40.         <div class="front">前面</div>
  41.         <div class="back">后面</div>
  42.     </div>
  43. </body>
  44. </html>
复制代码
结果如下：

     屏幕录制 2025-03-13 220517
  
动画

过渡：实现两个状态间的变革过程
动画：实现多个动态间的变革过程，动画过程可控（重复播放、终极画面、是否停息）
代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .d1{
  9.             width: 1000px;
  10.             height: 200px;
  11.             border: 1px solid black;
  12.         }
  13.         .d2{
  14.             width: 200px;
  15.             height: 200px;
  16.             background-color: pink;
  17.             animation: change 1s infinite alternate;
  18.         }
  19.         @keyframes change {
  20.             0% {
  21.                 transform: translate(0);
  22.             }
  23.             100% {
  24.                 transform: translate(800px);
  25.             }
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="d1">
  31.         <div class="d2"></div>
  32.     </div>
  33. </body>
  34. </html>
复制代码
结果如下：

     屏幕录制 2025-03-13 221903
  
使现步调

定义动画


  • 两个状态
  1. @keyframes 动画名称 {
  2.     from {}
  3.     to {}
  4. }
复制代码


  • 多个状态
  1. @keyframes 动画名称 {
  2.     0% {}
  3.     10% {}
  4.     ......
  5.     100% {}
  6. }
复制代码
使用动画
animation: 动画名称 动画耗费时长;
代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         div{
  9.             width: 200px;
  10.             height: 200px;
  11.             background-color: pink;
  12.             animation: change 10s;
  13.         }
  14.         @keyframes change {
  15.             0% {
  16.                 width: 200px;
  17.                 height: 200px;
  18.             }
  19.             25% {
  20.                 width: 400px;
  21.                 height: 200px;
  22.             }
  23.             75% {
  24.                 width: 400px;
  25.                 height: 400px;
  26.             }
  27.             100% {
  28.                 border-radius: 50%;
  29.             }
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div></div>
  35. </body>
  36. </html>
复制代码
结果如下：

     屏幕录制 2025-03-13 235715
  
animation 复合属性

animation: 动画名称 动画时长 速率曲线 耽误时间 重复次数 动画方向 执行完毕时状态;


  • 速率曲线：

    • linear：匀速活动
    • steps()：括号里填数字，表示分几步完成动画

  • 重复次数：

    • infinite：无限循环重复播放

  • 动画方向：

    • alternate：反向执行

  • 执行完毕时状态：

    • backwards：开始状态
    • forwards：结束状态

代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .box{
  9.             width: 200px;
  10.             height: 100px;
  11.             background-color: pink;
  12.             animation:  change 1s linear 1s 3 alternate forwards;
  13.         }
  14.         @keyframes change {
  15.             from {
  16.                 width: 200px;
  17.             }
  18.             to {
  19.                 width: 800px;
  20.             }
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="box"></div>
  26. </body>
  27. </html>
复制代码
结果如下：

     屏幕录制 2025-03-14 002430
  
注意事项：


  • 动画名称和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有两个时间值，第一个时间值表示动画时长，第二个时间值表示耽误时间
animation 属性拆分

属性作用取值animation-name动画名称animation-duration动画时长animation-delay耽误时间animation-fill-mode动画执行完毕时状态forwards：末了一帧状态
backwards：第一帧状态animation-timing-function速率曲线steps (数字)：逐帧动画animation-iteration-count重复次数infinite 为无限循环animation-direction动画执行方向alternate 为反向animation-play-state停息动画paused 为停息，通常配合:hover 使用 逐帧动画

核心原理：


  • steps() 逐帧动画
  • CSS 精灵图
精灵动画制作步调：

  • 预备表现区域：盒子尺寸与一张精灵小图尺寸雷同
  • 定义动画：移动配景图（移动距离 = 精灵图宽度）
  • 使用动画：strps(N)，N 与精灵小图个数雷同
代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         div{
  9.             width: 140px;
  10.             height: 140px;
  11.             border: 1px solid black;
  12.             background-image: url(./img/01.png);
  13.             animation: run 1s steps(12) infinite;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div></div>
  19. </body>
  20. </html>
复制代码
结果如下：

     屏幕录制 2025-03-14 144049
  
多组动画

语法格式：
  1. animation:
  2.         动画1,
  3.         动画2,
  4.         ......
  5. ;
复制代码
代码示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         div{
  9.             width: 140px;
  10.             height: 140px;
  11.             /* border: 1px solid black; */
  12.             background-image: url(./img/01.png);
  13.             animation:
  14.                 run 1s steps(12) infinite,
  15.                 move 5s linear forwards
  16.                 ;
  17.         }
  18.         @keyframes run {
  19.             from {
  20.                 background-position: 0 0;
  21.             }            
  22.             to {
  23.                 background-position: -1680px 0;
  24.             }
  25.         }
  26.         @keyframes move {
  27.             0% {
  28.                 transform: translate(0);
  29.             }
  30.             100% {
  31.                 transform: translate(800px);
  32.             }
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <div></div>
  38. </body>
  39. </html>
复制代码
结果如下：

     屏幕录制 2025-03-14 144234
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

悠扬随风

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表