文章描述
让用户头像上下浮动,这个特效是一直存在的,不是上下跳动两下就没了,这个是一直有。
教程描述
/*头像特效*/
.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]-子比主题美化-用户头像上下浮动-博客喵](https://bkm.mistora.cc/wp-content/uploads/2025/05/20250501093923564-image-1002x1024.png)
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容