评论

小程序实现人脸识别动效

采用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;
  }
}
最后一次编辑于  2019-07-31  
点赞 0
收藏
评论

2 个评论

  • 2019-07-31

    主要工作量还是ui设计那


    2019-07-31
    赞同
    回复 1
    • 大又元-Javey
      大又元-Javey
      2019-07-31
      是的,对于这个效果来说只要UI设计好了,css只是顺水推舟
      2019-07-31
      回复
  • 柠檬茶
    柠檬茶
    2019-07-31

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

    2019-07-31
    赞同
    回复 3
    • 柠檬茶
      柠檬茶
      2019-07-31
      代码与效果严重不符
      2019-07-31
      回复
    • 大又元-Javey
      大又元-Javey
      2019-07-31
      茶茶,这个是实现的关键代码,并非所有代码,其余的需要背景就好了。这个代码就是gif的实现代码。这是一个演示demo
      2019-07-31
      回复
    • lry
      lry
      2019-10-21
      放在相机组件上面在加上onCameraFrame。。。
      2019-10-21
      回复
登录 后发表内容