css3 悬浮球 |css3 repeat x

/* HTML代码 */
<div class="ball">悬浮球</div>
/* CSS样式 */
.ball {
width: 50px;
height: 50px;
background-color: #f00;
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 50px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
transition: all .3s ease;
}
.ball:hover {
transform: translate(-50%, -50%) scale(1.2);
box-shadow: 0 0 10px rgba(0,0,0,.5);
}

代码解释：

首先是HTML代码，创建一个class为”ball”的div元素，表示悬浮球的样式。

接下来是CSS样式部分，为悬浮球添加各种样式。其中，width和height表示悬浮球的宽度和高度，background-color表示悬浮球的背景颜色，border-radius表示悬浮球的圆角半径，text-align和line-height表示悬浮球内部的文字居中和行高，position:fixed;top:50%;left:50%以及transform:translate(-50%,-50%)表示把悬浮球放在页面中心位置。

添加:hover伪类，当鼠标移动到悬浮球上时触发的效果。transform:translate(-50%,-50%) scale(1.2)表示在页面中心位置基础上缩放1.2倍，box-shadow:0 0 10px rgba(0,0,0,.5)表示悬浮球周围添加阴影效果。

以上就是CSS3悬浮球的简单实现，你可以根据自己的需要修改颜色、大小、位置等样式，以达到更好的效果。