先讨论几个css 问题

1,css 清除浮动的方法

2,css 居中

3,多行省略号

4,小布局技巧

2D 动画功能属性兼容性:transform、transition、animation

transform 可以实现旋转、缩放、倾斜、移动四种类型的变形处理。

transition、animation

一、transform

 

1.scale:缩放,1 为原始大小。scale(x)。正数放大,负数缩小。属性值为一个时,x/y 轴

同时缩放;属性值为两个值时,分别控制x、y 轴的缩放。

效果图如下:

2.rotate:水平旋转,属性值格式为Xdeg。(deg 是“度”的意思)rotate(Xdeg)。X 为正

数时,顺时针旋转;为负数时,逆时针旋转

效果图如下:

3.translate:定位元素,基于XY 轴重新定位元素。translate(Xpx,Ypx)。效果图如下:

4.skew:将元素沿水平方向倾斜变形。skew(Xdeg,Ydeg)。这个比较难表述,想象一下平

行四边形吧。属性值为一个时,x、y 轴参数相同;为两个时,x、y 轴各自倾斜

效果图如下:

5.matrix:矩阵,六个值。

效果图如下:

关于Matrix:

 

2d matrix 提供6 个参数啊a,b,c,d,d,e,f 其基本写法如下:

回顾一下高中数学,或者线性代数,即可知道matrix 计算方法。x 和y 是元

素初始的坐标,x’ 和y’则是通过矩阵变换后得到新的坐标。通过中间的那个

3×3 的变换矩阵,对原先的坐标施加变换,就能得到新的坐标了。依据矩阵变换规则即可得到: x’=ax+cy+e, y’=bx+dy+f。

transform 中translate,scale,rotate,skew 背后实现原理也对应

着matrix 变化:translate(x,y)

一、移动translate

 

移动matrix 参数为:matrix(1,0,0,1,Δx,Δy)(Δx,Δy 分别对应x 和y 轴的增量)。

由此公式可知:

-webkit-transform: translate(100px,100px);即对应着-webkit-transform: matrix(1, 0,0, 1, 100, 100);

 

推算出: x’ = 1*x+0 * y+100 = x+100 , y’ = 0 * x+1 * y+100 = y+100。

 

二、缩放scale

缩放matrix 参数为:matrix(kx*x,0,0,ky*y,0,0)(kx,和ky 分别对应x 和y 轴缩

放比率)。由此公式可知:

-webkit-transform: scale(1.5,1.5);及对应着-webkit-transform: matrix(1.5, 0, 0, 1.5,0, 0);

 

推算出: x’ = 1.5*x+0 * y+0 = 1.5 * x , y’ = 0 * x+1.5 * y+0 =1.5 * y。

三、旋转rotate

旋转matrix 参数为:matrix(cosθ,sinθ,-sinθ,cosθ,0,0),由此可知

-webkit-transform: rotate(45deg);即对应着-webkit-transform: matrix(0.53, 0.85,-0.85, 0.53, 0, 0);(sin(45′)=0.85,cos(45′)=0.53)

推算: x’ = x*cos(45′)-y*sin(45′)+0 = x*cos(45′)-y*sin(45′),y’ =

x*sin(45′)+y*cos(45′)+0 = x*sin(45′)+y*cos(45′)

四、斜切skew

 

斜切matrix 参数为matrix(1,tan(θy),tan(θx),1,0,0),由此可知

-webkit-transform: skew(45deg);即对应着-webkit-transform: matrix(1,0,1,1,0,0);(tan(45′)=1)

 

推算出:x’ = x+y*tan( 45′ )+0 = x+y*tan( 45′ ), y’ = x*tan( 45′ )+y+0 =

x*tan( 45′)+y

四个值可以组合使用,并可以指定基准点使用,transform-origin

3D 动画功能属性

 

处理思路和2D 类似,只是有2D 的矩阵处理扩展到3D 的矩阵处理

3d 矩阵即为透视投影,推算方法与2d 矩阵相类似

3d 变换矩阵代码示例,matrix 变为matrix3d

-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0,1, 0, 0, 0, 0, 1)

rotate3d(x, y, z, angle)

【参数说明】

x,y,z 组成了方向向量(Direction Vector),旋转的方向是从方向向量这个

点指向transition-origin 的顺时针方向

angle 沿着transition-origin ==> V(x,y,z)旋转轴的顺时针方向的旋转

角度

图rotate3d 如何确定旋转轴

由上图来看,V1 为transition-origin 的点的位置,默认为V1(0,0,0),V2 则为

rotate3d(x,y,z,angle)的前三个值组成的点,这样就确定了旋转轴,然后在沿着旋转轴顺时针转动angle 的角度便可。

rotateX(angle) ==> rotate3d(1,0,0,angle)

rotateY(angle) ==> rotate3d(0,1,0,angle)

rotateZ(angle) ==> rotate3d(0,0,1,angle) 即rotate(angle)

类似的原理结合2D 的可以推出其他几个属性的matrix 的变换矩阵参数

二、transition

transiton: porperty duration timing-function delay

property 表示对哪个属性进行过度,duration 表示动画时间,timing-function 表

示通过什么方式进行过渡,delay 表示延时后执行。

p {

-webkit-transition: all .5s ease-in-out 1s;

-o-transition: all .5s ease-in-out 1s;

-moz-transition: all .5s ease-in-out 1s;

transition: all .5s ease-in-out 1s;

}

transition 涉及到的则是另一个数学概念:贝塞尔插值。

transition 的变换函数有linear ease ease-in ease-out ease-in-out 几种,通

常我们尝试使用时能感觉到它们之间稍有不同。

实际上,它们是使用了不同的参数进行三次贝塞尔插值计算的结果。复习一下贝塞尔插值:

一个量(可以是任何矢量或者标量)从一个值到变化到另一个值,如果我们希望它按照一定时间平滑地过渡,就必须要对它进行插值。

最基本的情况,我们认为这个变化是按照时间均匀进行的,这个时候,我们称其为线性插值。而实际上,线性插值不大能满足我们的需要,因此数学上出现了很多其它的插值算法,其中贝塞尔插值法是非常典型的一种。它根据一些变换中的控制点来决定值与时间的关系。

K 次贝塞尔插值算法需要k+1 个控制点,最简单的一次贝塞尔插值就是线性插

值,将时间表示为0 到1 的区间,一次贝塞尔插值公式是:

二次贝塞尔插值有3 个控制点,相当于对P0 和P1,P1 和P2 分别做贝塞尔插

值,再对结果做一次贝塞尔插值计算

三次贝塞尔插值则是两次二次贝塞尔插值的结果在做一次贝塞尔插值:

回到我们的transition,我们要用到的就是三次贝塞尔插值算法了。

把时间认为是0,1 区间,待变换属性也认为是0,1 区间,那么所有的控制函数都

是三次贝塞尔函数:

ease:

ease 函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

linear:

linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

ease-in:

ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

ease-out:

ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

ease-in-out:

ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

cubic-bezier:

 

特定的cubic-bezier 曲线。(x1, y1, x2, y2)四个值特定于曲线上点P1 和点

P2。所有值需在[0, 1]区域内,否则无效。

最后附上各函数图,请自行辨认:

三、animation

 

功能与transition,但是通过transition 功能只能通过指定的属性的开始

值和结束值,然后在这两个属性之间进行平滑过渡,不能实现复杂的动画效果,而animation 则是通过关键帧以及定义关键帧中的元素属性值来实现更为负载的复杂效果。

 

animation: name duration timing-function delay iteration_countdirection;

 

(1) -webkit-animation-name 这个属性的使用必须结合@-webkit-keyframes 一起使用

@-webkit-keyframes fontchange{

0%{font-size:10px;}

30%{font-size:15px;}

100%{font-siez:12px;}

}

百分比的意思就是duration 的百分比,如果没有设置duration 的话,则表示为无穷大

div{ -webkit-animation-name:fontchange;}

(2)-webkit-animation-duration 表示动画持续的时间

(3)-webkit-animation-timing-function 表示动画使用的时间曲线

【语法】: -webkit-animation-timing-function: ease | linear | ease-in | ease-out |

ease-in-out

 

(4)-webkit-animation-delay 表示开始动画之前的延时

【语法】-webkit-animation-delay: delay_time;

(5)-webkit-animation-iteration-count 表示动画要重复几次

【语法】-webkit-animation-iteration-count: times_number;

(6) -webkit-animation-direction 表示动画的方向

【语法】-webkit-animation-direction: normal(默认) | alternate

normal 方向始终向前

alternate 当重复次数为偶数时方向向前,奇数时方向相反

css图像处理与动画的更多相关文章

  1. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  2. 一个纯CSS DIV天气动画图标【转扒的】

    <p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...

  3. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

  4. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  5. 简单的CSS圆形缩放动画

    简单的CSS圆形缩放动画 话不多说鼠标移动上去,看效果吧,效果预览 代码如下: <!DOCTYPE html> <html> <head> <title> ...

  6. 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘

    网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...

  7. animate.css引入实现动画效果

    最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...

  8. How Javascript works (Javascript工作原理) (十三) CSS 和 JS 动画底层原理及如何优化其性能

    个人总结:读完这篇文章需要20分钟. 这是 JavaScript 工作原理的第十三章. 概述 正如你所知,动画在创建令人叹服的网络应用中扮演着一个关键角色.由于用户越来越注重用户体验,商户开始意识到完 ...

  9. 简单CSS实现闪烁动画(+1白话讲解)

    原文:简单CSS实现闪烁动画(+1白话讲解) 本文转载于:猿2048网站⇒https://www.mk2048.com/blog/blog.php?id=icj2chj2ab 背景 本文承接自上文&l ...

随机推荐

  1. Python+selenium之窗口截图

    自动化用例是由程序去执行,因此有时候打印的错误信息并不明确,如果在脚本执行错误的时候能对当前窗口截图保存,那么通过图片就可以非常直观的看出出错的原因.webdriver提供了截图函数get_scree ...

  2. WinForm 公共控件和属性

    Button  按钮 布局 AutoSize 内容超出部分是否扩展到适应尺寸大小 Location  位置坐标 Size   控件大小 行为 Enabled   控件是否启用 visible   控件 ...

  3. linux python升级及全局环境变量设置

    1.下载pythonwget https://www.python.org/ftp/python/3.4.5/Python-3.4.5.tgz 或者去官网下载压缩包 2.安装python3依赖yum ...

  4. java基础—代理(proxy)

    一.代理的概念 动态代理技术是整个java技术中最重要的一个技术,它是学习java框架的基础,不会动态代理技术,那么在学习Spring这些框架时是学不明白的. 动态代理技术就是用来产生一个对象的代理对 ...

  5. 利用ss5服务搭建代理服务器

    利用ss5服务搭建代理服务器 1. 下载ss5-3.8.9-8.tar.gz ###官网下载http://ss5.sourceforge.net/ 2. 安装ss5 yum -y install gc ...

  6. JWT (JSON WEB Token)正确使用场景

    https://www.jianshu.com/p/af8360b83a9f 讲真,别再使用JWT了! ThoughtWorks中国 2017.08.16 08:51* 字数 2882 阅读 7154 ...

  7. postman测试传入json

  8. 02Vs2013常用路径配置

    1.设置头文件路径 项目 -> xxx属性页 -> 配置属性 -> C/C++ -> 常规 -> 附加包含目录. 2.包含 x.lib 库路径 项目 -> xxx属 ...

  9. win10安装pytorch——前面有坑,快跳进去鸭

    嗯!花费了不少时间才把pytorch安装成功.主要原因就是: 清华和中科大的Anaconda国内镜像源关闭了 activate.bat 不是内部或外部命令(这个真实奇怪) 1. 安装过程 可以去Ana ...

  10. 我的Python分析成长之路6

    模块:本质就是.py结尾的文件.从逻辑上组织python代码. 包: 本质就是一个目录,带有__init__.py文件,从逻辑上组织模块. 模块的分类: 1.标准库(内置的模块) 2.开源库(第三方库 ...