[分享]css3怎么过渡定位

CSS3可以通过过渡（transition）来实现定位（）的动态效果，让页面更生动有趣。接下来我们来详细了解一下。/ 第一步：定义初始样式 / .box { : relative; left: 0; ...

CSS3可以通过过渡（transition）来实现定位（position）的动态效果，让页面更生动有趣。接下来我们来详细了解一下。

/* 第一步：定义初始样式 */
.box {
  position: relative;
  left: 0;
  transition: left 1s ease-in-out; /* 过渡时间、过渡效果 */
}

/* 第二步：定义触发过渡的样式 */
.box:hover {
  left: 200px; /* 稍微移动一下 */
} 

如上所示，我们定义了一个名为.box的元素，通过left属性控制其水平方向的位置，初始值为0，切换到:hover状态后移动到200px处。其中，我们用了transition属性来定义了过渡时间和过渡效果，这样其具体的过渡动画就交给了浏览器自行实现。

我们可以通过transition-property、transition-duration、transition-timing-function、transition-delay四个属性来单独控制过渡属性、过渡时间、过渡效果、过渡延迟等细节，以实现更个性化的效果。

/* 定义过渡属性，支持多个同时定义，用逗号隔开 */
transition-property: left, top;

/* 定义过渡时间（1s）、过渡效果（ease-in-out） */
transition: left 1s ease-in-out;

/* 后面两个可以分别定义 */
transition-timing-function: ease-in-out;
transition-delay: 0.5s; 

需要注意的是，不同的属性具有不同的过渡效果，其中最常见的为位置过渡和透明度过渡。不同的效果需要对应不同的属性才能生效。

CSS3的过渡定位为页面增添了不同寻常的动态效果，让用户在浏览页面时更加愉悦。下次你想要让你的网站充满活力时，快来尝试用CSS3的过渡定位吧。