以下是一些CSS3动画的实际应用案例，展示了如何通过CSS3动画来增强用户体验和提升页面的视觉效果：
导航菜单动画
- 下拉菜单动画：当鼠标悬停在导航栏的菜单项上时，下拉菜单以淡入和向下滑动的动画效果显示，为用户提供清晰的视觉反馈，增强交互性。
nav ul ul {
opacity: 0;
visibility: hidden;
transform: translateY(-20px);
transition: all 0.3s ease;
}
nav ul li:hover > ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
- 侧边栏菜单动画：点击汉堡菜单图标时，侧边栏菜单以从左到右的滑动动画展开，同时菜单中的各项以淡入动画逐个显示，使页面的交互更加生动有趣。
.sidebar {
width: 0;
overflow: hidden;
transition: width 0.3s ease;
}
.sidebar.open {
width: 200px;
}
.sidebar ul li {
opacity: 0;
transform: translateX(-20px);
transition: all 0.3s ease 0.1s;
}
.sidebar.open ul li {
opacity: 1;
transform: translateX(0);
}
图片展示与切换动画
- 图片轮播动画：在图片轮播中，通过CSS3动画实现图片的平滑切换效果。例如，当前图片以淡出动画逐渐消失，同时下一张图片以淡入动画逐渐显示，给用户带来流畅的视觉体验。
.slider img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease;
}
.slider img.active {
opacity: 1;
}
- 图片放大查看动画：当用户点击图片时，图片以放大和淡入的动画效果展示细节，同时背景添加一层半透明的遮罩层，营造出聚焦的效果，让用户更加专注于图片内容。
.image-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
transition: all 0.3s ease;
z-index: 999;
}
.image-popup.show {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.image-popup::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.image-popup.show::before {
opacity: 1;
}
按钮交互动画
- 点击按钮动画：按钮在被点击时，通过改变背景颜色、添加阴影或缩放等动画效果，给予用户即时的视觉反馈，让用户明确操作已经被接收。
button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
transition: all 0.3s ease;
}
button:hover {
background-color: #2980b9;
transform: scale(1.1);
}
button:active {
background-color: #1f618d;
transform: scale(0.9);
}
- 加载按钮动画：当按钮触发一个需要等待的操作时，如提交表单，按钮可以显示一个加载动画，如旋转的图标或进度条，同时按钮变为不可点击状态，让用户知道操作正在进行中。
.loading-button {
position: relative;
}
.loading-button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid white;
border-top-color: transparent;
animation: loading 1s linear infinite;
transform: translate(-50%, -50%);
z-index: -1;
}
@keyframes loading {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
文本动画
- 文字闪烁动画：通过改变文字的透明度或颜色，实现文字的闪烁效果，可用于突出显示重要信息或吸引用户的注意力。
.blinking-text {
animation: blink 1s infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
- 文字滚动动画：使一段文字在水平或垂直方向上滚动显示，可用于展示通知、公告等内容，增加信息的展示效果。
.scroll-text {
white-space: nowrap;
overflow: hidden;
animation: scroll 5s linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
页面过渡动画
- 页面切换动画：在单页面应用中，当用户切换页面时，通过动画实现页面的淡入淡出、滑动或缩放等过渡效果，使页面切换更加自然流畅，提升用户体验。
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.5s ease;
}
.page.active {
opacity: 1;
}
.page-enter {
transform: translateX(100%);
}
.page-enter-active {
transform: translateX(0);
transition: all 0.5s ease;
}
.page-leave {
transform: translateX(0);
}
.page-leave-active {
transform: translateX(-100%);
transition: all 0.5s ease;
}
- 模态框动画：模态框在显示和隐藏时，通过淡入淡出和缩放等动画效果，使其更加平滑地出现和消失，避免了生硬的显示效果，提升了页面的整体美感。
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
transition: all 0.3s ease;
z-index: 9999;
background-color: white;
border-radius: 5px;
padding: 20px;
}
.modal.show {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
这些案例只是CSS3动画应用的一部分，你可以根据具体的设计需求和创意，灵活运用CSS3动画来实现各种独特的视觉效果，为网站或应用增添活力和吸引力。
