day02 空间转换、 动画

已于 2023-08-24 17:19:42 修改
阅读量268 收藏
点赞数
分类专栏： 移动web 文章标签： css html
于 2022-02-07 15:11:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43730921/article/details/122800896
版权

目录

一、空间转换

二、动画

三、综合案例

一、空间转换（3d转换）

空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

 

1.空间位移

语法：transform:translate3d(x,y,z);

        transform: translateX(值);
         transform: translateY(值);
        transform: translateZ(值);

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>空间位移</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover {
      transform: translate3d(50px, 100px, 200px);
      /* transform: translateX(100px);
      transform: translateY(100px);
      transform: translateZ(100px); */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>
</html>

2. 透视效果

语法：perspective:值；

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>透视效果</title>
  <style>
    body {
      /* 添加给父级
      建议取值：800-1200 */
      perspective: 1000px;
    }

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover{
      transform: translateZ(200px);
      /* transform: translateZ(-200px); */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>
</html>

3.空间旋转

语法：transform:rotateZ(值);

         transform: rotateX(值);

         transform: rotateY(值);

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
 x，y，z 取值为0-1之间的数字 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>空间旋转</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

        img {
            width: 300px;
            transition: all 2s;
        }
        .box {
            /* 透视效果：近大远小，近实远虚 */
            perspective: 1000px;
        }

        .box img:hover {
            transform: rotateZ(360deg);
            /* transform: rotateX(60deg); */
            /* transform: rotateY(60deg); */
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

4.立体呈现

父级添加：transform-style: preserve-3d;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立体呈现</title>
    <style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            /* background-color: pink; */
            transition: all 2s;

            transform-style: preserve-3d;
        }

        .cube div {
            position: absolute;
            left: 0;
            top: 0;

            width: 200px;
            height: 200px;
        }

        .front {
            background-color: orange;
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
        }
        .cube:hover{
            transform: rotateY(180deg);
        }

    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>

5.3D导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D导航</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }
        
        .navs li {
            position: relative;

            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;

            /* 立体呈现属性 */
            transform-style: preserve-3d;
            /* 添加旋转属性 便于观察效果 */
            /* transform: rotateX(-20deg) rotateY(30deg); */
        }

        .navs li a {
            /* 1.定位 */
            position: absolute;
            top: 0;
            left: 0;

            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        
        /* 3.中文部分添加位移 */
        .navs li a:first-child {
            background-color: green;
            transform: translateZ(20px);
        }
        /* 2.英文部分添加旋转和位移 */
        .navs li a:last-child {
            background-color: orange;
            transform: rotateX(90deg) translateZ(20px) ;
        }

        .navs li:hover{
            transform: rotateX(-90deg);
        }

    </style>
</head>

<body>
    <div class="navs">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登录</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>
</html>

二、动画

1.动画实现步骤

 ①.定义动画

@keyframes 动画名称 {

            from{ }

            to{ }

        }

②使用动画

animation: 动画名称 花费时间;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画实现步骤</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink; 

            /* 使用 */
            animation: change 1s;
        }

        /* 一. 定义动画：从200变大到600 */
        /* @keyframes change {
            from{
                width: 200px;
            }
            to{
                width: 600px;
            }
        } */
    
        /* 二. 定义动画：200 到 500*300 到 800*500 */
        /* 百分比指动画总时长的占比 */
        @keyframes change {
            0%{
                width: 200px;
            }
            50%{
                width: 500px;
                height: 300px;
            }
            100%{
                width: 800px;
                height: 500px;
            }
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.动画属性

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

          

3.精灵动画

逐帧动画：animation-timing-function: steps(N);

原地跑：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>

    /* 1.准备显示区域 */
    .box {
      width: 140px;
      height: 140px;
      background-image: url(./images/bg.png);
     
      /* 3.使用动画 */
      animation-name: change;
      animation-duration: 2s;
      /* 逐帧动画  steps(N)小图的个数*/
      animation-timing-function: steps(12);
      /* 无限重复 */
      animation-iteration-count: infinite;
    }
    /* 2.定义动画 */
    @keyframes change {
      from{
        background-position: 0 0;
      }
      to{
        /* 1680精灵图的宽度 */
        background-position: -1680px 0;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

 页面跑：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>

    /* 1.准备显示区域 */
    .box {
      width: 140px;
      height: 140px;
      background-image: url(./images/bg.png);
     
      /* 3.使用动画 */
      animation: 
      change 1s steps(12) infinite,
      run 5s forwards;
    }
    
    /* 2.定义动画 */
    @keyframes change {
      from{
        background-position: 0 0;
      }
      to{
        /* 1680精灵图的宽度 */
        background-position: -1680px 0;
      }
    }
    /* 定义盒子移动的动画 */
    @keyframes run {
      from{
        transform: translateX(0);
      }
      to{
        transform: translateX(800px);
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

 

三、综合案例

1.走马灯

<!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>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }
      img {
        width: 200px;
      }
      .box {
        width: 600px;
        height: 112px;
        border: 5px solid #000;
        margin: 100px auto;
        
        overflow: hidden;
      }
      .box ul{
        width: 2000px;
        animation: change 5s infinite linear;
      }
      .box li{
        float: left;
      }

      /* 2.定义动画 */
      @keyframes change {
        from{
          transform: translateX(0);
        }
        to{
          /* 480精灵图的宽度 */
          transform: translateX(-1400px);
        }
      }
      .box ul:hover{
        animation-play-state: paused;
      }

    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
        <li><img src="./images/4.jpg" alt="" /></li>
        <li><img src="./images/5.jpg" alt="" /></li>
        <li><img src="./images/6.jpg" alt="" /></li>
        <li><img src="./images/7.jpg" alt="" /></li>
        <!--  -->
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
      </ul>
    </div>
  </body>
</html>

2.全名出游季

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 云彩 -->
    <div class="cloud">
        <img src="./images/yun1.png" >
        <img src="./images/yun2.png" >
        <img src="./images/yun3.png" >
    </div>
    <!-- 气球 -->
    <div class="san">
        <img src="./images/san.png">
    </div>

    <!-- 中间 -->
    <div class="center">
        <img src="./images/font1.png">
        <img src="./images/lu.png" >
    </div>

    <!--标签-->
    <div class="nav">
        <img src="./images/1.png">
        <img src="./images/2.png">
        <img src="./images/3.png">
        <img src="./images/4.png">
    </div>
</body>
</html>

css


*{
    margin: 0;
    padding: 0;
}
html{
    height: 100%;
}

body{
    position: relative;
    height: 100%;
    background: url(../images/f1_1.jpg) no-repeat center 0;
   
    /* 缩放背景图 */
    background-size: cover;
}

/* 
1.引入图片
2.定义动画、使用动画 */

.cloud img{
    position: absolute;
    top: 0;
    left: 50%;
}
.cloud img:nth-child(1) {
    margin-left: -300px;
    top: 20px;
    /* alternate 动画执行方向 为反向 */
    animation: cloud 1s infinite alternate;
}
.cloud img:nth-child(2) {
    margin-left: 400px;
    top: 100px;
    animation: cloud 1s infinite alternate 0.2s;
}
.cloud img:nth-child(3) {
    margin-left: -550px;
    top: 200px;
    animation: cloud 1s infinite alternate 0.4s;
}
/* 云彩动画 */
@keyframes cloud {
   to{
       transform: translateX(20px);
   }
}

/* 气球 */
.san img{
    position: absolute;
    top: 100px;
    left: 25%;
    animation: san 1s infinite alternate;
}
/* 气球动画 */
@keyframes san {
    to{
        transform: translateY(-20px);
    }
}

/* 中间 */
.center img{
    position: absolute;
    top: 50%;
    left: 50%;
}
.center img:nth-child(1){
    margin-top: -150px;
    margin-left: -300px;
    /* 缩小 */
    transform: scale(0.8);
}
.center img:nth-child(2){
    margin-top: -300px;
    margin-left: 160px;
}
/* 标签 */
.nav img{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: scale(0.6);
}
.nav img:nth-child(1){
    margin-left: -300px;
    margin-bottom: 50px;
    animation: nav 0.5s infinite alternate;
}
.nav img:nth-child(2){
    margin-left: -160px;
    margin-bottom: 50px;
    animation: nav 0.7s infinite alternate;
}
.nav img:nth-child(3){
    margin-bottom: 50px;
    animation: nav 0.9s infinite alternate;
}
.nav img:nth-child(4){
    margin-left: 150px;
    margin-bottom: 50px;
    animation: nav 1s infinite alternate;
}
@keyframes nav {
    to{
        transform: translateY(20px);
    }
}

效果：

满分的宅男
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
空间转换和动画
qq_48666786的博客
09-06 972
使用transform属性实现元素在空间内的位移、旋转、缩放等效果1.空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。2.空间转换也叫3D转换3.属性：transform。
css小结
xumengxia的博客
08-25 351
1. 自动内减 box-sizing:border-box; 2.去除常见标签默认的margin和padding /* 去除常见标签默认的 margin 和 padding */ body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, input { margin: 0; padding: 0; } 3.设置网页统一的字体大小、行高、字体系列相关属性 /* 设置网页统一的字体大小、行高、字体系列相关属性 */ b...
Day11：空间转换、动画
EmulateStep的博客
06-03 433
day11：本文主要讲了空间转换和动画。空间转换又称 3D 转换，属性是 transform，空间转换可以沿 X轴、Y轴、Z轴 3个轴进行转换操作。接下来讲解了什么是动画，动画是两个状态的变化过程，动画的属性有哪些以及怎么使用动画。这两个 CSS 属性在实际开发网页中很常用，希望对大家有帮助！
Day02-空间转换+动画
weixin_45831040的博客
09-03 122
空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。 空间转换也叫3D转换 属性：transform 语法： transform: translate3d(x, y, z); transform: translateX(值); transform: translateY(值); transform: translateZ(值); 取值（正负均可）： 1.像素单位数值 2.百分比 属性（添加给父级）： perspective: 值; 取值：像素单位数值， 数值
数据可视化-day02.zip
04-29
在“数据可视化-day02”这个压缩包中，我们可以期待找到与数据可视化相关的第二课的学习资料，包括可能的讲义、示例代码、练习文件等。 在数据可视化的学习中，有几个关键知识点是非常重要的： 1. **图表类型**：...
day40-3d Background Boxes（3D背景盒子转换）
07-26
- 使用CSS动画而不是JavaScript，因为CSS动画通常在性能上优于JavaScript。 - 对于大型项目，考虑使用Web Workers处理复杂的计算任务，以避免阻塞主线程。 通过以上步骤，你可以创建出具有3D背景盒子转换效果的...
Day23
03-31
过渡用于平滑地改变一个属性，而动画可以控制一系列关键帧的转换。 8. **CSS-in-JS**：这是一种将CSS样式直接写在JavaScript中的实践，例如使用styled-components库，它可以提供更好的组件化和动态样式管理。 9. *...
DayOfYear.zip_时钟
09-24
4. **Day_of_Year.vbw**：这是VB工作空间文件，记录了用户的开发环境设置，如窗口位置、打开的文件、断点等。它帮助恢复用户离开时的工作状态，但不直接影响程序的运行。 基于这些文件，我们可以推断这个项目是使用...
安徽省计算机二级VFP考试理论模拟试题2附答案.pdf
10-04
19. `RECNO()`、`DAY()` 和 `RECCOUNT()` 返回整数值，而 `BOF()` 返回逻辑值（.T. 或 .F.），所以**BOF()**的返回值类型不同。 20. 数据表中包含四个字段，总字段宽度是**24**，因为照片（G）字段占8个字节，其他每...
网站基本布局CSS
m0_46608027的博客
07-24 761
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
css 作业 2
最新发布
没有 bug 的代码是不完美的！
07-25 637
写完了
【css】flex布局父元素宽度或高度无法被子元素撑开-bug记录
qq_2511276124的博客
07-24 262
flex布局父元素宽度或高度无法被子元素撑开问题。 解决方案： ==**手动计算子元素内容所占宽高，手动赋值给父元素即可。**==
【前端 02】新浪新闻项目-初步使用CSS来排版
delepaste的博客
07-23 1283
在CSS中，页面上的每个元素都可以被看作是一个盒子，这个盒子由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。这四个部分共同构成了元素的盒模型，决定了元素在页面上的位置和大小。内容区域（Content）：元素的实际内容区域，如文本、图片等。内边距区域（Padding）：内容区域与边框之间的空白区域，用于控制内容与边框的距离。边框区域（Border）：围绕内边距和内容区域的边界，可以设置颜色、宽度和样式。
WebKit的CSS Aspect Ratio Box：重塑响应式设计
2401_85760095的博客
07-24 731
的属性，它允许开发者为元素定义一个理想的宽高比。在WebKit中，这个属性得到了良好的支持，使得开发者可以轻松实现响应式设计。属性在大多数现代浏览器中得到了良好的支持，包括基于WebKit的浏览器如Safari。属性是一个强大的工具，它可以帮助开发者在WebKit和其他现代浏览器中轻松实现响应式设计。属性对性能的影响通常很小，但在一些极端情况下，如大量使用或在性能受限的设备上，过度使用可能会对性能产生一定影响。在这个例子中，所有图片都将保持16:9的宽高比，并且宽度为100%。随着Web技术的发展，
[微信小程序] css 解决纯数字或字母不自动换行的问题、控制文字行数
Lovely Ruby 的手账
07-24 329
作用：这个属性是一个非标准的Webkit特定属性，它使得元素使用弹性盒模型（Flexbox的前身）。这允许使用-webkit-line-clamp和-webkit-box-orient属性。示例场景：当你有一个固定宽度的容器，而其中的文本可能包含非常长的单词或URL时，这个属性可以防止文本溢出容器边界。作用：这个属性允许在单词内部进行换行，即使单词很长也不会溢出容器，而是会在必要的地方打断单词以适应容器宽度。示例场景：与-webkit-line-clamp一起使用，确保文本按垂直方向截断。
【CSS】盒子模型
小秀的博客
07-24 273
CSS 盒⼦模型中，盒⼦的总⼤⼩由这四个部分加起来决定，即 width + padding + border + margin。需要注意的是，CSS 盒⼦模型有两种，分别是标准盒⼦模型和怪异盒⼦模型。CSS 盒⼦模型将每个 HTML 元素表示为⼀个矩形的盒⼦，这个盒⼦包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。
CSS（四）——CSS Text(文本）
m0_62701594的博客
07-24 1292
颜色属性被用来设置文字的颜色。
css快捷代码【超出一行文本显示省略号/超出三行显示省略号/超出n行...】
weixin_43811753的博客
07-24 244
css快捷代码【超出一行文本显示省略号/超出三行显示省略号/超出n行...】
通达信day文件转换为csv文件
07-06
将通达信的day文件转换为csv文件可以通过以下步骤完成： 1. 打开通达信软件，并选择要转换的股票或指数的日线数据。 2. 在通达信软件中找到“导出”或“另存为”等选项，选择将数据导出为文本文件。 3. 在弹出的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值