移动web第二天-空间转换/动画

1、空间转换-3D转换

1.1空间平移属性：transform x、y、z构成一个立体空间，z轴位置与视线方向相同

语法：transform:translate3d(x, y, z);
transform: translateX(值)、 transform: translateY(值) 、 transform: translateZ(值)
transform: translateZ(值) Z轴的正方向为屏幕到人的眼睛的方向

1.1.1透视效果(给父元素添加) translateZ需加上透视才能看到效果

透视，视距，景深 设置给使用了3d元素的父元素（亲爸爸）
/* 视距理解：人的眼睛到屏幕的距离 */
用法：perspective: 800px;

添加视距 取值范围：400~1200px pp 只是添加近大远小、近实远虚的效果

image.png

<style>
      /* 透视，视距，景深 设置给使用了3d元素的父元素（亲爸爸） */
      body {
        /* 添加视距 取值范围：400~1200px pp */
        perspective: 800px;
      }
      .box {
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background-color: skyblue;
        transition: all 0.5s;
      }

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

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

1.2空间旋转性：rotatae

方向遵循左手法则： 左手握住旋转轴 拇指指向正值方向 手指弯曲方向为旋转正值方向

image.png

注意点：transform: rotateZ(360deg);与 transform: rotate(360deg);等价效果一致
transform: rotateX(60deg); 上边往里倒，高度变小
transform: rotateY(60deg); 右边往里倒，宽度变小

transform: rotateX(45deg) rotateY(60deg) rotateZ(60deg); 连写，用空格隔开

1.2空间缩放性：无缩放

1.3立体呈现

用法：开启3d立体效果 transform-style: preserve-3d; tfs简写

image.png

<style>
      .box {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background-color: skyblue;
        transition: all 2s;
        /* 添加视距：仅仅是增加了一个近大远小的效果 */
        perspective: 600px;
        /* 开启3d立体效果 tfs*/
        transform-style: preserve-3d;
      }

      .box div {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
      }

      .back {
        background-color: green;
      }

      .front {
        background-color: orange;
        transition: all 1s;
      }

      .box:hover {
        transform: rotateY(60deg);
      }

      .box:hover .front{
        transform: translateZ(-400px);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="back">后面</div>
      <div class="front">前面</div>
    </div>
  </body>

综合案例：旋转导航(了解)

1、让橙色盒子往上移动60deg 沿着x轴旋转90度
2、绿色盒子往前移动20 沿着Z轴
3、鼠标移入li标签，整个盒子沿着X负方向往下
高度必须要给，如果不给li的高度为80像素 默认的旋转点为盒子的中心点
会导致整个盒子会往下掉20px

旋转导航.gif

html代码

<div class="box">
        <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>

css代码

<style>
        * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box {
        width: 300px;
        height: 40px;
        margin: 50px auto;
      }
      li {
        float: left;
        /* 
        高度必须要给，如果不给li的高度为80像素 默认的旋转点为盒子的中心点 
        会导致整个盒子会往下掉20px
        */
        height: 40px;
        list-style: none;
        /* 开启3d效果 */
        transform-style: preserve-3d;
        /* 开启上帝视角旋转 */
        /* transform: rotateX(-20deg) rotateY(30deg); */
        transition: all 1s;
      }
      a {
        display: block;
        width: 100px;
        height: 40px;
        text-decoration: none;
        color: #fff;
        text-align: center;
        line-height: 40px;
      }
      li a:first-child {
        background-color: green;   
        /* 2、绿色盒子往前移动20  沿着Z轴  */
        transform: translateZ(20px);
      }
      li a:last-child {
        background-color: orange;
        /* 1、让橙色盒子往上移动60deg  沿着x轴旋转90度*/
        transform: translateY(-60px) rotateX(90deg);
      }
        /* 3、鼠标移入li标签，整个盒子沿着X负方向往下 */
      li:hover {
        transform: rotateX(-90deg);
      }
    </style>

2、动画 animation

用法： 1、定义关键帧动画（用from to或百分比） 2、引用动画

1、@keyframes change {from{} to{}} @keyframes move { 0%{} 50%{}100%{}}
注意点：1、动画的名称不能重复
注意点：2、可参与的动画的CSS属性都可以参与动画
注意点：3、动画名称不能用running 因为是关键词
注意点：4、.如果调用该动画的盒子样式和初始状态的样式是一样的，初始状态可以省略不写

 <style>
      .box1 {
        width: 200px;
        height: 100px;
        background-color: skyblue;
        /* 2.调用动画 第一个参数是你定义的动画名称,第二个参数是动画时长*/
        animation: change 2s;
      }

      /* 一. 定义动画：让宽度从200变大到600 */
      @keyframes change {
        /* 初始状态 */
        from{
          width: 200px;
        }
        /* 结束状态 */
        to{
          width: 600px;
        }
      }
      .box2 {
        width: 200px;
        height: 100px;
        background-color: tomato;
        /* 2.调用动画 第一个参数是你定义的动画名称,第二个参数是动画时长*/
        animation: move 3s;
      }

      /* 二. 定义动画：200*100 到 500*300 到 800*500 */
      /* 1.定义动画 百分比可以实现阶段性的动画 */
      @keyframes move {
        0%{
          width: 200px;
          height: 100px;
        }
        50%{
          width: 500px;
          height: 300px;
        }
        100%{
          width: 800px;
          height: 500px;
        }
      }
    </style>

2.1 animation复合属性

animation属性

2.1.1 速度曲线

记住：linear 匀速——补间动画
记住：step(正整数)——逐帧动画 经常配合精灵图去使用

image.png

2.1.2 延迟时间：

动画开始之间要等待的时间 s/ms

注意点：当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间/延迟时间

2.1.3 重复次数

记住：infinite 无限次播放

2.1.4动画方向

记住：alternate 交替播放

2.1.5执行完毕时的状态

记住：forwards 动画会停在动画结束时的状态；

注意点：forwards不能和infinite结合使用，否则不生效

单个属性

案例：精灵图动画

实现步骤：1、使用背景位移实现帧动画动 2、使用定位left实现向右走

精灵图帧动画.gif
<style>
    .box {
      position: absolute;
      left: 0;
      width: 140px;
      height: 140px;
      background-image: url(./images/bg.png);
      animation: run 1s steps(12) infinite,
      translate 3s linear forwards;
    }

    @keyframes run {
      100% {
        background-position: -1680px 0;
      }
    }

    @keyframes translate {
      100% {
        left: 800px;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>

案例：无缝切换
考察点：动画、位移切换、无缝切换、鼠标移动上停止动画


无缝切换.gif
 <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      ul {
        list-style: none;
      }
      .box {
        width: 620px;
        border: 10px solid #000;
        overflow: hidden;
      }
      .box ul {
          width: 2000px;
          animation: move 5s linear infinite;
      }
      .box:hover ul{
        animation-play-state: paused;
      }
      .box li {
          float: left;
      }
      .box li img {
        width: 200px;
        vertical-align: middle;
      }
      @keyframes move {
        to{
          transform: translateX(-1400px);
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <!-- ul>li*7>img[src="./images/$.jpg"] -->
      <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>

~~明天继续努力丫

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • web第二天--空间转换
    空间位移 属性：transform 一、空间:x 、y 和z三条坐标轴构成了一个立体空间,z轴的正方向为屏幕到人的...
    cheunggaryu阅读 284评论 0赞 0
  • 移动web二 - 3D转换
    一、 认识 3D 转换 3D 的特点近大远小物体和面遮挡不可见 三维坐标系x 轴：水平向右 -- 注意：x 轴右...
    Anwfly阅读 397评论 0赞 1
  • 02-移动端开发教程-CSS3新特性（中）
    1. 新的背景 背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。...
    IT老马阅读 2,592评论 0赞 9
  • 前端学习笔记四-HTML5
    一、什么是 HTML5 1.1 HTML5 的概念与定义 定义：HTML5 定义了 HTML 标准的最新版本，是...
    AizawaSayo阅读 740评论 0赞 1
  • 前端第十天
    1.圆角_阴影_透明度 CSS3实现圆角有两种方法., 第一种是背景图像,传统的CSS每个元素只能有一个背景...
    用户400826阅读 240评论 0赞 0