[分享]css动画悬浮位置伸缩背景

CSS动画可以帮助我们为网站添加一些生动而有趣的元素，提升用户的体验感，今天我们就来学习一种悬浮位置伸缩背景的CSS动画效果。.box { width: 100px; height: 100px; b...

CSS动画可以帮助我们为网站添加一些生动而有趣的元素，提升用户的体验感，今天我们就来学习一种悬浮位置伸缩背景的CSS动画效果。

.box { 
    width: 100px;
    height: 100px;
    background-color: #ccc;
    position: relative;
    overflow: hidden;
}

.box:hover .bg { 
    transform: translateX(0%);
}

.bg { 
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background-color: #48c6ef;
    transition: all .4s ease-in;
} 

首先，我们需要一个 DIV 容器，它包含两个子元素：要变化的背景和一个元素，其中定义了可见部分的视口（视口为 DIV 容器的大小）和隐藏部分的溢出。

接下来，通过设置元素的伪类选择器 :hover，定义在悬浮状态下背景的移动，这里是用 transform 属性来实现背景移动的动态效果。

最后，定义背景元素的初始位置，宽高和动画效果，这里是用了 Position 属性的 absolute 定位方式，控制背景元素的显示位置; left 属性设置背景默认位置左侧的距离，达到隐藏效果; width 属性设置背景宽度为 DIV 容器的两倍，达到悬浮时滑动的效果; transition 属性设置移动动画的时间和方式。

有了以上的 CSS 代码，我们就可以给网站添加一个有互动性的动画效果了。