0
收藏
评论

小程序实现人脸识别动效

采用Css逐帧动画制作的人脸识别动效,使用了100张独立帧来实现,希望对有需要的同学有所帮助

wxml

<view class='voice'></view>

css

.voice {
  display: block;
  width: 212rpx;
  height: 238rpx;
  margin: 0 auto;
  background: url(http://clients-80105.oss-cn-hangzhou.aliyuncs.com/%E8%90%8D%E8%90%8D%E4%BA%BA%E8%84%B8%E8%AF%86%E5%88%AB/voice.png) 0 0 no-repeat;
  background-size: 1272rpx 238rpx;
  animation: step 2s steps(6) infinite;
}

@keyframes step {
  100% {
    background-position: -1272rpx 0;
  }
}
最后一次编辑于  07-31  (未经腾讯允许,不得转载)
复制链接赞 0收藏评论

5 个评论

  • 柠檬茶
    柠檬茶
    07-31

    放相机组件上面可能就没这个效果了

    07-31
    赞同
    回复 2
    • 柠檬茶
      柠檬茶
      07-31
      代码与效果严重不符
      07-31
      赞同
      回复
    • 惠嘉伟-Javey
      惠嘉伟-Javey
      07-31
      茶茶,这个是实现的关键代码,并非所有代码,其余的需要背景就好了。这个代码就是gif的实现代码。这是一个演示demo
      07-31
      赞同
      回复
  • 没有好名字了
    没有好名字了
    07-31

    主要工作量还是ui设计那


    07-31
    赞同
    回复 1
    • 惠嘉伟-Javey
      惠嘉伟-Javey
      07-31
      是的,对于这个效果来说只要UI设计好了,css只是顺水推舟
      07-31
      赞同
      回复