css伪类动画效果
一、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 属性定义当元素不面向屏幕时是否可见。
- CSS伪类的动画和过渡效果应用
- 浏览器展示CSS伪类的动画和过渡效果应用
- 浏览器展示CSS伪类的动画和过渡效果应用
- CSS伪类的动画和过渡效果应用
- CSS伪类的动画和过渡效果应用
- 一个CSS+jQuery实现的放大缩小动画效果
- CSS动画:旋转卡片效果
- css 动画效果 -- transition
- 利用 :before :after伪类实现鼠标悬浮动画效果
- 一个CSS+jQuery的放大缩小动画效果
- CSS-动画效果
- 20个真棒的jquery和css打造的图片动画效果(网站背景随时变换,广告牌效果..)
- 用css伪类实现提示框效果
- 简单CSS技巧实现的Logo动画效果(很像导航栏上经常运用的效果,但有差别)
- css学习之动画效果
- 如何css做一个点击导航 页面滚动, 并且有动画效果
- CCS3动画效果插件——Animae.css和WOW.js
- Transit – 超平滑的 CSS 过渡和变换动画效果插件
- CSS 动画效果
- css动画 文字闪烁效果