子比主题美化-用户头像上下浮动-博客喵

文章描述

让用户头像上下浮动，这个特效是一直存在的，不是上下跳动两下就没了，这个是一直有。

教程描述

/*头像特效*/
 .avatar {
  overflow: hidden;
  box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
  transform: translatey(0px);
  -webkit-animation: float 6s ease-in-out infinite !important;
          animation: float 6s ease-in-out infinite !important;
}
@-webkit-keyframes float {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: translatey(0px);
  }
  50% {
    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
    transform: translatey(-20px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: translatey(0px);
  }
}

@keyframes float {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: translatey(0px);
  }
  50% {
    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
    transform: translatey(-20px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: translatey(0px);
  }
}

效果展示

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！

2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！

3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！

4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！

5. 如有链接无法下载、失效或广告，请联系管理员处理！

6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！

文章版权归作者所有，未经允许请勿转载。

THE END