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

此页面的默认 H1 标题

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

效果展示

代码部署

/*头像特效*/
 .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);
  }
}

 

上一篇 子比主题美化-头像分割特效
下一篇 子比主题美化-文章浏览量超过一定的数量就出现一个热帖图标