css图像处理与动画
先讨论几个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图像处理与动画的更多相关文章
- 为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
- 一个纯CSS DIV天气动画图标【转扒的】
<p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
- 简单的CSS圆形缩放动画
简单的CSS圆形缩放动画 话不多说鼠标移动上去,看效果吧,效果预览 代码如下: <!DOCTYPE html> <html> <head> <title> ...
- 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘
网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...
- animate.css引入实现动画效果
最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...
- How Javascript works (Javascript工作原理) (十三) CSS 和 JS 动画底层原理及如何优化其性能
个人总结:读完这篇文章需要20分钟. 这是 JavaScript 工作原理的第十三章. 概述 正如你所知,动画在创建令人叹服的网络应用中扮演着一个关键角色.由于用户越来越注重用户体验,商户开始意识到完 ...
- 简单CSS实现闪烁动画(+1白话讲解)
原文:简单CSS实现闪烁动画(+1白话讲解) 本文转载于:猿2048网站⇒https://www.mk2048.com/blog/blog.php?id=icj2chj2ab 背景 本文承接自上文&l ...
随机推荐
- 多线程-Thread-Runnable
一.多线程 1.基本概念 进程:正在运行中的程序,一个进程中至少包含一个线程 线程:进程的任务,执行任务的一个通道,一个进程中可以包含多个线程 2.多线 ...
- MySQL-基本概念
一.Mysql逻辑架构 引用自<高性能Mysql> 二.并发控制 读写锁:读锁是共享的,写锁是排他的,会阻塞其他的写锁和读锁. 锁粒度:表锁.行级锁 三.事务 事务(ACID特性):原子性 ...
- log4cxx安装使用
log4cxx安装使用 log4cxx现在是apache的一个项目,用来记录日志.看名字就知道,是给c++使用的. 环境(在以下2个环境中进行验证测试): gcc (Ubuntu 4.8.4-2ubu ...
- 【Troubleshooting Case】Exchange Server 组件状态应用排错?
在Exchange 2013中,引入了“服务器组件状态”的概念.服务器组件状态从运行环境的角度提供对组成Exchange Server的组件的状态的精细控制. 日常排错时,常常会把Exchange 服 ...
- 挂sqlserver计划,系统自动分配拣货任务
USE [P2WMS_WH43] GO /****** Object: StoredProcedure [dbo].[sp_fru_CalcAllocatePickData] Script Date: ...
- Win10权限问题
通过组策略打开Administrator用户后,Edge.图片查看器等内置程序不能使用,提示“无法使用内置管理员账户打开” 网上的方法: 1.组策略:本地安全策略编辑器——安全设置——本地策略——安全 ...
- hdu 3861 The King’s Problem
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...
- Integer的一个小问题
看面试题的时候看到这道题: public class Demo { public static void main(String[] args) { Integer i1 = 128; Integer ...
- 不喜欢SAP GUI?那试试用Eclipse进行ABAP开发吧
Jerry和SAP成都研究院一些新同事聊天时,谈到ABAP和SAP GUI这个话题.很多新同事在加入SAP成都之前,是做Java和C++开发的,习惯了Eclipse/IntelliJ IDEA/Vis ...
- Python 消息框的处理
在实际系统中,在完成某些操作时会弹出对话框来提示,主要分为"警告消息框","确认消息框","提示消息对话"三种类型的对话框. 1.警告消息框 ...