1. 简介
在现代UI设计中，动画是十分重要的一部分。通过添加动画效果，可以增加页面的交互性、吸引用户的注意力，同时也可以提高页面的体验感和用户满意度。CSS3是最受欢迎的添加动画效果的方式之一，因为它可以实现各种复杂的动画效果，并且不需要使用JavaScript或时间线库。本文将介绍如何使用CSS3实现左右伸缩动画效果。
2. 实现步骤
2.1 HTML结构
我们首先需要创建一个HTML结构来容纳动画效果。本例中，我们创建了一个包含两个段落的DIV元素，每个段落都有一个不同的类名：
<div class="box">
<p class="left">左侧内容</p>
<p class="right">右侧内容</p>
</div>
请注意，类名“left”和“right”是用来标识这些段落的，我们将在CSS中使用它们来选择要应用动画效果的元素。
2.2 CSS样式
接下来，我们需要添加一些CSS样式来控制这些元素的显示位置，然后再添加动画效果。以下是所需的CSS代码：
/* 设置box元素的宽度和高度 */
.box {
width: 400px;
height: 100px;
/* 设置box元素的边框和内边距 */
border: 1px solid #ccc;
padding: 20px;
/* 让其内部的元素垂直居中 */
display: flex;
justify-content: space-between;
align-items: center;
}
/* 设置左侧段落的初始位置 */
.left {
position: relative;
left: 0;
opacity: 1;
transition: all 0.3s ease-in-out;
}
/* 设置右侧段落的初始位置 */
.right {
position: relative;
right: 0;
opacity: 1;
transition: all 0.3s ease-in-out;
}
/* 鼠标悬停时，左侧段落向左运动，右侧段落向右运动 */
.box:hover .left {
left: -50px;
opacity: 0.7;
}
.box:hover .right {
right: -50px;
opacity: 0.7;
}
在上面的代码中，我们设置了.box元素的宽度和高度，并将其设置为具有flex属性的元素。这样可以使左侧和右侧段落对准，而不会使它们在垂直方向上对准（即使它们高度不同时也是如此）。接下来，我们将每个段落的初始位置设置为位置0，即没有移动或显示透明度。我们还为每个段落设置了CSS过渡效果，以便在移动时添加动画效果。.
最后，我们使用:hover伪类来选择鼠标悬停在.box元素上时要发生的动画效果。我们使用left属性来控制左侧段落的位置，使用right属性来控制右侧段落的位置。同时，我们使用opacity属性来控制段落的不透明度。在下面的样例中，我们的HTML结构已经创建完成，并且CSS样式已经应用到相应元素上。
3. 示例演示
现在，我们来看一下添加动画效果后的程序实际效果。
左侧内容
右侧内容
将鼠标悬停在程序上以触发左右伸缩动画效果。
4. 总结
CSS3可以让我们轻松地实现各种复杂动画效果，而不需要使用JavaScript或时间线库。在本文中，我们介绍了如何使用CSS3实现一个简单的左右伸缩动画效果。我们使用了:hover伪类和CSS过渡效果来实现这一效果，并在代码注释中对每个步骤进行了解释。请务必在开发自己的应用程序时试着使用这种技术，以增强用户的体验感和满意度。