用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 资讯/观点 查看内容

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

Rolan 2017-5-19 00:24

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

先看下效果: 

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

它是怎么实现的?

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

mxml:

  1. <view class="sk-wandering-cubes">
  2. <view class="sk-cube sk-cube1"></view>
  3. <view class="sk-cube sk-cube2"></view>

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. .sk-wandering-cubes .sk-cube2 {
  12. -webkit-animation-delay: -0.9s;
  13. animation-delay: -0.9s;
  14. }
  15. @-webkit-keyframes sk-wanderingCube {
  16. 0% {
  17. -webkit-transform: rotate(0deg);
  18. transform: rotate(0deg);
  19. }
  20. 25% {
  21. -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);
  22. transform: translateX(30px) rotate(-90deg) scale(0.5);
  23. }
  24. 50% {
  25. /* Hack to make FF rotate in the right direction */
  26. -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg);
  27. transform: translateX(30px) translateY(30px) rotate(-179deg);
  28. }
  29. 50.1% {
  30. -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);
  31. transform: translateX(30px) translateY(30px) rotate(-180deg);
  32. }
  33. 75% {
  34. -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
  35. transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
  36. }
  37. 100% {
  38. -webkit-transform: rotate(-360deg);
  39. transform: rotate(-360deg);
  40. }
  41. }

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

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

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

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

运行一下,不失所望:

(实际运行效果没有这么快,不知为什么用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. .sk-wandering-cubes .sk-cube2 {
  11. -webkit-animation-delay: -0.6s;
  12. }
  13. .sk-wandering-cubes .sk-cube3 {
  14. -webkit-animation-delay: -1.2s;
  15. }

此外,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属性来控制动画的外观,还使用选择器绑定动画。.

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

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的介绍。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 石桥码农

相关阅读

便民服务

400-8826-226

电话服务热线时间:9:00 - 21:00

关注我们

微信公众号