滚动页面制作
首先：定义一个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);
}
效果图
代码如下：