CSS3中的动画效果-Day72_html/css_WEB-ITnose

还记得么，在前面也曾实现过“只用css让div动起来”，还记得当时是怎么实现的么，是的， transition ，针对的也比较局限，只有旋转角度啊，长宽啊之类的，所以说，与其说是动起来，倒真不如说成是过渡，当然它还有一个局限性，只有当鼠标放上后才可以触发，只是一个样式变成另一个样式，变化也比较单调，而真正的实现动画效果，css3中还有一个非常有效的方法： @keyframes 。

首先，要知道它的规范和用法

还记得transition的用法么：在初始的样式中加入div{transition：width（height、transform） 5s；width：100px；}，然后再div：hover{width：300px}，是这样来实现过渡效果的，那么动画又该如何呢？

这里动画则是先描绘出动画的整体效果，然后对于实现动画的对象进行绑定

这里用个修改于w3cschool中的例子进行记录：

@keyframes myfirst{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;transform:rotate(100deg);}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}@-moz-keyframes myfirst /* Firefox */{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;transform:rotate(100deg);}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}@-webkit-keyframes myfirst /* Safari 和 Chrome */{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;transform:rotate(100deg);}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}@-o-keyframes myfirst /* Opera */{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0pxl;transform:rotate(100deg);}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}

这样再找一个对象进行绑定，而这个对象你发现一个什么问题了么，left和top来描绘距离啊，肯定是绝对位置嘛，所以来写一下html部分

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did105361

更新时间：2022-11-17 阅读：28次