HTML+CSS 背景滑动动感动画对角线效果

最新推荐文章于 2024-08-31 09:27:14 发布

耀南.

最新推荐文章于 2024-08-31 09:27:14 发布

阅读量328

点赞数 6

分类专栏：前端好玩炫酷的动画小案例文章标签： css 前端

本文链接：https://blog.csdn.net/YN2000609/article/details/141459228

版权

前端好玩炫酷的动画小案例专栏收录该内容

114 篇文章 11 订阅

订阅专栏

先上效果

（实际上对角动态的，图示静态的而已）

🌟背景不仅仅是页面的衬托，更是传达情感和风格的重要元素。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%，实现了背景渐变在水平方向上的移动效果。