css3动画

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation； Transition：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。但只有两个关键贞。开始，结束。 w3school在线文档说明 http://www.w3school.com.cn/css3/css3_transition.asp 浏览器支持 div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ } Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。 Safari 需要前缀 -webkit-。 注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。 注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。 transition 属性 下面的表格列出了所有的转换属性： 属性 描述 CSS transition 简写属性，用于在一个属性中设置四个过渡属性。 3

现在开始正式学习CSS3，我所学习的知识来源于w3cplus，作者是大漠。我开始写这个博客之前征求了大漠的意见，问能否把w3cplus上学到的知识写到我自己的博客上以加深印象，大漠很快的回复了，说知识是用来分享的。大师风范，乐于分享。我也要认真踏实的学。 原文在这里 http://www.w3cplus.com/content/css3-transform CSS3制作动画的几个属性： 变形(transform) 、 转换(transition) 、 动画(animation) . 这次学习第一个属性—— 变形transform 。 Transform字面上就是变形、改变的意思。在 CSS3 中 transform 主要包括以下5种： 旋转rotate 、 扭曲skew 、 缩放scale 和 移动translate 以及 矩阵变形matrix .下面看css3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现。 从 transform 的语法开始。 transform : none | < transform-function > [ < transform-function > ]* 也就是： transform : rotate | scale | skew | translate | matrix; none

CSS3 @keyframes 规则 如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 浏览器支持 Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。 Chrome 和 Safari 需要前缀 -webkit-。 注释 ：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。 实例 @keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { from {background: red;} to {background: yellow;} } @-o-keyframes myfirst /* Opera */ {

　　这篇文章主要分析css3新特性的典型应用，都是干活，没得水分。 　　　　1.动画属性：animation。 　　　　利用animation可以实现元素的动画效果，他是一个简写属性，用于设置6个动画属性：amination-name（名字)/duration（持续时间）/delay（延迟时间）/timing-function(速度曲线)/iteration-count（播放次数）/direction(是否轮流反向播放动画)。 animation: name duration timing-function delay iteration-count direction; animation-delay - 设置延时，也即从元素加载完成之后到动画序列开始执行的时间。 animation-direction - 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。 允许值：normal(正常顺序), alternate, reverse（反向播放）, alternate-reverse 默认值：normal normal：动画循环播放时，从结束状态 跳回 到起始状态 浏览器对其他值的支持情况不佳，应该慎用。 animation-duration - 设置动画一个周期的时长。 animation-iteration-count - 设置动画重复次数（可以指定 infinite

iPad开发的局限性 在iPad上使用Safari浏览普通网站网页的时候，网页因为太大而导致需要手动放大缩小或者滑动，虽然这种滑动行为在iPad上市之初的各种宣传中被津津乐道，但时间久了我们还是会发现这样做并不方便，给用户带来的感受并不十分好。 不支持Flash 在没有越狱的iPad Safari中，网站的Flash都是无法显示的，但可以通过第三方软件或插件或者浏览器来解决，不过，即使不能显示Flash，你一样能够用HTML5和CSS3实现同样的效果。 没有鼠标光标 这意味着鼠标属性，例如鼠标悬停属性是不可能有的。 你或许可以为这个找到一些变通的办法，但是到你的用户那里这些该如何工作将会是困难的事。 滚动条不能按照预期那样起作用 滚动条不能显示包含了充满过多分区的内容。框架也存在高度和宽度的问题。另外，滚动过程中需要两个手指的手势。（我们将在下文中进行充分的讨论） 不支持CSS固定布局 HTML 元素 position:fixed CSS属性不能正确显示，常常会使得页面停留在第一屏，无法向下翻页、放大缩小。 iPad用户侦测：User Agent(用户代理) 随着移动设备上网的普及，很多网站都会进行客户端浏览器类型侦测，主要是靠User Agent来进行识别，如果侦测到是手机浏览则可能重定向，让用户浏览移动设备专用版本。以往我们所指的移动设备，主要是手机等终端，现在

目录 第一篇、用户交互伪类选择器的用法 第二篇、元素状态选择器 第三篇、结构伪类选择器的用法 第四篇、CSS伪元素的用法 第五篇、border-radius画圆 第六篇、画三角形和对话框 第七篇、画菱形和平行四边形 第八篇、画五角星和六角形 第九篇、CSS画五边形和六边形 第十篇、挑战心形和蛋形 第十一篇、太极图的画法 第十二篇、透明背景的实现 第十三篇、CSS的颜色模式 第十四篇、CSS3线性渐变 第十五篇、CSS3的径向渐变 第十六篇、CSS3的重复性渐变 第十七篇、CSS3盒子阴影效果 第十八篇、CSS3制作缓慢边长的方形 第十九篇、CSS3的transition-timing-function详解 第二十篇、制作天猫首页的类别展示效果 第二十一篇、仿天猫类别过渡效果 第二十二篇、CSS3动画中的@keyframes关键帧 第二十三篇、CSS3动画animation复合属性 第二十四篇、利用CSS3制作Loading加载动画 第二十五篇、Loading动画效果实例2 第二十六篇、CSS3制作发光字、立体字、苹果字体 第二十七篇、CSS3用text-overflow解决文字排版问题 第二十八篇、CSS3新的字体单位rem 第一篇、用户交互伪类 选择器 的用法 :hover 鼠标移入 :link 没有交互 :visited 访问过 :active 鼠标按下不放 <a href="

translate :移动，transform的一个方法 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数： 用法transform: translate(50px, 100px); -ms-transform: translate(50px,100px); -webkit-transform: translate(50px,100px); -o-transform: translate(50px,100px); -moz-transform: translate(50px,100px); transform :变形。改变 CSS3中主要包括 旋转：rotate() 顺时针旋转给定的角度，允许负值 rotate(30deg) 扭曲：skew() 元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）参数：skew(30deg,20deg) 缩放：scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： scale(2,4) 移动：translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离 所有的2D转换方法组合在一起： matrix() 旋转、缩放、移动以及倾斜元素 matrix(scale.x , , scale.y , translate.x,

css3动画的2D、3D转换代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3动画</title> <style type="text/css"> div{width:100px;height:100px;background: rebeccapurple;color:#fff;} .div1{ /*translate:移动(x,y)*/ transform:translate(100px,100px); -webkit-transform: translate(100px,100px);/*safari,chrome*/ -ms-transform: translate(100px,100px);/*IE*/ -o-transform:translate(100px,100px);/*opera*/ -moz-transform: translate(100px,100px);/*firefox*/ } .div2{ /*rotate:旋转(旋转角度edg)*/ transform:rotate(100deg); -webkit-transform:rotate(100deg);/*safari,chrome*/ } .div3{ /*scale:缩放(宽，高)*/

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{width: 50px;height: 120px;margin-top: 500px;margin-left: 500px} .box2{width: 50px;height: 120px;background: black;} .box{ animation: top1 1s ease-out forwards} .box2{ animation: right1 1s ease-in forwards ;} @keyframes top1 { 0%{transform: translateY(0px) ;} 100%{transform: translateY( -200px) ;} } @keyframes right1 { 0%{transform: translateX(0px) rotate(0deg);} 100%{transform: translateX(200px) rotate(90deg);} } </style> </head> <body> <div class="box"> <div class="box2"></div> </div> </body> <

chapter5 CSS3 新性能 （一）圆角边框与阴影 1.border-radius属性 例1 border-top-left-radius:40px 20px ; 两个值分别表示水平方向、垂直方向，内部一个椭圆。 如果只有一个值，就是一个圆。 例2 注意这里的height为50px. border-radius 是25px, 四周都有一个25半径的圆，得到左右半圆的形状。 进一步，如何做出一个圆形？width也为50px即可。 ----------- 补充 W3C 在制定标准的时候，新标准还没定下来，浏览器厂商为了快速加入新属性的支持，需要加前缀。等到W3C新标准确定后，全面支持，去掉前缀。 注意：用上述属性需要加上浏览器的前缀。 代码看起来会很繁琐。在sublime中，可以输入简写 bdrs，进行拓展可以生成标准的代码格式。 2. box-shadow属性 该属性可以做盒子的阴影。 例子 div{ width:300px; height:100px; background-color:#f90; box-shadow:10px 10px 5px #88; } 结果为 （二）文字与文本 1. text-shadow text-shadow: 水平偏移 垂直偏移 阴影大小 颜色 HTML内容为<h1>Web Design</h1> 如果阴影大小被省略，那么默认大小与文字一样。