空间转换(使用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. 痞子衡嵌入式:Farewell, 我的写博故事2016-2019

    -- 题图:苏州天平山枫叶 现在是 2022 年末,痞子衡又要起笔博文年终总结了,看着 2020 年之前的博文总结缺失,始终觉得缺憾,所以写下此篇 2016 - 2019 总结合辑.2016 年之前, ...

  2. [OpenCV实战]19 使用OpenCV实现基于特征的图像对齐

    目录 1 背景 1.1 什么是图像对齐或图像对准? 1.2 图像对齐的应用 1.3 图像对齐基础理论 1.4 如何找到对应点 2 OpenCV的图像对齐 2.1 基于特征的图像对齐的步骤 2.2 代码 ...

  3. FPGA:乒乓球比赛模拟机的设计

    简介 开发板:EGO1 开发环境:Windows10 + Xilinx Vivado 2020 数字逻辑大作业题目 7: 乒乓球比赛模拟机的设计 乒乓球比赛模拟机用发光二极管(LED)模拟乒乓球运动轨 ...

  4. java中String类型的相关知识的简单总结

    java中String类型的相关知识总结 一.常用方法: 1.构造方法: byte数组 可指定offset和length 可指定charset char数组 可指定offset和count 字符序列 ...

  5. C#开发的资源文件程序(可国际化) - 开源研究系列文章

    上次将小软件的线程池描述了,也将插件程序描述了,这次就将里面的资源文件相关的内容进行下记录,这里能够让程序做成国际化的形式(即多语言程序),主要就是通过这个资源文件的方式进行的处理.下面将对这个资源文 ...

  6. [1]SpinalHDL安装环境

    [1]SpinalHDL安装环境 最好的教程是官方文档!不过推荐英文文档 英文版 中文版 一.安装java环境 SpinalHDL相当于是scala的一个包,而scala是运行在jvm上的.所以我们先 ...

  7. centos搭建neo4j环境(含java)2021_12

    限centos neo4j与java下载: 链接:https://pan.baidu.com/s/1ei15dROGy3OwJfbislxH7g 提取码:8B3A   下载后 1.在linux中建立文 ...

  8. 《《关于我把好好的c++小游戏改的很ex》》

    #undef UNICODE#undef _UNICODE#include <iostream>#include <iomanip>#include <string> ...

  9. mov eax,dword ptr[0x00aff834] 和 lea eax,[0x00aff834]区别

    mov eax,dword ptr[0x00aff834] 和 lea eax,[0x00aff834]区别 mov eax,[内存]是将内存的值赋值给eax,而lea是直接将地址值赋值给eax 因此 ...

  10. iterator_traits技法

    问题 在 C++ 泛型编程中,如何知道"迭代器所指对象的类型",以便声明临时变量呢?我们把迭代器所指对象的类型称为value type. template <class It ...