css3匀速直线运动 |css用.引用

/* CSS3匀速直线运动 */
.box {
position: absolute; /* 定位方式为绝对定位 */
top: 0; /* 元素距离顶部为0 */
left: 0; /* 元素距离左侧为0 */
width: 100px; /* 元素宽度为100px */
height: 100px; /* 元素高度为100px */
background-color: red; /* 元素背景颜色为红色 */
transition: all 2s linear; /* 过渡动画，时间为2s，运动方式为线性 */
}
/* 鼠标移上去时，让方形移动到距离右侧100px的位置 */
.box:hover {
left: 100px;
}

在上面的代码中，大家使用了CSS的过渡动画`transition`来实现匀速直线运动。该动画的具体参数包括过渡的属性名称、时间和运动方式，这些参数的设置可以帮助大家实现特定的运动效果。在这里，大家通过设置`transition`属性的值为`all 2s linear`，让方形在经过2秒的线性移动后到达目标位置。

此外，大家还使用了`position`属性将方形元素定位在了文档的左上角，使用`left`属性来指定方形元素相对于文档左侧的位置。当鼠标移动到方形元素上时，大家通过`hover`伪类来触发元素的位置变化，从而实现匀速直线运动的效果。