评论

小程序中通过CSS实现炫酷的动画效果

小程序中通过CSS实现炫酷的动画效果

1.Animate.css简介

Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库。非常适合强调,首页,滑块和引导注意的提示。它是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。虽然借助Animate.css 能够很方便、快速的制作 CSS3 动画效果,但还是建议看看Animate.css 的代码,也许你能从中学到一些东西。不论是在Web端和小程序内都可以正常使用,详细内容请到官方地址学习。

2.动画效果的实现

在使用过程中,可以根据自己的喜好来改造css代码来达到你想要的效果,文中动图显示可能不是特别直观,建议自己写一遍代码,即利于学习,又能够直观的体会到动画效果。

1.发光的盒子

wxml代码:

<view id="box">I am LetCode!</view>

wxss代码:

@keyframes animated-border {
  0% {
    box-shadow: 0 0 0 0 rgba(255,255,255,0.4);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(255,255,255,0);
  }
}
#box {
  animation: animated-border 1.5s infinite;
  height: 100rpx;
  font-family: Arial;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border: 2px solid;
  border-radius: 10px;
  margin: 100px 15px;
  line-height: 100rpx;
  text-align: center;  
}

2.文字的缩放效果

wxml代码:

<view class="animate_zoomOutDown">关注公众号“Let编程”,有更多分享!</view>

wxss代码:

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate_zoomOutDown {
  animation:2s linear 0s infinite alternate zoomOutDown;
  font-family: Arial;
  font-size: 18px;
  font-weight: bold;
  color: white;
  margin-top: 70px;
  text-align: center;
  margin-top: 15px;
}

3.加载动画

wxml代码:

<view class="load-container load">
  <view class="loader">
  </view>
</view>
<view class="txt">关注公众号“Let编程”,有更多分享!</view>

wxss代码:

    .load-container {
  width: 240px;
  height: 240px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.load .loader {
  color: #ffffff;
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  transform: translateZ(0);
  animation: load 1.7s infinite ease, round 1.7s infinite ease;
}

@keyframes load {
  0% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}
    5%, 95% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}
    10%, 59% { box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;}
    20% { box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;}
    38% { box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;}
    100% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}
}

@keyframes round{
  0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
}

4.抖动的文字

wxml代码:

<view class="shake-slow txt">关注公众号“Let编程”,有更多分享!</view>

wxss代码:

@keyframes shake-slow {
  2% {
    transform: translate(6px, -2px) rotate(3.5deg);
  }

  4% {
    transform: translate(5px, 8px) rotate(-0.5deg);
  }

  6% {
    transform: translate(6px, -3px) rotate(-2.5deg);
  }

  8% {
    transform: translate(4px, -2px) rotate(1.5deg);
  }

  10% {
    transform: translate(-6px, 8px) rotate(-1.5deg);
  }

  12% {
    transform: translate(-5px, 5px) rotate(1.5deg);
  }

  14% {
    transform: translate(4px, 10px) rotate(3.5deg);
  }

  16% {
    transform: translate(0px, 4px) rotate(1.5deg);
  }

  18% {
    transform: translate(-1px, -6px) rotate(-0.5deg);
  }

  20% {
    transform: translate(6px, -9px) rotate(2.5deg);
  }

  22% {
    transform: translate(1px, -5px) rotate(-1.5deg);
  }

  24% {
    transform: translate(-9px, 6px) rotate(-0.5deg);
  }

  26% {
    transform: translate(8px, -2px) rotate(-1.5deg);
  }

  28% {
    transform: translate(2px, -3px) rotate(-2.5deg);
  }

  30% {
    transform: translate(9px, -7px) rotate(-0.5deg);
  }

  32% {
    transform: translate(8px, -6px) rotate(-2.5deg);
  }

  34% {
    transform: translate(-5px, 1px) rotate(3.5deg);
  }

  36% {
    transform: translate(0px, -5px) rotate(2.5deg);
  }

  38% {
    transform: translate(2px, 7px) rotate(-1.5deg);
  }

  40% {
    transform: translate(6px, 3px) rotate(-1.5deg);
  }

  42% {
    transform: translate(1px, -5px) rotate(-1.5deg);
  }

  44% {
    transform: translate(10px, -4px) rotate(-0.5deg);
  }

  46% {
    transform: translate(-2px, 2px) rotate(3.5deg);
  }

  48% {
    transform: translate(3px, 4px) rotate(-0.5deg);
  }

  50% {
    transform: translate(8px, 1px) rotate(-1.5deg);
  }

  52% {
    transform: translate(7px, 4px) rotate(-1.5deg);
  }

  54% {
    transform: translate(10px, 8px) rotate(-1.5deg);
  }

  56% {
    transform: translate(-3px, 0px) rotate(-0.5deg);
  }

  58% {
    transform: translate(0px, -1px) rotate(1.5deg);
  }

  60% {
    transform: translate(6px, 9px) rotate(-1.5deg);
  }

  62% {
    transform: translate(-9px, 8px) rotate(0.5deg);
  }

  64% {
    transform: translate(-6px, 10px) rotate(0.5deg);
  }

  66% {
    transform: translate(7px, 0px) rotate(0.5deg);
  }

  68% {
    transform: translate(3px, 8px) rotate(-0.5deg);
  }

  70% {
    transform: translate(-2px, -9px) rotate(1.5deg);
  }

  72% {
    transform: translate(-6px, 2px) rotate(1.5deg);
  }

  74% {
    transform: translate(-2px, 10px) rotate(-1.5deg);
  }

  76% {
    transform: translate(2px, 8px) rotate(2.5deg);
  }

  78% {
    transform: translate(6px, -2px) rotate(-0.5deg);
  }

  80% {
    transform: translate(6px, 8px) rotate(0.5deg);
  }

  82% {
    transform: translate(10px, 9px) rotate(3.5deg);
  }

  84% {
    transform: translate(-3px, -1px) rotate(3.5deg);
  }

  86% {
    transform: translate(1px, 8px) rotate(-2.5deg);
  }

  88% {
    transform: translate(-5px, -9px) rotate(2.5deg);
  }

  90% {
    transform: translate(2px, 8px) rotate(0.5deg);
  }

  92% {
    transform: translate(0px, -1px) rotate(1.5deg);
  }

  94% {
    transform: translate(-8px, -1px) rotate(0.5deg);
  }

  96% {
    transform: translate(-3px, 8px) rotate(-1.5deg);
  }

  98% {
    transform: translate(4px, 8px) rotate(0.5deg);
  }

  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
}

.shake-slow{
  animation:shake-slow 5s infinite ease-in-out;
}

在实际开发过程中,远不止这些炫酷的动画效果,在互联网迅速的发展状态下,还需要更多的程序员来实现功能需求,因此本文只做简单的介绍,未完待续.....


点赞 7
收藏
评论

1 个评论

  • 舒克
    舒克
    2020-06-06

    好贴,小程序的wx.createAnimation也可以实现很多炫酷的动画

    2020-06-06
    赞同
    回复 1
    • LetCode
      LetCode
      发表于小程序端
      2020-06-06
      好的,有时间试试
      2020-06-06
      回复
登录 后发表内容