小程序模板网

微信小程序--几个有趣的css3动画

微信小程序小教程--几个有趣的css3动画

 
 
 

先看下效果: 

除了有点快,动画效果还可以。

它是怎么实现的?

拿第一个双块舞动画研究一下好啦。

mxml:

 

		
  1.  
  2. class="sk-wandering-cubes">
  3. class="sk-cube sk-cube1">
  4. class="sk-cube sk-cube2">
  5.  

css:

 

		
  1. .sk-wandering-cubes .sk-cube {
  2. background-color: #67cf22;
  3. width: 10px;
  4. height: 10px;
  5. position: absolute;
  6. top: 0;
  7. left: 0;
  8. -webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;
  9. animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;
  10. }
  11.  
  12. .sk-wandering-cubes .sk-cube2 {
  13. -webkit-animation-delay: -0.9s;
  14. animation-delay: -0.9s;
  15. }
  16.  
  17. @-webkit-keyframes sk-wanderingCube {
  18. 0% {
  19. -webkit-transform: rotate(0deg);
  20. transform: rotate(0deg);
  21. }
  22.  
  23. 25% {
  24. -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);
  25. transform: translateX(30px) rotate(-90deg) scale(0.5);
  26. }
  27.  
  28. 50% {
  29. /* Hack to make FF rotate in the right direction */
  30. -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg);
  31. transform: translateX(30px) translateY(30px) rotate(-179deg);
  32. }
  33.  
  34. 50.1% {
  35. -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);
  36. transform: translateX(30px) translateY(30px) rotate(-180deg);
  37. }
  38.  
  39. 75% {
  40. -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
  41. transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
  42. }
  43.  
  44. 100% {
  45. -webkit-transform: rotate(-360deg);
  46. transform: rotate(-360deg);
  47. }
  48. }

是用css3动画样式实现的效果。sk-wanderingCube是自定义的动画名称,并非css3预定义的。

如果将两个方块,加到3个,如何?

添加一个sk-cube3,及其对应的新式?

 

		
  1. class="sk-cube sk-cube3">
  2.  
  3. .sk-wandering-cubes .sk-cube3 {
  4. -webkit-animation-delay: -0.45s;
  5. animation-delay: -0.45s;
  6. }

运行一下,不失所望:

(实际运行效果没有这么快,不知为什么用QQ截取动画后就变快了~)

如果把动画改慢一点,让三个方块,平均分布也是可以的,让其在空间上平均分布,即是让它们平均动画时间。

达到这样的效果,修改每桢间隔0.6s就可以了:

 

		
  1. .sk-wandering-cubes .sk-cube {
  2. background-color: #67cf22;
  3. width: 10px;
  4. height: 10px;
  5. position: absolute;
  6. top: 0;
  7. left: 0;
  8. -webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;
  9. }
  10.  
  11. .sk-wandering-cubes .sk-cube2 {
  12. -webkit-animation-delay: -0.6s;
  13. }
  14.  
  15. .sk-wandering-cubes .sk-cube3 {
  16. -webkit-animation-delay: -1.2s;
  17. }

此外,animation-delay是标准名称,-webkit-animation-delay是safafi与chrome支持的名称,其它以-webkit-开头的css样式名是类似的。

如果只保留-webkit-*声明,如上所示。在微信web开发者工具上运行正常,因为它是基于chrome同样的内核渲染的css3样式。在android手机上也可以,亲测。在ios上没有测试,有兴趣的同学不妨测试下。

一般情况下,标准名称与webkit名称是同时定义的。

关于动画的说明

使用@keyframes规则,你可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中,您可以更改CSS样式的设定多次。指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。0%是开头动画,100%是当动画完成。

为了获得最佳的浏览器支持,您应该始终定义为0%和100%的选择器。

注意: 使用animation属性来控制动画的外观,还使用选择器绑定动画。.

绑定动画的语法有些复杂:

 

		
  1. animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值说明animation-name指定要绑定到选择器的关键帧的名称animation-duration动画指定需要多少秒或毫秒完成animation-timing-function设置动画将如何完成一个周期animation-delay设置动画在启动前的延迟间隔。animation-iteration-count定义动画的播放次数。animation-direction指定是否应该轮流反向播放动画。animation-fill-mode规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。animation-play-state指定动画是否正在运行或已暂停。initial设置属性为其默认值。 阅读关于 initial的介绍。inherit从父元素继承属性。 阅读关于 initinherital的介绍。



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18136.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询