利用CSS3 Animations实现简单的动画效果
perm_identityBakaErii query_builderlist文章,网页开发 comment2 条评论
终于双休日放假了 所以我就粗来搞事儿了...
手动滑鸡 因为接触时间不长 并不能保证说的都是对的 只算是个人见解 有问题还请指出
首先是兼容性问题 因为Animations是CSS3的新特性 所以兼容性并不算太好(后面你会知道的...)
主流资次该特性的浏览器有:
- IE 10(9及9以下不支持 果真是IE⑨啊)
- Chrome 23.0 +
- Opera 12 +
- Firefox 16 +
- Safari 5.1 +
然后有一点很有必要(对我)说的特性...不支持内联样式...对于我这种菜鸡真的是很不习惯...
也就是说不能像这样用
<div xxxxxx></div>
接下来就是正文啦
利用这个特性来做一个简单的动画
说白了就是把我头像转起来...
大概就是借个样子
首先我们需要定义一个关键帧
@keyframes 动画名称{
from{
巴拉巴拉
}
to{
巴拉巴拉
}
}
这样子就算定义好了一个关键帧
巴拉巴拉什么的...就是出状态和末状态的说...
这里需要让图片旋转 所以我需要用到的是
-webkit-transform:rotate(0deg);
-webkit-transform:rotate(360deg);
咳咳...请自觉代入
但是...因为某些我不知道的原因...不同的浏览器需要在keyframes前面加关键字....
所以...例如
- Chrome和Safari需要加-webkit-
- Firefox需要加-moz-
- Opera需要加-o-
这是不是也可以算是兼容性不好的表现 #滑鸡
这就算定义了一个关键帧 接下来的就是让它如何动♂起♂来
因为不能使用内联样式 所以我们需要定义一个样式表 代码就是这样
<style>
#roll{
width:225px;
height: 225px;
background-image: url(/photo.png);
background-repeat:no-repeat;
background-size: cover;
border-radius:140px;
这里写animation和keyframes的内容
</style>
这样的话 前期工作都做好了
通过animation关键字来定义和执行动画效果
animation:动画名称 持♂续时间 其他选项;
大概算了下...5秒钟左右转速还不错 所以代码如下
animation:roll 5s linear infinite;
其中linear属性是平滑动画 去掉之后动画执行完毕后会有停顿
而infinite是循环播放 去掉之后转一圈就会停下
依旧是我不知道的原因 animation前面也要加关键字
关键字和前面keyframes的相同
已经算大功告成了 完整代码如下
嗯...我已经说过了 打死不用Typecho的代码编辑了
如果有需要的话...自己照着打吧...
如果需要更加详细的参数和教程
自己去翻吧...
Mozilla Developers Network - CSS Animations
Google Developers - Web -Animations
其实 写英文只是想装点...