球滚动网页的制作

滚动页面制作
首先:定义一个div,class为circle
把它变成一个圆
.circle{
background: red;
width: 300px;
height: 300px;
border-radius: 50%;
}
把“滚”文字居中
text-align: center;
line-height: 300px;
color: white;
定义没动之前的圆的状态
position: absolute;
left: 0px;
transform:rotate(0deg);
transition: all 5s;

再定义鼠标覆盖时候的状态
.circle:hover{
left: 1000px;
transform: rotate(360deg);
}
效果图
球滚动网页的制作_第1张图片
代码如下:球滚动网页的制作_第2张图片

你可能感兴趣的:(球滚动网页的制作)