[分享]css3手机端悬浮按钮

悬浮按钮是现代手机应用UI中经常出现的一个元素，它可以在用户滑动屏幕时随着页面的滑动而跟随移动，方便用户一键执行操作。在CSS3中，我们可以用一些新的CSS属性和伪元素来实现这个效果。 / 定义按钮样...

悬浮按钮是现代手机应用UI中经常出现的一个元素，它可以在用户滑动屏幕时随着页面的滑动而跟随移动，方便用户一键执行操作。在CSS3中，我们可以用一些新的CSS属性和伪元素来实现这个效果。

 /* 定义按钮样式 */
.button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #F44336;
  color: #FFFFFF;
  font-size: 24px;
  font-weight: bold;
  padding: 15px 20px;
  border-radius: 50%;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  z-index: 9999;
}

/* 定义按钮的悬浮动画 */
.button:hover {
  transform: scale(1.1);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
} 

代码中，我们用了position: fixed来让按钮在屏幕上固定位置，用bottom和right来定义在屏幕边缘的距离。border-radius属性定义按钮为圆形，然后增加了一些阴影效果。用transition属性定义了悬浮动画。当鼠标悬浮在按钮上时，使用:hover伪类触发transfrom来实现按钮的缩放效果。

使用这些属性，我们可以轻松地制作出一个漂亮实用的悬浮按钮。它可以用于一些常见操作的快捷入口，例如返回顶部、刷新页面、打开菜单等。