在css中，可以使用animation属性和@keyframes规则给img图片元素设置上下浮动动画效果来让图案上下浮动；动画的快慢速度可以通过元素高度与animation中的秒数去调整。
本教程操作环境：Windows7系统、HTML5&&CSS3版本，Dell G3电脑。
推荐：css视频教程
css3实现一个上下浮动的动画效果（animation）
CSS
立即学习“前端免费学习笔记（深入）”；
@keyframes movepoint {
25% {
top: 16px
}
100%,
{
top: 50px
}
}
.shade-button-point {
display: inline-block;
position: absolute;
top: 50px;
left: 30%;
animation: movepoint 2s infinite;
-webkit-animation: movepoint 2s infinite;
}HTML
<div style="margin-right:10px;display:inline-block;position:relative"> <button type="button">点我点我快点我</button> @@##@@ </div>
效果图：
更多编程相关知识，请访问：编程教学！！
以上就是css怎么让图案上下浮动的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
731
收藏
