过生日了

      日志   1 条评论

(๑•ૅㅁ•๑)啊 不开心desu
又老了一岁

还有感谢犀利妈妈和麦子爸爸的生日礼物
就酱



利用CSS3 Animations实现简单的动画效果

      文章,网页开发   2 条评论

终于双休日放假了 所以我就粗来搞事儿了...

#手动滑鸡 因为接触时间不长 并不能保证说的都是对的 只算是个人见解 有问题还请指出

首先是兼容性问题 因为Animations是CSS3的新特性 所以兼容性并不算太好(后面你会知道的...)
主流资次该特性的浏览器有:

  1. IE 10(9及9以下不支持 果真是IE⑨啊)
  2. Chrome 23.0 +
  3. Opera 12 +
  4. Firefox 16 +
  5. 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的相同

已经算大功告成了 完整代码如下

1.png

嗯...我已经说过了 打死不用Typecho的代码编辑了
如果有需要的话...自己照着打吧...

如果需要更加详细的参数和教程
自己去翻吧...

Mozilla Developers Network - CSS Animations
Google Developers - Web -Animations

其实 写英文只是想装点...



  1. 1
  2. 2
  3. 3
  4. 4
  5. ...
  6. 6