写点什么

一文说清楚 css3 具有颠覆意义的 2D 转换效果

发布于: 刚刚
一文说清楚css3具有颠覆意义的2D转换效果

html5/css3 基础篇(第二篇)

回顾

今天我们来说一说 h5/c3 的第二篇,回顾上一篇我们开始了 h5/c3 的第一篇,我们重新学了一下 VsCode 的基础应用以及里面的插件,插件也分为基础和进阶,不同学习阶段运用不同的插件会如虎添翼。在之后我们学习了 html5 中新增的语义化标签、还有新增的多媒体标签等。还有表单和 css 属性选择器和伪类这些,不止一遍的强调基础是重中之重,基础阶段的学习本身就是重复学习的过程,基础一定要打牢。

css3 2D 转换

转换(transform)是 css3 中具有颠覆意义性的特征之一,原来的 css 实现的都是一些平面的东西,限制在了平面上,而 css3 新增的转换和动画效果使得 css 的功能更加强大。可以实现元素的位移、旋转、缩放等效果。转换(transform)也可以理解为变形,在 css3 中一般分为三种模式


  • 移动:transform:translate

  • 旋转:transform:rotate

  • 缩放:transform:scale

css3 2D 转换——移动

移动:translate,移动是可以改变元素在页面中的位置,类似于定位。 具体如下图所示:



语法:


// 确定 translate x轴和y轴transform:translate(x,y)
// 只改变 translate x轴transform:translateX()
// 只改变 translate y轴transform:translateY()
复制代码


可以自己在编辑器中试一试效果,除了这些 translate 还需要注意的是:


  1. 定义 2D 转换中的移动,沿着 X 和 Y 轴移动元素

  2. translate 最大的优点:不会影响到其他元素的位置

  3. translate 中的百分比单位是相对于自身元素 translate:(50%, 50%),如果是百分比的话,移动自身宽度的 50%

  4. 对行内标签没有效果

css3 2D 转换——旋转

旋转:rotate,旋转是元素按照度数转动一定的比例


旋转之前的效果:



鼠标放上去旋转之后的效果:



// 旋转语法// 顺时针旋转45度transform:rotate(45deg)
复制代码


可以自己在编辑器上试一试,除此之外,还需要注意的是:


  1. rotate 里面跟度数,单位是 deg 比如:45(deg)

  2. 角度是顺时针,负时 为逆时针

  3. 默认的旋转点是元素的正中心

css3 2D 转换——旋转中心点

设置旋转中心点——transform-origin 语法:transform-origin:x y; —— x 和 y 可以是百分比也可以是:top、left、right、bottom 等



自己可以在编辑器中试一试,除此之外,需要注意的是:


  1. 注意后面的参数 x 和 y 用空格隔开

  2. x、y 默认转换的中心点是元素的中心点(50%,50%)

  3. 还可以给 x、y 设置像素或者是 方位名词(top、right、bottom、left、center)

css3 2D 转换——缩放

缩放:scale,缩放给元素添加上了这个属性就能控制元素的放大还是缩小


语法:


// 控制元素的放大和缩小transform:scale(x,y)
// 值可以简写为小数点transform:scale(0.5)
复制代码


缩放效果之前:



缩放效果之后:



自己可以在编辑器中试一试,需要注意的是:


  1. 注意其中 x 和 y 用逗号分开

  2. transform:scale(1,1) 宽高都放大一倍,相当于没有放大

  3. transform:scale(2,2) 宽高都放大了 2 倍

  4. transform:scale(2):只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2,2)

  5. transform:scale(0.5,0.5) 缩小一倍 1.scale 缩放最大的优势就是:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子

2D 转换综合性写法

  1. 同时使用多个转换,其格式为:transform:translate()rotate()scale()等等

  2. 其顺序会影响转换的效果(先旋转会改变坐标轴方向)

  3. 当我们同时又位移了其他属性的时候,记得要将位移放在最前面

css 动画

动画:animation,是 css 中具有颠覆意义的特征之一,可以设置多个节点来控制一个或多个动画效果,常用来实现较为复杂的动画效果


动画的基本使用:


  1. 先定义动画

  2. 再使用(调用)动画


// 定义动画// move:是定义动画的名字@keyframes move {  // 开始状态  0%{    transform: translate(0px)  }  100%{    transform: translate(100px)  }}
// 元素调用动画div{ // 调用动画 animation: move; // 持续时间 animation-duration: 1s;}
复制代码


可以自己在编辑器中试一试。



动画序列


  1. 0% 是动画的开始,100%是动画的完成,这样的规则就是动画序列

  2. 在 @keyframes 中规定某项 css 样式,就能创建由当前样式逐渐改为新样式的动画效果

  3. 动画是使元素从一种样式逐渐变化为另一种样式的效果,您可以改变任意多的样式任意多次数

  4. 请用百分比来规定变化发生的事件,或用关键词 “form” 和 “to” ,等同于 0%和 100%


动画常用的属性:


  1. @keyframes:规定动画名称

  2. animation:所有动画属性的简写属性,除了 animation-play-state 属性

  3. animation-name:规定 @keyframes 动画名称

  4. animation-duration:规定动画完成一个周期所花费的秒和毫秒

  5. animation-timing-function:规定动画的速度曲线,默认是 “ease”

  6. animation-delay:规定动画何时开始,默认是 0

  7. animation-iteration-count:规定动画被播放的次数,默认是 1,还有 infinite

  8. animation-direction:规定动画是否在下一周期逆向播放,默认是 “normal”,altemate 逆播放

  9. animation-play-state:规定动画是否正在运行或暂停,默认是 “running” 还有 “paused”

  10. animation-fill-mode:规定动画结束后状态,保持 forwards 回到起始 backwards


动画简写属性


在往后的工作中基本上见到的都是简写的形式,所以往后熟练之后都可以使用简写的形式,防止代码冗余


animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态(前两个属性不能省略)


animation:name duration timing-function delay iteration-count direction fill-mode;


以下是在动画中常用的效果:


  1. 简写属性里面不包含 animation-play-state

  2. 暂停动画:animation-play-state:puased;经常和鼠标经过元素等其他搭配使用

  3. 想要动画走回来,而不是直接调回来:animation-direction:alternate

  4. 盒子动画结束后,停留到结束位置:animation-fill-mode:forwards

动画速度曲线步长

animation-timing-function:规定动画的速度曲线,默认是“ease”


  • animation-timing-function:linear —— 动画从头到尾的速度相同,匀速的

  • animation-timing-function:ease —— 默认。动画以低速开始,然后加速,在结束前变慢

  • animation-timing-function:ease-in —— 动画以低速开始

  • animation-timing-function:ease-out —— 动画以低速结束

  • animation-timing-function:ease-in-out:动画以低速开始和结束

  • animation-timing-function:steps() —— 指定了时间函数中的间隔数量(步长),可以实现打字效果

结束

好了,今天 css3 2D 转换这一讲就介绍完了,可以自己在编辑器中实现一些小 Demo,巩固基础。

发布于: 刚刚阅读数: 2
用户头像

还未添加个人签名 2019.09.04 加入

普及从学校到工作怎么快速转变,更高效学习前端知识及后续发展趋向,更好快速的融入到工作中 关注公号:前端史塔克

评论

发布
暂无评论
一文说清楚css3具有颠覆意义的2D转换效果