本文为原创,转载请注明出处: cnzt 写在前面:最近写了个3d轮播效果图,在此将思路和过程中遇到的问题都记录下来. 首先,我们下来了解一下perspective和transform都是做什么的. transform -- css3属性,可以对元素进行变换(2d/3d),包括平移translate,旋转rotate,缩放scale,等等(完整取值参考 W3C). perspective -- css3属性,当元素涉及3d变换时,perspective可以定义我们眼睛看到的3d立体效果,即空间感.

1 2   <div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(40deg);"> Css 1 2 <div id="animateTest" style="-webkit-transform: rotateY(40deg) perspective(400px);"> 如果大家不清楚,请听我娓娓道来. CC

以下两行语句有什么区别? Css <div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(40deg);"> Css <div id="animateTest" style="-webkit-transform: rotateY(40deg) perspective(400px);"> 如果大家不清楚,请听我娓

网上找的例子,然后增添了新的东西,在这里展示一下...... 效果图预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的demo页面: 如果对CSS3动画的一些基础概念不是很熟悉,可以参考<CSS3中的动画效果记录>. 一.animate.css库中的相关知识点 从github上面下载下来是一个css文件,文件里面有3000多行代码,大部分的代码还是能看懂的. 但里面的代码还是有很多耐人寻味的地方. 1. 关键帧的选

阴影 主要是shadowOpacity .shadowColor.shadowOffset和shadowRadius四个属性 shadowPath属性 我们已经知道图层阴影并不总是方的,而是从图层内容的形状继承而来.这看上去不错,但是实时计算阴影也是一个非常消耗资源的,尤其是图层有多个子图层,每个图层还有一个有透明效果的寄宿图的时候. 如果你事先知道你的阴影形状会是什么样子的,你可以通过指定一个shadowPath来提高性能.shadowPath是一个CGPathRef类型(一个指向CGPath

之前看到智能社主页的那个骰子样式的钟表,最近研究了一下,虽然没有仔细看他是怎么做的,但是学了css3的动画之后想自己尝试着写一下,用到的原理可能和智能社网站的不太一样,我自己主要用到了css3和js. 程序写到一半,发现只有chrome和ff支持,而用ie11是没有效果的,然后用ie11去打开智能社网页,效果也是没有,调查了一下,应该是transform-style:preserve-3d这个样式在ie11下还不支持,使得对象无法以3d的样式呈现,至于兼容方式,自己还没有花时间研究,所以这个效果

1.CATransaction 事务: UIView有两个方法,+beginAnimations:context:和+commitAnimations,和CATransaction的+begin 和+commit方法类似.实际上在+beginAnimations:context:和+commitAnimations之间所有视图或者图层属性的改变而做的动画都是由于设置了CATransaction的原因. UIView封装动画中的块动画,对做一堆的属性动画在语法上会更加简单,但实质上它们都是在做同样

CGAffineTransform 1.CG的前缀告诉我们,CGAffineTransform类型属于Core Graphics框架,Core Graphics实际上是一个严格意义上的2D绘图API,并且CGAffineTransform仅仅对2D变换有效.实际上UIView的transform属性是一个CGAffineTransform类型,用于在二维空间做旋转,缩放和平移.CGAffineTransform是一个可以和二维空间向量(例如CGPoint)做乘法的3X2的矩阵(见图5.1). U

图层时间 动画的发生是需要持续一段时间的,所以计时对整个概念来说至关重要.在这一章中,我们来看看CAMediaTiming,看看Core Animation是如何跟踪时间的. CAMediaTiming协议 CAMediaTiming协议定义了在一段动画内用来控制逝去时间的属性的集合,CALayer和CAAnimation都实现了这个协议,所以时间可以被任意基于一个图层或者一段动画的类控制. 持续和重复 我们在“显式动画”中简单提到过duration(CAMediaTiming的属性之一),du

圆角 圆角矩形是iOS的一个标志性审美特性.这在iOS的每一个地方都得到了体现,不论是主屏幕图标,还是警告弹框,甚至是文本框.按照这流行程度,你可能会认为一定有不借助Photoshop就能轻易创建圆角举行的方法.恭喜你,猜对了. CALayer有一个叫做conrnerRadius的属性控制着图层角的曲率.它是一个浮点数,默认为0(为0的时候就是直角),但是你可以把它设置成任意值.默认情况下,这个曲率值只影响背景颜色而不影响背景图片或是子图层.不过,如果把masksToBounds设置成YES的话

原文:http://www.cocoachina.com/ios/20150105/10829.html 图层时间和缓冲 图层时间 时间和空间最大的区别在于,时间不能被复用 -- 弗斯特梅里克 在上面两章中,我们探讨了可以用CAAnimation和它的子类实现的多种图层动画.动画的发生是需要持续一段时间的,所以计时对整个概念来说至关重要.在这一章中,我们来看看CAMediaTiming,看看Core Animation是如何跟踪时间的. CAMediaTiming协议 CAMediaTiming

原文: http://www.cocoachina.com/ios/20150104/10816.html 视觉效果和变换 (四)视觉效果 嗯,园和椭圆还不错,但如果是带圆角的矩形呢? 我们现在能做到那样了么? 史蒂芬·乔布斯 我 们在第三章『图层几何学』中讨论了图层的frame,第二章『寄宿图』则讨论了图层的寄宿图.但是图层不仅仅可以是图片或是颜色的容器:还有一系列内建的 特性使得创造美丽优雅的令人深刻的界面元素成为可能.在这一章,我们将会探索一些能够通过使用CALayer属性实现的视觉效果.

1.CSS选择器的优先级!important  > 内联 > id选择器 > 类选择器 > 标签选择器多个类选择器叠加(256)之后的优先级大于一个id选择器!important 用于强调CSS属性具有最高的优先级.IE6不支持这种用法.CSS选择器的种类:1.id选择器(# myid)2.类选择器(.myclassname)3.标签选择器(div, h1, p)4.相邻选择器(h1 + p)5.子选择器(ul > li)6.后代选择器(li a)7.通配符选择器( * )8

图层时间 时间和空间最大的区别在于,时间不能被复用 -- 弗斯特梅里克 在上面两章中,我们探讨了可以用CAAnimation和它的子类实现的多种图层动画.动画的发生是需要持续一段时间的,所以计时对整个概念来说至关重要.在这一章中,我们来看看CAMediaTiming,看看Core Animation是如何跟踪时间的. CAMediaTiming协议 CAMediaTiming 协议定义了在一段动画内用来控制逝去时间的属性的集合,CALayer和CAAnimation都实现了这个协议,所以时间可以

变换 很不幸,没人能告诉你母体是什么,你只能自己体会 -- 骇客帝国 在第四章“可视效果”中,我们研究了一些增强图层和它的内容显示效果的一些技术,在这一章中,我们将要研究可以用来对图层旋转,摆放或者扭曲的CGAffineTransform,以及可以将扁平物体转换成三维空间对象的CATransform3D(而不是仅仅对圆角矩形添加下沉阴影). 仿射变换 在第三章“图层几何学”中,我们使用了UIView的transform属性旋转了钟的指针,但并没有解释背后运作的原理,实际上UIView的trans

  高级动画技巧 配置属性动画或者关键帧动画的方式是多种多样的.需要同时执行多个动画或者顺序执行多个动画的APP,可以通过高级的方式同步这些动画的timing或者将这些动画绑定在一起.我们也可以使用其他类型的动画对象来创建可视化的transitions和别的有趣的动画效果.   过渡动画支持Layer可见性的变化 就像本级标题名字所说一样,一个transition动画对象为Layer创建一个动画性的过渡效果.transistion对象最常用的方法就是以协调的方式让一个Layer动画形式的出现,并

以前看犀牛书收藏和组合别人的库. ; (function () { 'use strict'; if (!Date.now) Date.now = function () { return new Date().getTime(); }; var vendors = ['webkit', 'moz']; for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) { var vp = vendor

static ①元素的位置是在文档正常布局流中的位置. ②设置top right bottom left与z-index无效. ③在未指定position时,static是默认值 以下例子进行说明: .default{ width: 100px; height: 100px; background-color: salmon; top: 20px; left: 20px; } .static{ width: 100px; height: 100px; background-color: yell

repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,box-shadow不会影响到dom结构渲染.(执行动画时,不进行重绘的有opacity,transform) reflow(渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显.

#CAMediaTiming`协议 CAMediaTiming协议定义了在一段动画内用来控制逝去时间的属性的集合,CALayer和CAAnimation都实现了这个协议,所以时间可以被任意基于一个图层或者一段动画的类控制. 持续和重复 我们在第八章“显式动画”中简单提到过duration(CAMediaTiming的属性之一),duration是一个CFTimeInterval的类型(类似于NSTimeInterval的一种双精度浮点类型),对将要进行的动画的一次迭代指定了时间. 这里的一次迭代