CSS3过渡属性简介_javascript吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：135,513贴子：
CSS3过渡属性简介收藏
transition:all 0.5s ease-out 0s;
javascript 在线咨询领取笔试题目和试听资料!海同科技是您贴心的IT培训机构!上海海同科技:包食宿,零压力,模拟面试,轻松入职百强企业!
这条CSS属性表示元素的属性有所变化时，支持CSS3的浏览器会以先快后慢平滑过渡的形式，延时0秒，耗时0.5秒完成过渡all表示参与过渡的样式是所有，你可以自己定义只允许其中几种参与，一般all就可以了0.5s表示耗时0.5秒，也可以写成500msease-out表示过渡类型为先快后慢，可以省略不写，默认为ease，简单平滑过渡。其他类型参考百度即可0s表示触发过渡后0秒开始过渡，可以省略不写
设置多个属性的缩写模式为完整版transition:color 0.5s ease-out 0s,left 0.5s ease 0s,width 1s ease-in 1s;精简版transition:color 0.5s,left 0.5s,top 1s;极简版transition:all 0.5s;
写到这里都是过渡的前期准备，你可以自己试试这个属性的用法了随便写个divbody,body *{transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;}div{width:80height:80background-color:rgba(0,0,0,0.2);position:left:0top:0}增加一个hoverdiv:hover{height:300px}然后添加点击事件&div id=&d& onclick=&this.style.width=*300px*;&&&/div&自己试试吧
你可以给hover多添加几个属性试试div:hover{height:300width:300left:100top:100background-color:}
或者写个jswindow.onload=function(){
var d=document.getElementsById(*d*);
d.onclick=function(){
d.style.left=*400px*;
d.style.top=*400px*;
d.style.width=*400px*;
d.style.height=*400px*;
setTimout(function(){
d.style.left=*0px*;
d.style.top=*0px*;
d.style.width=*80px*;
d.style.height=*80px*;
或者更高级一点点window.onload=function(){
var d=document.getElementsById(*d*);
d.onclick=function(){
d.style.left=*400px*;
setTimout(function(){d.style.backgroundColor=*red*;},500)
setTimout(function(){d.style.top=*400px*;},1000)
setTimout(function(){d.style.backgroundColor=*#0F0*;},1500)
setTimout(function(){d.style.left=*0px*;},2000)
setTimout(function(){d.style.backgroundColor=*rgba(0,0,0,0.2)*;},500)
setTimout(function(){d.style.top=*0px*;},3000)}好了，你学会使用这个属性了
CSS3接触的还真不多。。。
‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’
df';'''''''''''''''''''''''''''
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或在你成为高手之前千万别承认自己是高手！
——Cosiray
——专攻ASP.NET+JQUERY+AJAX+WEBSERVICE
随笔- 172&
&&&&&&&&&&&
尽管现代浏览器已经支持了众多的CSS3属性，但是大部分设计师和开发人员貌似依然在关注于一些很&主流&的属性，如border-radius、box-shadow或者transform等。它们有良好的文档、很好的测试并且最常用到，所以如果你最近在设计网站，你很难能脱离它们。
但是，隐藏在浏览器的大宝库中是一些高级的、被严重低估的属性，但是它们并没有得到太多的关注。或许它们中的一些应该这样(被无视)，但是其它的属性应该得到更多的认可。最伟大的财富隐藏在Webkit的下面，而且在iPhone、iPad和Android apps的时代，开始了解它们会灰常有用。就连Firefox等使用的Gecko引擎，也提供了一些独特的属性。在本文中，我们将看一下鲜为人知的CSS 2.1和CSS3属性以及它们在现代浏览器中的支持情况。
说明:&对于每个属性，我们这里规定：&WebKit& 即指代使用Webkit内核的浏览器(Safari、Chrome、iPhone、iPad、Android等)，&Gecko&指代采用Gecko内核的浏览器(Firefox等)。然后有的属性是官方&规范的一部分，这意味着更多的浏览器甚至一些古老的浏览器也会支持它们。最后，一个&的标签标明遵守这个标准，被最新的浏览器版本&&比如Firefox 4、Chrome 10、Safari 5、Opera 11.10以及IE9支持的属性。
WebKit特有属性
-webkit-mask
这个属性是相当强大的，所以详细的介绍超出了本文的范畴，它非常值得深入研究，因为它可以在实际应用中为你省掉很多时间。
-webkit-mask让为一个元素添加蒙板成为可能，从而你可以创建任意形状的花样。蒙板可以是CSS3渐变或者半透明的PNG图片。蒙板元素的alpha值为0的时候会覆盖下面的元素，为1的时候会完全显示下面的内容。相关的属性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等，严重依赖来自于background中的语法。更多信息请查看和下面的链接。
background: url(img/image.jpg)
-webkit-mask: url(img/mask.png);
.element2 {
background: url(img/image.jpg)
-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
扩展阅读:&
-webkit-text-stroke
CSS边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。而且，配合使用color: transparent属性，你还可以创建镂空的字体！
为所有的&h1&标题设定一个2px宽的蓝色边框:
h1 {-webkit-text-stroke: 2px blue}
另一个特性是，通过设定1px的透明边框，可以让文字变得平滑:
h2 {-webkit-text-stroke: 1px transparent}
创建红色镂空字体：
-webkit-text-stroke: 4
扩展阅读:&
-webkit-nbsp-mode
换行有时是很棘手的事情：有时你希望文字在适当的地方断行(而不是折行)，有时你又不想这样。一个能控制这个的属性就是-webkit-nbsp-mode，它让你可以改变&空白符的行为，强制文字在它被用到的地方断行。通过设置值为space即可实现。
扩展阅读:&
-webkit-tap-highlight-color
这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。
想要禁用这个高亮，设置颜色的alpha值为0即可。
设置高亮色为50%透明的红色:
-webkit-tap-highlight-color: rgba(255,0,0,0.5);
浏览器支持: 只有iOS(iPhone和iPad).
扩展阅读:&
zoom: reset
通常来说，zoom是一个IE专用的属性。但是webkit也开始支持它了，而且使用值reset，webkit可以实现不错的效果(有趣的是，IE不支持这个值)。它让你重设掉浏览器中正常的缩放行为&&如果某个元素被声明了zoom:reset，页面上的其它元素在用户放大页面的时候都会跟着放大。
注：其实，我们常用来禁用chrome强制字体大小的时候用到的-webkit-text-size-adjust:也是可以实现类似的效果，不同的是，设置该属性的元素内的文字不会被放大/缩小，但是页面上的其它元素则会变化&&神飞
扩展阅读:&
-webkit-margin-collapse
这个属性属于限制级的，但是它还是非常值得关注。通常，两个相邻的元素的margin会折叠起来(collapse)。这意味着第一个元素的底部的边距和第二个元素的头部边距会被合并到一起。
最常见的例子就是两个相邻的&p&元素会共享他们的margin值。想要控制这个表现，我们可以使用-webkit-margin-collapse及其分拆后的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等属性。默认值是collapse，值separate则停止共享margin值，也就是说，第一个元素的底部边距和第二个元素的头部边距会正常叠加。
扩展阅读:&
-webkit-box-reflect
你还记得几乎每个网站都把他们的网站logo或者头部的文字做成倒影的那个年代吗？谢天谢地，那个年代已经过去了，但是如果你要在一些按钮、导航、或者其他UI元素上更好的使用这个技术，-webkit-box-reflect是更好的选择。
这个属性接受above、below、left和right四个关键词，它们设置倒影的方向，它们和一个设置元素和它的倒影建的距离的数字一起使用。同时，蒙板图片也是同样支持的(看上面的-webkit-mask部分，不要搞混了哈)。倒影会自动生成并对布局没有影响。下面的元素只用了CSS，第二个按钮用了-webkit-box-reflect属性。
这个倒影会出现在它的父元素的下面并有5px的间距:
-webkit-box-reflect: below 5
这个倒影会投射到元素的右边，没有间距。然后，一个蒙板将会被应用(url(mask.png)):
-webkit-box-reflect: right 0 url(mask.png);
扩展阅读:&
-webkit-marquee
另一个属性让我们回到美好的从前：那个遍地marquee(跑马灯)的年代。有趣的是这个已经被遗弃的标签反而在现在变的很有用，比如我们在比较小的手机屏幕上切换内容，如果不断行的话文字将不能完全显示。
创建的这个天气的应用很好的使用了它。 (如果你木有看到变换的文字，可以尝试换一个城市来体验。需要使用WebKit内核浏览器)
.marquee {
white-space:
overflow:-webkit-
-webkit-marquee-direction:
-webkit-marquee-speed:
-webkit-marquee-style:
要让marquee工作需要一些前提条件。首先，white-space必须设置为nowrap，这样才能让文字不自动换行，其次，overflow必须设置为-webkit-marquee，宽度也要设置为比文字实际长度小的数值。
剩下的属性确保文字从左边滚动到右边(-webkit-marquee-direction)、来回移动(-webkit-marquee-style)以及以比较低的速度移动(-webkit-marquee-speed)。其它的属性有-webkit-marquee-repetition，用来定义marquee重复的次数，-webkit-marquee-increment, 定义每次递增的速度变化。
注：虽然HTML的marquee标签在XHTML中被抛弃了，但是各浏览器还是支持的，但是有一个问题就是，marquee标签可能会占用比较大的cpu，对其进行了深入的研究，结论是marquee的速度不能太快，而webkit用-webkit-marquee属性是最好的&&神飞。
扩展阅读:&
Gecko特有属性
font-size-adjust
这个有用的CSS3属性目前只有Firefox支持。我们可以用它来设定指定元素的文字大小(font-size)应该相对于小写字母的高度(x-height)而不是大写字母的高度(cap height)。比如，Verdana比同型号的Times字体更清晰，它有着更矮的x-height。为了弥补这个缺陷，我们可以用font-size-adjust属性来纠正后者。
该属性在拥有不同的x-height的字体上非常有用。即便你在小心的使用小号字体，在问题出现时font-size-adjust也能提供解决方案。
如果由于某种原因用户的电脑上没有安装Verdana，那么Arial就会被修正，从而和Verdana有相同的长宽比(0.58)。
font-family:Verdana, Arial, sans-
font-size: 12
font-size-adjust: 0.58;
浏览器支持: Gecko.
扩展阅读:&
image-rendering
n年前，图片并不会被按照其原始大小显示，而是被设计师给缩放掉。取决于缩放的大小和上下文，图片可能会在浏览器中展现的不太好或者干脆就是错掉了的。现在，浏览器有了更好的算法来显示缩放的图片，不过，在你的图片被缩放后完全的控制其表现也是件很赞的事情。
如果你的图片有比较锐的线条并希望他们在缩放后保持它，这个Gecko私有属性就显得特别有用。相关的值是-moz-crisp-edges。同样的算法也用在optimizeSpeed，而auto 和optimizeQuality 定义为标准行为(用可行的最佳质量来缩放元素)。 image-rendering 属性同样可以用于&video& 和&canvas&元素，和用于背景图片一样。这是个CSS3 标准属性，但是目前只有Firefox支持。
值得注意的是，-ms-interpolation-mode: bicubic，尽管它是个IE专有属性。然而，它让Internet Explorer 7 在缩放图片后将其渲染为比较高的质量。由于这个浏览器默认处理的很烂，所以这个属性可能会很有用。
浏览器支持: Gecko.
扩展阅读:&
-moz-border-top-colors
这个属性可以归类为&养眼&。它让你可以在border宽度大于1px的时候为其设置不同的边框颜色。当然-moz-border-bottom-colors, -moz-border-left-colors 和-moz-border-right-colors也是可用的。
不爽的是，没有一个简写的-moz-border-colors 缩写，所以每个边框都要分开设置。同时，border-width要和给到的颜色的数量保持一致，否则，最后的那个颜色值会填充到剩下的宽度。
这个例子中，元素的左右两边边框会是标准的橙色，上下则有种类似渐变的颜色&&红黄蓝三色。
-moz-border-top-colors: red yellow blue;
-moz-border-bottom-colors: red yellow blue;
浏览器支持: Gecko.
扩展阅读:&
-webkit-user-select 和 -moz-user-select
或许你常常不希望用户在你的网站上选择文本，无论是否是出于版权的原因。通常大家会有js来实现，另一个方案就是，将-webkit-user-select 和-moz-user-select 的值设为none。
请谨慎使用这个属性：因为大部分用户是来查看信息的，他们可以复制并存储下来以备将来之用，所以这种方法既无用也无效。如果你禁用了复制粘贴功能，用户还是可以通过查看源文件来获取到他们想要的内容。搞不懂这个属性为什么会被webkit和gecko支持。
浏览器支持: WebKit, Gecko.
扩展阅读:&,&
-webkit-appearance 和 -moz-appearance
你曾经想过将一张图片伪装成单选按钮么？或者，一个输入框看起来像一个复选框？那么现在appearance 出现了。即便你并不想要让一个链接看起来总是像个按钮，下面这个例子也可以让你了解到，只要你愿意就可以做到的：
-webkit-appearance:
-moz-appearance:
浏览器支持: WebKit, Gecko.
扩展阅读:&,&,&,
text-align: -moz-center/-webkit-center
这是一个属性（或者精确来说，是个&属性值&）的存在很让人惊喜啊。要让一个块级元素居中，大家通常将其设置为margin:0 auto。但是，现在你也可以将元素的容器的text-align属性设置为-moz-center 和 -webkit-center。相应的，你也可以通过设置-moz-left、-webkit-left或-moz-right、-webkit-right将元素居左或者居右。
浏览器支持: WebKit, Gecko.
扩展阅读:&
CSS 2.1属性
counter-increment
你是否经常希望你可以让一个有序列表或者一篇文章的所有标题自动编号？不幸的是，目前尚未有CSS3属性支持。但是在CSS 2.1中，counter-increment 提供了一个解决方案。这就意味着它已经出现好些年了，而且在IE8中就已经支持了。
配合:before 伪元素和content 属性，counter-increment可以为所有的HTML标签添加自动的编号。即便是嵌套的编码也是支持的。
要给标题编码，先将计算器重设一下:
body {counter-reset: thecounter}
下面的样式让每一个&h1&标题都有一个&Section&的前缀，然后其后面的数字自动的递增1(这是默认的，可以省略掉)，这里thecounter是计算器的名称:
.counter h1:before {
counter-increment: thecounter 1;
content:"Section"counter(thecounter)":";
对于一个嵌套编码的列表，重设计数器，然后关掉&ol&的自动编码，因为它是无嵌套的:
counter-reset:
list-style-type:
然后，每个&li&设置为自动编号，分割符是一个点(.)，后面跟着一个空格
li:before {
counter-increment:
content: counters(section,".")"";
HTML代码：
&li&item&/li& &!-- 1 --&
&li&item &!-- 2 --&
&li&item&/li& &!-- 1.1 --&
&li&item&/li& &!-- 1.2 --&
&li&item&/li& &!-- 3 --&
浏览器支持: CSS 2.1.，所有的现代浏览器，IE 7+.
扩展阅读:&，
你会因为你的CMS不知道如何正确转换引用符号而纠结么？那么开始使用quotes属性吧。这样你就可以自定义任何符号了。然后你就可以用:before和:after伪元素为任何期望的元素指定引号了，悲催的是，webkit浏览器不支持这个属性&&经测试，chrome 11已经开始支持这个属性了（之前的版本没有测试）。
前面的两个符号决定第一级引用内容的引号，后面的两个用于二级引用，以此类推：
quotes: '&' '&' "&" "&";
下面两行用于为选定元素指定引号:
q:before {content: open-quote}
q:after {content: close-quote}
这样，&p&&q&This is a very &q&nice&/q& quote.&/q&&/p&看起来将会是酱紫的：&This is a very &nice& quote.&
浏览器支持: CSS 2.1.,除了WebKit，IE 7和IE6的所有现代浏览器。不过chrome是支持的。。。
扩展阅读:&
问题：要直接的添加符号，CSS文档必须要设置为UTF-8吗？这是一个很纠结的问题。遗憾的是，我不能给出一个明确的答案。我的经验是，不必要设置什么特定的字符集，然后utf-8字符集可能会出错，因为它显示错掉的字符(比如&&&)。而是用iso-8859-1 字符集，一切就都是正常的。
W3C：&由于上个例子中由&quotes&定义的引号方便的定位在电脑键盘上，高质量的字符则需要不同的10646字符集。&
你或许听说过但是没有记住的CSS3属性
接近尾声，让我们重温一些不太流行的以及不像border-radius和box-shadow那样被广泛需求的CSS3属性。
text-overflow
或许你会常常遇到这个问题：某个容器对于其内的文字来说太小了，然后你不得不用javascript来截断字符串并添加&&&符号以避免文字溢出。
忘掉它吧！采用CSS3和text-overflow: ellipsis，如果文字比它的容器的宽度要长的话，你就可以强制文字以&&&结束它。唯一的要求是设置overflow:hidden。不幸的是，Firefox不支持这个属性，但是貌似在最近的版本中将会提供支持。
width: 100
text-overflow:
浏览器支持: CSS 3，所有浏览器的最新版本，除了Firefox，IE从IE6开始支持，据说Firefox到6.0也会提供支持的&&希望如此吧。
扩展阅读:&
当文字在一个比较窄的容器中时，它的某个部分可能会因为太长而不能正确的换行。比如链接就常常引起问题。如果你不想用overflow: hidden隐藏溢出的文字，那么你就可以设置 word-wrap 为break-word，它可以让字符串在到达容器的宽度限制时换行。
word-wrap: break-
浏览器支持: CSS 3，所有现代浏览器。
扩展阅读:&
如果你在使用Firefox或Chrome，那么你肯定注意到了文本框的右下角默认有个小的手柄，它可以让你调整它们的大小。这个标准的行为由CSS3 属性 resize: both实现。
但是它并不仅限于textarea。它可以用于所有的HTML元素。horizontal 和 vertical 值用于控制调整水平方向还是垂直方向。
请注意：对于display:block元素，如果设置了overflow:visible，resize属性将会无效(这一点原文描述不详&&by 神飞)。
浏览器支持: CSS3, 除了Opera和IE以为的其它最新的浏览器。
扩展阅读:&
background-attachment
当你为一个设置了overflow:auto的元素指定背景图片的时候，当内容太多而出现滚动条后，拖动滚动条就会发现背景图片的位置是固定的，而不是随着滚动条移动。如果你想要背景图片随着内容而滚动，可以设置background-attachment:local。
浏览器支持: CSS 3，除了Firefox以外的所有现代浏览器，Firefox是支持background-attachment属性的，只是.
扩展阅读:&
text-rendering
随着越来越多的网站开始用@font-face来渲染文字，易读性开始被关注了。小号字体上，文字会更容易出现。由于目前还没有CSS属性控制显示在线字体的微妙细节，你可以利用text-rendering来启用&和&。
Gecko 和WebKit 浏览器处理这个属性的方式很不一样。前者默认启用这个特性，而后者，你需要将其设置为optimizeLegibility。
浏览器支持: CSS3, 所有WebKit 和Firefox浏览器.
扩展阅读:&
transform: rotateX/transform: rotateY
如果你已经开始使用CSS3，那么你可能会比较熟悉transform: rotate()，这个在z轴上旋转元素的属性。
但是你是否也知道，它也可以更深入的旋转的(比如，围绕x轴和y轴)？ 这些变形结合-webkit-backface-visibility: hidden会更合适。
如果你鼠标经过这个元素，它将会旋转180&，倒转过来:
div:hover {
transform: rotateY(180deg);
小技巧:如果只是映射一个元素，你可以设置transform为rotateX(180deg) (对应rotateY)或者设置transform 为scaleX(-1) (对应scaleY).
浏览器支持: CSS3, WebKit、firefox、Opera以及IE9
扩展阅读:&，
正如你希望见到的，还有很多未知的很有用的属性。他们中的很多仍然处于试验性阶段并且可能一直这样甚至最终可能会被浏览器摈弃。而有些有望在后续版本中被所有的浏览器支持。
然而，很难判断判断他们中的一些是好是坏，WebKit特有的属性随着iOS和Android的成功显得越来越重要。当然，一些CSS3属性多多少少已经可以使用了。
如果你不喜欢私有属性，你可以将它们视为实验直到可以在代码中实现以增强用户体验。同时，W3C的&同样支持私有属性，它会返回警告而不是错误。
祝你体验快乐！
阅读(...) 评论()总结CSS3变形transform属性
总结CSS3变形transform属性
　　在网页设计中，css被习惯于理解为擅长表现静态样式，动态的元素必须借助于flash或javascript才可以实现，CSS3将来改变这一思维方式。CSS3除了增加很大革命性的创新功能外，还提供了对动画的支持，可以实现旋转，缩放，移动，倾斜和过渡效果等等，这些功能再一次证明了CSS功能的强大和无限潜能。
　　CSS3实现元素变形的基础。来源于新增的transform属性，该元素可用于实现元素的旋转，缩放，移动，倾斜等效果。目前webkit引擎支持-webkit-transform私有属性，Mozilla Geckos引擎支持-moz-transform私有属性，Presto引擎支持-o-transform私有属性，IE浏览器支持-ms-transform私有属性。
　　CSS3 transform都有哪些常用属性？
transform的属性包括：rotate() / skew() / scale() / translate() ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。
　　各个属性的用法：
transform:rotate(angle)：
含义：通过接受一个单位为deg的旋转角度，对指定元素旋转一定的幅度，角度为正时为顺时针。
.demo_transform1{
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg)
transform:skew(angleX,angleY)：
含义：定义元素在二维空间的倾斜变形。angleX,Y表示元素在空间XY轴上的倾斜角度，角度单位为deg。角度为正时为顺时针旋转。若Y省略，说明垂直方向上的倾斜角度默认为0deg。
.demo_transform2{
-webkit-transform:skew(20deg);
-moz-transform:skew(20deg)；
transform:scale(x,y)：
含义：实现元素在二维空间的缩放和翻转，两个参数值用来定义宽和高的缩放比例。x,y取值可谓整数、小数、负数，取值为负时，元素会被翻转。如果y省略，则垂直和水平方向缩放倍数相同。
.demo_transform3{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
transform:translate(dx,dy)：
含义：定义元素相对于原来坐标发生的偏移。xy分别表示元素在水平和垂直方向的位移。
.demo_transform4{
-webkit-transform:translate(120px,0);
-moz-transform:translate(120px,0)
　　transform属性演示点击链接：
我的热门文章
即使是一小步也想与你分享随笔 - 33&
文章 - 0&评论 - 1&trackbacks - 0
例如以下代码的解析
-ms-transform:rotate(7deg);
-moz-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-o-transform:rotate(7deg);
首先transform字母上就是变形，改变的意思。在css3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看css3中transform的旋转rotate/扭曲skew、缩放scale和移动translate
transform: none|&transform-function&[&transform-function&]*
transform:rotate|scale|skew|translate|
none:表示不进么变换；&transform-function&表示一个或多个变换函数，以空格分开；换句话的就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种但这里需要提醒大家的，以往我们叠加效果都是用逗号（","）隔开，但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。
transform属性实现了一些可用svg实现的同样功能。它可用内联元素和块级元素。它允许我们旋转、缩放和移动元素，它有几个属性值参数：matrix.
旋转rotate:
rotate(&angle&):通过指定的角度参数对原元素指定一个2D rotation(2D旋转)，需先有transform-origin属性的定义。transform-origin定义的旋转的基地，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg)
-ms-transform:rotate(7deg);
//-ms代表e内核识别码-moz-transform:rotate(7deg);
//-moz代表火狐内核识别码-webkit-transform:rotate(7deg);
//-webkit代表谷歌内核识别码-o-transform:rotate(7deg);
//-o代表欧朋【opera】内核识别码transform:rotate(7deg);
//统一标识语句。。。最好这句话也写下去，符合w3c标准
使用css3属性时，大部分都要带这些识别前缀，早期点的浏览器才能识别，后来有整合一个js文件的，不写这个也可以网上搜索下这个文件，嵌入页面就好了
阅读(...) 评论()网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
CSS3展现精彩的动画效果 css3的动画属性
破洛洛文章简介：因为CSS3，动画将一切皆有可能。
热火朝天的css3无疑吸引了很多前端开发者的眼球，然而在css3中的动画属性则是新功能中的主打招牌，说到css3的动画属性不得不让人想起这三个属性：TransformpTransitionpAnimation。 transform属性虽然看起来可以实现动画的效果，但本质其实是静态的，说白一点其实就是一个图形的变形工具；而transition属性是一个简单 的动画属性，操作起来非常的简单；在这里主要为大家介绍Animations属性，这是个名副其实的动画属性，虽然官方也没有过多的介绍，只是简要的说明 这个属性是transition属性的扩展，但功能可谓十分的强大，Animations可以定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂 的动画效果。那么Animation可以做出怎样的动画呢？可以这么说吧，只要你有创意，你会折腾，那么将一切皆有可能。
相信大家对这个属性也是比较了解的，所以也不过多的介绍其基础知识。不是很了解的话，可以在网上找一下基础知识，有很多相关的资料可以查阅。
在这里就跟大家说一下一个非常重要的标签：keyframes。动画该怎么动？都全靠它了。keyframes的基本原理类似于flash的时间轴和关键帧，所以可以制作出很丰富的动画出来。看看简单的例子：
@keyframes demos{
from{transform:translate（0，0）;}
20%{transform:translate（20，20）;}
40%{transform:translate（40，0）;}
60%{transform:translate（60，20）;}
80%{transform:translate（80，0）;}
to{transform:translate（100，20）;}
上面的例子设置了一个名为&demos&的动画，其中的from、20%、40%、60%、80%、to分别代表了在不同时间点上所对应的属性效果 （from、to可以用0%和100%来表示，注意的是0%不可以缩写成0）。由此可见，我们可以设置多个时间点的对应属性效果，这样子就极大的丰富了我 们的动画效果。而在任意两个时间点上，Animation会自动计算中间的过渡效果，同时我们也可以通过设置Animation来对时间段进行控制从而达 到高质量的动画。相对比于flash来说，Animation动画属性却毫不逊色，最大的优势是制作简单，仅仅的几行代码，却可以渲染出丰富的动画，这是 flash望尘莫及的。
上面链接是给大家整理一个示例页面，其中的例子一部分是我自己制作的，一部分是来源于网络收集的，旨在为大家展示更多更精彩的动画效果，让大家可以学习的 更多，如果你也有好的idea，欢迎分享给我们，添加到这个页面来，这个示例页面也将会不定期的持续更新，让更多的人都知道，因为CSS3，动画一切皆有 可能。
注：由于示例页面不够完善，所以暂时不提供附件下载。
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：
[][][][][][][][][][]}