先上效果
🌟背景不仅仅是页面的衬托，更是传达情感和风格的重要元素。CSS动画滑动对角线背景效果能够为网页带来独特的视觉动感，引导用户的视线，增强页面的吸引力和表现力。本文将深入探讨如何使用CSS动画来实现这一引人入胜的背景效果，让网页设计更加生动和具有创意
完整代码
以下是完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>滑动对角线背景效果 </title> <style> html { height: 100%; } body { margin: 0; } .bg { animation: slide 3s ease-in-out infinite alternate; background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%); bottom: 0; left: -50%; opacity: .5; position: fixed; right: -50%; top: 0; z-index: -1; } .bg2 { animation-direction: alternate-reverse; animation-duration: 4s; } .bg3 { animation-duration: 5s; } .content { background-color: rgba(255, 255, 255, .8); border-radius: .25em; box-shadow: 0 0 .25em rgba(0, 0, 0, .25); box-sizing: border-box; left: 50%; padding: 10vmin; position: fixed; text-align: center; top: 50%; transform: translate(-50%, -50%); } h1 { font-family: monospace; } @keyframes slide { 0% { transform: translateX(-25%); } 100% { transform: translateX(25%); } } </style> </head> <body> <div class="bg"></div> <div class="bg bg2"></div> <div class="bg bg3"></div> <div class="content"> <h1>Hello world</h1> </div> </body> </html>
🌟 关键技术点如下：
- 背景渐变动画:
.bg类定义了一个固定位置的背景元素，其使用了animation属性来应用名为slide的动画，该动画持续3秒，有一个缓动函数ease-in-out，并且是无限循环的，交替反向执行。- 背景图像是一个线性渐变，从#6c3颜色渐变到#09f颜色，角度为-60度，两个颜色各占50%。
- 背景元素的透明度设置为0.5，并且设置了
z-index为-1，确保它位于其他内容的下方。
- 动画方向和持续时间:
.bg2类通过animation-direction: alternate-reverse;改变了动画的执行方向，并且通过animation-duration: 4s;增加了动画的持续时间。.bg3类通过animation-duration: 5s;进一步改变了动画的持续时间。
- 关键帧动画:
@keyframes slide定义了slide动画的关键帧，动画在0%时将元素沿X轴移动-25%，在100%时将元素沿X轴移动25%，实现了背景渐变在水平方向上的移动效果。
