您的位置:首页 > Web前端 > CSS

css伪类动画效果

2019-09-23 10:24 1386 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/qq_41904983/article/details/101195625

一、before和after伪元素(详解)
之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素来展现,实际上是css样式展现的行为,因此被称为伪元素。是伪元素在html代码机构中的展现,可以看出无法伪元素的结构无法审查
content一定要设置,否则为伪元素失效
二、过渡(CSS3)
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
帧动画:通过一帧一帧的画面按照固定顺序和速度播放。

在CSS3里使用transition可以实现补间动画(过渡效果)
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化,还是用逗号隔开。

三、2D变形(CSS3) transform
transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、倾斜、缩放,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果。

变形转换 transform transform 变换 变形的意思 《 transformers 变形金刚》
四、移动 translate(x, y)
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
可以改变元素的位置,x、y可为负值;
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)
translateX(x)仅水平方向移动(X轴移动)
translateY(Y)仅垂直方向移动(Y轴移动)
五、缩放 scale(x, y)
scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
scaleX(x)元素仅水平方向缩放(X轴缩放)
scaleY(y)元素仅垂直方向缩放(Y轴缩放)
六、旋转 rotate(deg)
可以对元素进行旋转,正值为顺时针,负值为逆时针;
transform-origin可以调整元素转换变形的原点。
七、倾斜 skew(deg, deg)
transform:skew(30deg,0deg);
八、3D变形(CSS3) transform

rotateX()

就是沿着 x 立体旋转.

rotateY()

沿着y轴进行旋转

rotateZ()

沿着z轴进行旋转
九、透视(perspective)
电脑显示屏是一个2D平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的。
透视可以将一个2D平面,在转换的过程当中,呈现3D效果。

  • 透视原理: 近大远小 。
  • 浏览器透视:把近大远小的所有图像,透视在屏幕上。
  • perspective:视距,表示视点距离屏幕的长短。视点,用于模拟透视效果时人眼的位置
    注:并非任何情况下需要透视效果,根据开发需要进行设置。
    perspective 一般作为一个属性,设置给父元素,作用于所有3D转换的子元素。

translateX(x)

仅水平方向移动**(X轴移动)

translateY(y)

仅垂直方向移动(Y轴移动)

translateZ(z)

直观表现就是大小变化

translate3d(x,y,z)

[注意]其中,x和y可以是长度值,也可以是百分比,百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和;z只能设置长度值

backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: