空间转换(使用transform属性实现元素在空间的位移、旋转、缩放等效果)

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

空间转换也叫3D转换(属性:transform)

使用translate实现元素空间位移效果

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

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

取值(正负即可)像素单位取值  百分比

透视:(使用perspective属性实现透视效果)

思考:生活中,同一个物体,观察距离不同,视觉上有什么区别?近大远小,近清楚远模糊

思考:默认情况下,为什么无法观察到Z轴位移效果?Z轴是视线方向,移动效果应该是距离的远或近,电脑屏幕是平面,默认无法观察远近效果

属性(添加给父级)perspective: 值;

取值:像素单位数值,数值一般在800-1200

透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离

空间旋转(使用rotate实现元素空间旋转效果)

语法:transform: rotateZ(值);  transform: rotateX(值);  transform: rotateY(值);

左手法则:判断旋转方向:左手握住旋转轴,拇指指向正值方向,手指弯曲方向为旋转正值方向

拓展:rotate3d(x,y,z,角度度数); 用来设置自定义旋转轴的位置及旋转的角度(x,y,z取值为0-1之间的数字)(基本不用)

立体呈现(使用transform-style: preserve-3d)呈现立体图形

思考:使用perspective透视属性能否呈现立体图形?不能,perspective只增加近大远小、近实远虚的视觉效果

实现方法:添加transform-style: preserve-3d;  使子元素处于真正的3d空间  默认值flat,表示子元素处于2D平面内呈现

呈现立体图形步骤

搭建立方体:li标签(添加立体呈现属性transform-style: preserve-3d; 添加旋转属性(为了便于观察效果,案例完成后删除即可))

      a标签(调节位置  a标签定位(子绝父相) 英文部分添加旋转和位移样式  中文部分添加位移样式)

空间缩放(使用scale实现空间缩放效果)

语法:transform: scaleX(倍数);   transform: scaleY(倍数);   transform: scaleZ(倍数);   transform: scale3d(x,y,z);

动画:(使用animation添加动画效果)

思考:过渡可以实现什么效果?实现2个状态间的变化过程

动画效果:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面

构成动画的最小单元:帧或动画帧

实现步骤:  1.定义动画: @keyframs 动画名称 {    @keyframes 动画名称 {

                from {}          0% {}

                to{}             10% {}

              }               15% {}

                              100% {}

                            }

        2.使用动画:  animation: 动画名称 动画花费时长;

动画属性:(使用animation相关属性控制动画执行过程)

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      暂停动画       pauused为暂停,通常配合:hover使用

注意:动画名称和动画时长必须赋值   取值不分先后顺序  如果有两个值,第一时间表示动画时长,第二个时间表示延迟时间

逐帧动画:帧动画。开发中,一般配合精灵图实现动画效果(animation-timing-function: steps(N); )

将动画过程等分成N份

精灵动画制作步骤:1.准备显示区域(设置盒子尺寸是一张小图的尺寸,背景图为当前精灵图)  

         2.定义动画(改变精灵图的位置(移动的距离就是精灵图的宽度))  

         3.使用动画(添加速度曲线steps(N),N与精灵图上小图个数相同,添加无限重复效果)

多组动画:animation:

      动画1,

      动画2,

      动画N

     ;

      /* 动画的开始状态和盒子的默认样式相同的,可以省略开始状态的代码 */
走马灯:使用animation实现逐帧图片位移效果

<!-- 第567移动的时候,显示区域不能留白 -->
 /* 定义动画:位移 ul左侧使用 x -1400px  */
  /* 缩放背景图 */
  /* 图片等比例缩放,当宽度或高度和盒子尺寸相等,图片就不缩放 */
  /* background-size: contain;  */
  /* 图片会等比例缩放,图片完全覆盖到整个盒子,可能导致图片显示不全 */
  background-size: cover;
制作背景大图的时候注意两点:1.html和body的高度都取100%  2.背景图尺寸不合适 background-size: cover;

随机推荐

  1. json提取器和beanshell处理器组合,将提取的所有id以数组返回

    1.添加json提取器 2.添加beanshell处理器,并编写脚本 String str1 = vars.get("buildid_ALL"); log.info(str1); ...

  2. 知识分享-消息中间件详解+rabbitMQ

    知识分享-消息中间件详解+rabbitMQ 消息中间件 概述 消息中间件是基于队列与消息传递技术,在网络环境中为应用系统提供同步或异步.可靠的消息传输的支撑性软件系统. 应用场景 异步处理 对于电商a ...

  3. ob-myfreemp3

    网站 aHR0cDovL3Rvb2wubGl1bWluZ3llLmNuL211c2ljLw== 打开之后随便搜一个歌手的名字或歌曲(这里搜林俊杰)  m/api/search,可以看到数据全在这里 全 ...

  4. 实现简单的csv文件上传和bootstrap表格的下载

    一.写一个简单的页面并发送文件 引入bootstrap.js,jQuery.js等,具体的网页就不细写了,很简单. 加入input框,button控件,进度条.如下: <li class=&qu ...

  5. Hugging Face 开源库介绍

    Hugging Face 的开源生态今年成长迅速,timm 成为新加入的成员.diffusers.evaluate 以及 skops 等各种库蓬勃发展. Transformers Transforme ...

  6. px批量转vw方法,适用于用户临时突发自适应需求,快速搞出项目多屏幕适应方案postcss-px-to-viewport,postcss.config.js配置

    方案一: 1. 下载依赖 npm install postcss-import postcss-loader postcss-px-to-viewport --save-dev npm install ...

  7. margin-left:auto的妙用

    问题描述 如上图所示,我们需要将上述三个标签右对齐,就像上图是要达到的效果,一般采用的方法是对每个标签设置margin-left这样就需要设置三个值. 当文字变长或者变成英文的时候又需要重新设置,否则 ...

  8. Java基础1-1-1—java基础语法(数据类型及转换)

    JAVA基础 1.数据类型及转换 1.1 注释 注释是在程序指定位置添加的说明性信息 简单理解:对代码的一种解释说明,方便我们程序员更好的去阅读代码 // 单行注释 /* 多行注释 */ /**文档注 ...

  9. 三种循环的区别-break语句

    三种循环的区别 循环语句的区别 for 和 while 的小区别: 控制条件语句所控制的那个变量,在for循环结束后,就不能再被访问到了,而while循环结束还可以继 续使用,如果你想继续使用,就用w ...

  10. Unity打包资源,进行后台加载

    Unity打包资源,进行后台加载 需要项目优化的pa you,这边走:Unity项目优化--Web版 一.前言 因为在下载Three.js,所以趁着这个时间写一下资源打包加载吧 小黑在刚开始学习Uni ...