2d、3d转换，适配问题

最新推荐文章于 2024-07-10 20:45:00 发布
最新推荐文章于 2024-07-10 20:45:00 发布
阅读量921 收藏 11
点赞数 16
文章标签： 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80078038/article/details/137404550
版权

前端讨论班--第三周培训

一、平面转换（transform）

1.基本介绍
1）作用：

伪元素添加动态效果，一般与过渡配合使用

2）概念：

改变盒子在平面内的形态（位移、旋转、缩放、倾斜）

平面转换又叫2D转换

2.平面转换--平移
1）属性：

transform:translate(x轴移动距离，y轴移动距离)

2）取值：

  • 像素单位数值

  • 百分比

  • 正负均可

3）技巧：

1.translate()只写一个值，表示沿着x轴移动

2.单独设置X或Y轴移动距离：translateX()或translateY()

4）效果图

image.png

image.png

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father{
      width: 500px;
      height: 300px;
      margin: 100px auto;
      border: 1px solid #000;
    }
    .son{
      width: 200px;
      height: 100px;
      background-color: pink;
      transition: all 0.5s;
    }
    .father:hover .son{
      transform: translate(200px,200px);
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">
​
    </div>
  </div>
</body>
</html>

image.png

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father{
      width: 500px;
      height: 300px;
      margin: 100px auto;
      border: 1px solid #000;
    }
    .son{
      width: 200px;
      height: 100px;
      background-color: pink;
      transition: all 0.5s;
    }
    .father:hover .son{
      transform: translate(50%,100%);
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">
​
    </div>
  </div>
</body>
</html>

注：使用百分比的话，是相对于自身的宽和高

image-20240402183659971

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father{
      width: 500px;
      height: 300px;
      margin: 100px auto;
      border: 1px solid #000;
    }
    .son{
      width: 200px;
      height: 100px;
      background-color: pink;
      transition: all 0.5s;
    }
    .father:hover .son{
      transform: translate(-50%,100%);
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">
​
    </div>
  </div>
</body>
</html>

image-20240402183930940

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father{
      width: 500px;
      height: 300px;
      margin: 100px auto;
      border: 1px solid #000;
    }
    .son{
      width: 200px;
      height: 100px;
      background-color: pink;
      transition: all 0.5s;
    }
    .father:hover .son{
      transform: translate(100px);
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">
​
    </div>
  </div>
</body>
</html>

注：只写一个值，只在水平方向移动（由于translatex(100px)与上面这个效果相同，便不再书写）

image-20240402184033902

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father{
      width: 500px;
      height: 300px;
      margin: 100px auto;
      border: 1px solid #000;
    }
    .son{
      width: 200px;
      height: 100px;
      background-color: pink;
      transition: all 0.5s;
    }
    .father:hover .son{
      transform: translatey(100px);
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">
​
    </div>
  </div>
</body>
</html>
3.平移实现居中效果

image-20240402184604420

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   .box{
    width: 200px;
    height: 100px;
    background-color: pink;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
   }
​
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

4.平面转换--旋转
1.属性：

transform:rotate(旋转角度) 单位：deg

2.技巧：

  • 取值正负均可

  • 取值为正、顺时针旋转

  • 取值为负、逆时针旋转

3.效果图

image-20240402231603159

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img{
      width: 200px;
      transition: all 2s;
    }
    img:hover{
      transform: rotate(360deg);
    }
  </style>
</head>
<body>
  <img src="./images/1.jpg" alt="">
</body>
</html>

注：旋转角度为正，则顺时针旋转，旋转角度为负，则逆时针旋转

5.平面转换--改变转换原点
1.默认情况下，转换原点是盒子中心
2.属性：

transform-origin:水平原点位置 垂直原点位置；

3.取值

  • 方位名词（left、top、right、bottom、center）

  • 像素单位数值

  • 百分比

4.效果图

image-20240402232703713

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img{
      width: 200px;
      transition: all 2s;
    }
    img:hover{
      transform: rotate(360deg);
      transform-origin:left top ;
    }
  </style>
</head>
<body>
  <img src="./images/1.jpg" alt="">
</body>
</html>
6.平面转化-多重转换
1.多重转换技巧：

先平移再旋转

transform:translate() rorate();

注：

1）旋转会改变坐标轴向

2）以第一种转化形态的坐标轴为准

3）想要边走边转动，必须这样书写，分开写样式会层叠，不能达到目标

2.效果图

image-20240402233510079

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
       width: 800px;
       height: 200px;
       border: 1px solid black;
    }
    img{
      width: 200px;
      transition: all 2s;
    }
   .box:hover img{
    transform: translate(600px) rotate(360deg);
   }
  </style>
</head>
<body>
  <div class="box">
    <img src="./images/1.jpg" alt="">
  </div>
</body>
</html>

7.平面转换--缩放
1.属性：

transform:scale(缩放倍数)；

transform:scale(x轴缩放倍数,y轴缩放倍数)；

2.技巧：

  • 通常只为scale()设置一个值，表示x轴和y轴等比缩放

  • 取值大于1表示放大，取值小于1表示缩小

3.效果图

取值小于1

image-20240403083314410

![](https://vichywhite.oss-cn-beijing.aliyuncs.com/chenweiqi2023012226/202404030833553.png)

取值大于1

image-20240403083402006

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
       width: 800px;
       height: 200px;
       margin: 100px auto;
       
    }
    img{
      width: 200px;
      transition: all 2s;
    }
   .box:hover img{
    /* width: 500px; */
    /* height: 400px; */
    transform:scale(2);
    
   }
  </style>
</head>
<body>
  <div class="box">
    <img src="./images/1.jpg" alt="">
  </div>
</body>
</html>

注：如果取值为1，则大小不变化。

8.平面变换--倾斜
1.属性：

transform:skew();

2.取值:

  • 角度度数deg

3.效果图

image-20240403083810504

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
       width: 800px;
       height: 200px;
       margin: 100px auto;
       
    }
    img{
      width: 200px;
      transition: all 2s;
    }
   .box:hover img{
    /* width: 500px; */
    /* height: 400px; */
    transform:skew(30deg);
    
   }
  </style>
</head>
<body>
  <div class="box">
    <img src="./images/1.jpg" alt="">
  </div>
</body>
</html>

image-20240403083843239

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
       width: 800px;
       height: 200px;
       margin: 100px auto;
       
    }
    img{
      width: 200px;
      transition: all 2s;
    }
   .box:hover img{
    /* width: 500px; */
    /* height: 400px; */
    transform:skew(-30deg);
    
   }
  </style>
</head>
<body>
  <div class="box">
    <img src="./images/1.jpg" alt="">
  </div>
</body>
</html>
9.平面转换--渐变
1.作用

渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景

2.分类

  • 线性渐变

  • 径向渐变

3.线性渐变
1）属性

background-image:linear-gradient(渐变方向，颜色1 终点位置，颜色2 终点位置，.......)

注：位置可以省略

2）取值

  • 渐变方向：可选（to方位名词，角度度数）

  • 终点位置：可选（百分比）

3）效果图

image-20240403085233202

image-20240403085310262

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    
    
    div{
      width: 200px;
      height: 200px;
      background-color: green;
      background-image: linear-gradient(
        to right,red,green);

    }
    
  
   
  </style>
</head>
<body>
  
  <div></div>
  
</body>
</html>

image-20240403085340347

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    
    
    div{
      width: 200px;
      height: 200px;
      background-color: green;
      background-image: linear-gradient(
        45deg,red,green);
​
    }
    
  
   
  </style>
</head>
<body>
  
  <div></div>
  
</body>
</html>

渐变背景

image-20240403090242230

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 300px;
      height: 212px;
     position: relative;
    }
  img{
    width: 300px; 
  }
   .box .title{
    position: absolute;
    left: 15;
    bottom: 20px;
    z-index: 2;
    width: 260px;
    color: white;
    font-size: 20px;
    font-weight: 700;
   }
   .mask{
    width:300px;
    height: 230px;
    background-image: linear-gradient(transparent,rgba(0,0,0,0.5));
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all .5s;
  }
  .box:hover .mask{
    opacity: 1;
  }
  </style>
</head>
<body>
  
  <div class="box">
    <img src="./images/1.jpg" alt="">
    <div class="title">
        内容内容内容
    </div>
    <div class="mask"></div>
  </div>
  
</body>
</html>

4.径向渐变
1）作用：

给按钮添加高光效果

2）属性：

background-image:radial-gradient(

半径 at 圆心位置，颜色1 终点位置，颜色2 终点位置，......);

3）取值：

  • 半径可以是2条，则为椭圆

  • 圆心位置取值：像素单位数值/百分比/方位名词

4）效果图

image-20240403091245270

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: pink;
      border-radius: 50%;
      background-image: radial-gradient(50px at center
      center,red,pink);
    }
    button{
      width: 100px;
      height: 40px;
      background-color: green;
      border: 0;
      border-radius: 5px;
      color: #fff;
    }
  </style>
</head>
<body>
  <div></div>
  <button></button>
</body>
</html>

image-20240403091335458

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: pink;
      border-radius: 50%;
      background-image: radial-gradient(50px 20px at center
      center,red,pink);
    }
    button{
      width: 100px;
      height: 40px;
      background-color: green;
      border: 0;
      border-radius: 5px;
      color: #fff;
    }
  </style>
</head>
<body>
  <div></div>
  <button></button>
</body>
</html>

镜像渐变

image-20240403091541282

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: pink;
      border-radius: 50%;
      background-image: radial-gradient(50px 20px at center
      center,red,pink);
    }
    button{
      width: 100px;
      height: 40px;
      background-color: green;
      border: 0;
      border-radius: 5px;
      color: #fff;
      background-image: radial-gradient(
        30px at 30px 20px ,rgba(255,255,255,0.2),
        transparent
      );
    }
  </style>
</head>
<body>
  <div></div>
  <button>按钮</button>
</body>
</html>

at后面两个像素数值，先x轴后y轴

二、空间转换

1.空间转换--平移与视距
1.属性：

transform：translate3d(x,y,z)

transform：translateX()

transform：translateY()

transform：translateZ()

2.取值：

  • 像素单位数值

  • 百分比（参照盒子自身尺寸计算结果）

3.效果图

image-20240403093116272

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }
    .box:hover{
      transform: translate3d(100px,200px,300px);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

注：但是z轴效果看不见

4.视距（perspective）
1.作用：

制定了观察者与z=0平面的距离，为元素添加透视效果

透视效果：近大远小，近实远虚

2.属性：

添加给直接父级，取值范围800-1200

perspective:视距；

3.效果图

image-20240404232352593

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father{
      perspective: 1000px;
    }
    .son{
      width: 200px;
      height: 200px;
      margin: 100px auto;
      transition: all 0.5s;
      background-color: pink;
    }
    .son:hover{
      transform: translateZ(-300px);
    }
  </style>
</head>
<body>
    <div class="father">
      <div class="son"></div>
    </div>
</body>
</html>

image-20240404232704169

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father{
      perspective: 100px;
    }
    .son{
      width: 200px;
      height: 200px;
      margin: 100px auto;
      transition: all 0.5s;
      background-color: pink;
    }
    .son:hover{
      transform: translate3d(0,0,-100px);
    }
  </style>
</head>
<body>
    <div class="father">
      <div class="son"></div>
    </div>
</body>
</html>

image-20240404232728474

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father{
      perspective: 2000px;
    }
    .son{
      width: 200px;
      height: 200px;
      margin: 100px auto;
      transition: all 0.5s;
      background-color: pink;
    }
    .son:hover{
      transform: translate3d(0,0,-100px);
    }
  </style>
</head>
<body>
    <div class="father">
      <div class="son"></div>
    </div>
</body>
</html>

注：perspective的值过大过小都不易观察

2.空间转换--旋转
1.属性:

transform-rotateZ(值);

transform-rotateX(值);

transform-rotateY(值);

2.效果图

image-20240404234146628

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 300px;
      margin: 100px auto;
    }
    img{
      width: 300px;
      transition: all 2s;
​
    }
    .box{
      perspective: 1000px;
    }
    .box img:hover{
      transform: rotateZ(60deg);
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./images/1.jpg" alt="">
  </div>
</body>
</html>

image-20240404234032533

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 300px;
      margin: 100px auto;
    }
    img{
      width: 300px;
      transition: all 2s;

    }
    .box{
      perspective: 1000px;
    }
    .box img:hover{
      transform: rotateX(60deg);
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./images/1.jpg" alt="">
  </div>
</body>
</html>

image-20240404234103004

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 300px;
      margin: 100px auto;
    }
    img{
      width: 300px;
      transition: all 2s;
​
    }
    .box{
      perspective: 1000px;
    }
    .box img:hover{
      transform: rotateY(60deg);
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./images/1.jpg" alt="">
  </div>
</body>
</html>
3.空间-旋转
1）左手法则-根据旋转方向确定取值正负

左手握住旋转轴，木质指向正值方向，其他四个手指弯曲方向为旋转正值方向

2）拓展

  • rotate(x,y,z,角度度数)：涌来设置自定义旋转轴的位置及旋转的角度

  • x,y,z取值为0-1之间的数字

3.立体呈现
1.作用：

设置元素的子元素是位于3D空间中还是平面中

2.属性名:

transform-style

3.属性值:

flat:自己处于平面中

preserve-3d：子级处于3D空间中

4.呈现立体图形步骤

1）（直接）父元素添加transform-style:preserve-3d;

2）子级定位

3）调整盒子的位置（位移或旋转）

5.效果图

image-20240405094756698

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .cube{
      width: 200px;
      height: 200px;
      margin: 100px auto;
      transition: all 2s;
      transform-style: preserve-3d;
      position: relative;
    }
    .cube div{
      width: 200px;
      height: 200px;
      position: absolute;
      left: 0;
      top: 0;

    }
    .front{
      background-color: orange;
      transform: translateZ(100px);
    }
    .back{
      background-color: green;
      transform: translateZ(-100px);
    }
    .cube:hover{
      transform: rotateY(90deg);
    }
  </style>
</head>
<body>
  <div class="cube">
    <div class="front">前面</div>
    <div class="back">后面</div>
  </div>
</body>
</html>

image-20240405095745599

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img{
      width: 200px;
      height: 200px;
    }
    .bigbox{
      height: 200px;
      width: 200px;
      position: relative;
      margin: 100px auto;
      transform-style: preserve-3d;
      transition: all 2s;
    }
    .bigbox div{
      width: 200px;
      height: 200px;
      position: absolute;
      left: 0;
      top:0;
    }
    .smallbox1{
      transform: translateZ(100px);
    }
    .smallbox2{
      transform: translateZ(-100px);
    }
    .bigbox:hover{
      transform: rotateY(90deg);
    }
  </style>
</head>
<body>
  <div class="bigbox">
    <div class="smallbox1"><img src="./images-chifeng/1.jpg" alt=""></div>
    <div class="smallbox2"><img src="./images-chifeng/2.jpg" alt=""></div>
  </div>
</body>
</html>

image-20240405101041265

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img{
      width: 200px;
      height: 200px;
    }
    .bigbox{
      height: 200px;
      width: 200px;
      position: relative;
      margin: 100px auto;
      transform-style: preserve-3d;
      transition: all 2s;
    }
    .bigbox div{
      width: 200px;
      height: 200px;
      position: absolute;
      left: 0;
      top:0;
    }
    .smallbox1{
      transform: translateZ(100px);
    }
    .smallbox2{
      transform: translateZ(-100px);
    }
    .smallbox3{
      transform: translateX(-100px) rotateY(-90deg);
      
    }
    .smallbox4{
      transform: translateZ(100px);
​
      transform: rotateY(90deg);
    }
    .bigbox:hover{
      transform: rotateY(60deg);
    }
  </style>
</head>
<body>
  <div class="bigbox">
    <div class="smallbox1"><img src="./images-chifeng/1.jpg" alt=""></div>
    <div class="smallbox2"><img src="./images-chifeng/2.jpg" alt=""></div>
    <div class="smallbox3"><img src="./images-chifeng/3.jpg" alt=""></div>
   
  </div>
</body>
</html>
4.空间转换--缩放
1.属性:

transform:scale3d(x,y,z);

transform:scaleX();

transform:scaleY();

transform:scaleZ();

2.效果图

image-20240405102008152

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img{
      width: 200px;
      height: 200px;
    }
    .bigbox{
      height: 200px;
      width: 200px;
      position: relative;
      margin: 100px auto;
      transform-style: preserve-3d;
      transition: all 2s;
      transform:scale(0.5);
    }
    .bigbox div{
      width: 200px;
      height: 200px;
      position: absolute;
      left: 0;
      top:0;
      
    }
    .smallbox1{
      transform: translateZ(100px);
    }
    .smallbox2{
      transform: translateZ(-100px);
      
    }
    .smallbox3{
      transform: translateX(-100px) rotateY(-90deg);
      
    }
    .smallbox4{
      transform: translateX(100px) rotateY(90deg);
    }
    .bigbox:hover{
      transform: rotateY(90deg);
    }
  </style>
</head>
<body>
  <div class="bigbox">
    <div class="smallbox1"><img src="./images-chifeng/1.jpg" alt=""></div>
    <div class="smallbox2"><img src="./images-chifeng/2.jpg" alt=""></div>
    <div class="smallbox3"><img src="./images-chifeng/3.jpg" alt=""></div>
    <div class="smallbox4"><img src="./images-chifeng/4.jpg" alt=""></div>
  </div>
</body>
</html>
5.动画
1.对比

过度：实现两个状态间的变化过程

动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

2.实现步骤
1）定义动画

方法一：

@keyframes 动画名称{

from {}

to{}

}

方法二：

@keyframes 动画名称{

0%{}

10%{}

......

100%{}

}

2)使用动画

animation:动画名称 动画花费时长;

3.效果图

image-20240405103126787

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: pink;
      animation: change 1s;
    }
    @keyframes change  {
      from{
        width: 200px;
      }
      to{width: 800px;}
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

image-20240405103355450

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: pink;
      animation: change 1s;
    }
    @keyframes change {
      0% {
        width: 200px;
        height: 100px;
    }
      20%{
        width: 300px;
        height: 300px;
      }
      100%{
        width: 800;
        height: 500px;
      } 
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

注：百分比可以完成多个状态，百分比表示的意思是动画时长的百分比

4.动画-animation

animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态

提示：

  • 动画名称和动画时长必须复制

  • 取值不分先后顺序

  • 如果有两个时间值，第一个时间表示动画时长，第二个表示延迟时间

速度曲线：linear 匀速 steps() 分步进行

重复播放：写一个数字表示重复几次，如果想一直播放，则需要写infinite

动画方向：alternate是反向

执行完毕：forwards是停在结束状态

拆分属性

image-20240405114119102

6.逐帧动画
1.属性:

animation-timing-function

2.作用：

速度曲线

3.取值：

steps(数字):逐帧动画

image-20240405120411149

image-20240405120428849

7.多组动画

animation:

动画1,

动画2,

动画n;

8.走马灯

image-20240405115900850

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      list-style: none;
      margin: 0;
      padding: 0;
    }
    img{
      display: block;
      width: 200px;
      height: 140px;
    }
    .box{
      width: 600px;
      height: 110px;
      border: 5px solid #000;
      margin: 100px auto;
      overflow: hidden;
    }
    .box ul{
      display: flex;
      animation: move 5s infinite linear;
    }
    @keyframes move {
      0%{
        transform: translate(0);
      }
      100%{
        transform: translate(-1000px);
      }
    }
    .box:hover ul{
      animation-play-state: paused;
    }
  </style>
</head>
<body>
  <div class="box">
    <ul>
      <li><img src="./images-chifeng/1.jpg" alt=""></li>
      <li><img src="./images-chifeng/1.jpg" alt=""></li>
      <li><img src="./images-chifeng/1.jpg" alt=""></li>
      <li><img src="./images-chifeng/1.jpg" alt=""></li>
      <li><img src="./images-chifeng/1.jpg" alt=""></li>
      <!-- 填补空白 -->
      <li><img src="./images-chifeng/1.jpg" alt=""></li>
      <li><img src="./images-chifeng/1.jpg" alt=""></li>
      <li><img src="./images-chifeng/1.jpg" alt=""></li>
    </ul>
  </div>
</body>
</html>

三、rem

1.rem简介

  • rem单位，是相对单位

  • rem单位是相对于HTML标签的字号计算结果

  • 1rem=1HTML字号大小（需要先给html加字号）

image-20240405122053339

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html{
      font-size: 30px;
    }
    .box{
      width: 5rem;
      height: 3rem;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

2.rem适配

媒体查询

  • 媒体查询能够检查视口的宽度，执行差异化的CSS样式

  • 当某个条件成立，执行对应的CSS

属性

@media(媒体特性){

选择器{

CSS属性

}

}

image-20240405154928185

image-20240405155320422

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media (width:375px){
      body{
        background-color: green;
      }
    }
  </style>
</head>
<body>
  
</body>
</html>
3.rem-flexible.js
1.标签

`<body>

<script src="./js/flexible.js"></script>

</body>`

image-20240405160032697

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 5rem;
      height: 3rem;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script src="./js/flexible.js"></script>
</body>
</html>

4.rem-移动适配

rem单位尺寸=px单位数值/基准根字号

四、less

1.简介

  • less是一个CSS预处理器，Less文件后缀是.less。扩充了CSS语言，使CSS具备一定的逻辑性、计算能力

  • 注意：浏览器不识别less代码，目前阶段网页要引入对应的CSS文件

2.less-注释
1.单行注释

语法：//注释内容

快捷键：ctrl+/

2.块注释

语法：/注释内容/

快捷键：Shift+Alt+A

3.less-运算

运算：

加减乘除直接写计算表达式

除法需要添加小括号或。

image-20240405161341883

`.box{

width: 100 + 20px;

width: 300 - 15px;

height: (100 / 5)px;

height: 20 * 5px;

}`

注：如果有多个单位，则以第一个出现的单位为准

4.less-嵌套

.父级选择器{

.子级选择器{

}

}

image-20240405161930291

`.father{

color: red;

.son{

width: 200px;

a{

color: pink;

}

}

}`

image-20240405162103640

`.father{

color: red;

.son{

width: 200px;

a{

color: pink;

&:hover{

color: red;

}

}

}

}`

用&不会生成后代选择器

5.less-变量

概念：容器，存储数据

作用：存储数据，方便使用和修改

语法：

定义变量：@变量名:数据;

使用变量：CSS属性:@变量名;

image-20240405162427744

//定义变量
@myColor:pink;
​
​
​
//使用变量
div{
    color: @myColor;
}

image-20240405162457579

6.less-导入

作用：导入less公共样式文件

语法：导入:@import "文件路径";

提示：如果是less文件可以省略后缀

@import './base.less'

image-20240405163003296

7.less-导出

写法 ：在less文件的第一行添加//out:存储URL

提示：文件夹名称后面添加/

//out: ./index.css

image-20240405163756902

image-20240405163852482

8.less-禁止导出

写法：在less文件第一行添加：//out:false

image-20240405164032913

左侧并没有文件生成

五、适配方案

  • 相对单位

  • 相对视口的尺寸计算结果

  • vw:viewport width

  • 1vw = 1 / 100视口宽度

  • vh:viewport height

  • 1vh = 1 / 100视口高度

vw

image-20240405165347698

image-20240405165407372

image-20240405165419511

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 50vw;
      height: 30vw;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  
</body>
</html>

vh

image-20240405165646288

image-20240405165654741

image-20240405165703301

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 50vh;
      height: 30vh;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  
</body>
</html>

旧梦想吃汤圆
关注
  • 16
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局
qq_48687155的博客
07-28 343
移动Web网页开发：2D&3D转换与动画、移动端布局、响应式布局
通过2D图片生成3D模型的常用软件比较
weixin_43156294的博客
06-01 924
在二维向三维转换的技术领域，一系列软件应用凭借其先进的算法和直观的用户界面，为从平面图像到立体模型的转换提供了多样化解决方案。以下是对几款主流软件的深入比较，旨在揭示它们的技术特色、优势及应用场景，以期为不同需求的用户提供专业指导。
CSS2D3D转换及移动端开发
remember_slll的博客
03-05 249
2D3D移动旋转 移动端开发移动端布局黑马课程
cocos2dx的屏幕适配
lemon
02-17 4187
1.版本 cocos3.9 2.屏幕适配 cocos有5种屏幕适配策略。 EXACT_ALL:非等比缩放，使画面充满整个屏幕，但会变形。 NO_BORDER:等比缩放，也会使画面充满整个屏幕，不会变形，但SS/DS比较大的一边刚好充满整个屏幕，而另一边就会超出屏幕，被截断。 SHOW_ALL:等比缩放，会让整个画面都显示出来，不会变形，不会截断，SS/DS比较小的一边刚好充满整个屏幕，而另一边往往会有黑边。 FIXED_HEIGHT:等比缩放，不会变形，高刚好充满整个屏幕，而宽可能有黑边也可能被截断。 FI
使用Cocos进行2D和3D混合开发
奎特尔星球
03-31 2393
这是异名上手cocos后，正式开发上线的第一款游戏，用的引擎版本是v.2.2.0，游戏一共有6个场景，其中一个3D场景，4个2D场景，在这里做简单的一个复盘和回顾，因为需要我们平台的账...
DETR3D笔记
qq_42250207的博客
07-20 947
2、对于尺寸的建模不是特别好，比如在gt中有个车是很长的，在预测结果中车相对而言是很短的，产生这样尺寸差异的原因是什么呢？DETR3D是可以利用重复特征去预测的，3D reference point对多视角分别投影，比如一个reference point投影回视角1的时候投影到重叠区域了，拿一次特征，投影回视角2的时候又投影到这个重叠区域了，又拿一次特征，是可以通过多视角特征进行融合的，所以对于重叠区域，DETR3D的检测融合的是多视角的特征，相比单一视角的检测而言，性能自然是有明显提升的。
使用cocos进行2D和3D混合开发
weixin_42257389的博客
03-29 1166
这是异名上手cocos后，正式开发上线的第一款游戏，用的引擎版本是v.2.2.0，游戏一共有6个场景，其中一个3D场景，4个2D场景，在这里做简单的一个复盘和回顾，因为需要我们平台的账号...
NGUI 屏幕适配（2D UI）
weixin_34192816的博客
05-05 167
2019独角兽企业重金招聘Python工程师标准>>> ...
Unity功能 3D世界坐标转2D屏幕坐标，UI条贴在3D物体上面
cuijiahao的专栏
01-23 1144
让2D UI跟随3D物体移动或指示3D物体的位置该怎么做呢? 将代码绑定到UI上 代码: using UnityEngine; /// <summary> /// 3D物体转2D屏幕坐标 /// </summary> public class Position3DTo2D : MonoBehaviour { public Transform target; // 3D目标 public Transform ui; // 2D UI
unity简单的2D飞机大战游戏
03-03
Unity的Sprite Renderer组件用于显示2D图像，而Sprite Sheet Animation可以将一个包含多个帧的精灵图转换为动画。开发者可能会使用Animator Controller来管理和播放这些动画，如飞机的移动、爆炸效果等。 此外，...
3D轮播-2D-平面
07-24
在这个3D轮播中，CSS3的3D转换被用来创建立体的旋转效果，使得图片仿佛在3D空间中旋转。这些转换包括`rotateX`, `rotateY`, `translateZ`等属性，它们可以调整元素的X轴、Y轴和Z轴位置，从而实现3D效果。同时，CSS3...
将WPF 3D场景的.3ds模型转换为XAML资源
04-11
3D Studio Max的模型通常包含了复杂的几何形状、贴图和动画，这些都需要被适配到WPF的3D框架中。在转换过程中，每个3ds对象将被映射到WPF的MeshGeometry3D对象，其包含顶点、法线和索引数据。同时，模型的材质和纹理...
2020最新Unity3D LitJson-0.16.0 集合
05-30
Unity3D是一款强大的跨平台游戏开发引擎，广泛用于创建2D和3D的互动体验，包括游戏、模拟和可视化应用。在Unity3D中，数据序列化是将对象转换为可存储或传输格式的关键过程，而反序列化则是将这些数据恢复为原生对象...
js 3D相册 js 3D相册
04-20
- **3D渲染**：3D相册的核心是3D渲染，即通过计算几何体、光照、纹理等元素在虚拟空间中的位置和属性，将其转化为2D图像显示在屏幕上。 - **交互性**：用户可以通过鼠标或触摸操作，改变视角、旋转模型，使相册中...
3D云渲染工具对决：Maya与Blender的性能和功能深度比较
Renderbus瑞云渲染的博客
07-10 812
而在这一领域，Maya和Blender这两款软件，以其强大的功能和广泛的应用，成为了设计师们的首选工具。云渲染农场的宠爱，让Maya和Blender的用户能够突破本地硬件的限制，实现更加宏伟的创作愿景，推动了整个行业的创新和发展。它们在数字创作领域占据着举足轻重的地位，而云渲染农场通过提供强大的计算资源，确保了在面对Maya和Blender的动画渲染任务时，能够高效地完成复杂的渲染计算。在视频游戏行业中，这款3D软件因其出色的纹理选项而广受欢迎，以其引人入胜的动画工具和逼真的角色制作而闻名。
ThreeJS-3D教学十五：ShaderMaterial（noise、random）
weixin_44384273的博客
07-08 376
threejs shader的顶点着色器写法
基于蓝牙iBeacon定位技术的商场3D楼层导视软件功能详解与实施效益
Weixiaobang的博客
07-09 481
这款软件的引入，标志着商场服务的智能化升级，为商场带来更高的效率和更广阔的发展空间。特别打造的可视化招商平台，为品牌商提供全面的项目信息、铺位地图和招商服务，实现全流程智慧招商，吸引更多优质品牌入驻，共同促进商业繁荣。软件能提供智能跨楼层导航功能，根据用户当前位置和目的地，自动规划出合适的路线，确保消费者在商场内畅行无阻，节省寻找路线的时间。利用先进的定位技术，软件能够实时追踪用户在商场内的具体位置，无论用户身处哪个角落，都能迅速知晓自己的所在之处，有效避免迷路。
3D感知视觉表示与模型分析：深入探究视觉基础模型的三维意识
最新发布
人工智能前沿分享
07-10 704
在深度学习与大规模预训练的推动下，视觉基础模型展现出了令人印象深刻的泛化能力。这些模型不仅能够对任意图像进行分类、分割和生成，而且它们的中间表示对于其他视觉任务，如检测和分割，同样具有强大的零样本能力。然而，这些模型是否能够理解图像所描绘的三维世界结构，仍然是一个值得探讨的问题。
2D转换成3D场景怎么实现
07-13
将2D场景转换为3D场景可以通过以下步骤来实现： 1. 设计场景：首先，你需要设计和规划你的3D场景。确定你想要呈现的场景元素、布局和风格。 2. 创建3D模型：根据你的设计，使用3D建模工具（如Blender、Maya、3ds Max等）创建场景中的3D模型。将2D元素转换为3D形式，如将平面图像转换为3D对象或使用3D建模工具创建新的3D模型。 3. 纹理映射：为你的3D模型添加纹理映射，以使其具有逼真的外观。使用纹理图像或绘制纹理，然后将其应用到模型的表面。 4. 光照和阴影：为了增强真实感，使用光照和阴影技术为你的3D场景添加光照效果。设置光源、环境光、点光源或方向光源，并调整材质的反射和折射属性。 5. 相机设置：创建一个虚拟相机，调整其位置、角度和视野，以确定用户在场景中的观察角度。 6. 动画和交互：如果需要，在你的3D场景中添加动画和交互性。使用动画技术（如骨骼动画、关键帧动画）为模型添加动态效果。通过交互性，允许用户与场景中的对象进行互动，如点击、拖拽、旋转等。 7. 渲染和输出：最后，使用3D渲染引擎（如Unity、Unreal Engine、Three.js等）将你的3D场景渲染出来。配置渲染设置，选择合适的渲染技术（如光线追踪、实时渲染），并输出最终的3D场景。 请注意，将2D转换为3D是一个复杂的过程，需要熟悉3D建模、纹理映射、光照、动画等相关技术。掌握相关的3D软件和渲染引擎工具，以及对3D场景构建和渲染流程的深入了解，可以帮助你更好地实现2D到3D的转换。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值