如何平滑地旋转渐变背景css [副本]

zbq4xfa0 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(135)

- 此问题在此处已有答案**：

How to animate more fluently a rotation of a background gradient within element?（3个答案）
How to Animate Gradients using CSS（5个答案）
4天前关闭。
我有一个html代码中的身体渐变背景，我希望它能平滑地旋转。这是我的代码，但它只有2个步骤，没有子步骤。

@keyframes Fond_rotatif {

        0% {
            background: linear-gradient(110deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
        }

        100% {
            background: linear-gradient(135deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
        }
    }

    body {
        background: linear-gradient(135deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
        animation-name: Fond_rotatif;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
    }

你能帮我做好吗？
编辑：这是完整的html脚本：

<html>
<head>
    <meta charset="utf-8">
    <title>Page protégée</title>
</head>
<style>
    @keyframes Fond_rotatif {

        0% {
            background: linear-gradient(110deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
        }

        100% {
            background: linear-gradient(135deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
        }
    }

    body {
        background: linear-gradient(135deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
        animation-name: Fond_rotatif;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
    }

    #box_reponse {
        margin-top: 30px;
        border: 1px solid black;
        border-radius: 10px;
        background-color: #b8b3bad1;
        box-shadow: 15px 15px 20px rgb(62, 62, 62);
        width: max-content;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        padding-bottom: 15px;
        padding-left: 25px;
        padding-right: 25px;

    }

    #Reponse {
        line-height: 35px;
        font-size: larger;
    }
</style>

<body>
    <div id="box_reponse"><span id="Reponse">This is a test</span></div>
</body>
</html>

css

来源：https://stackoverflow.com/questions/75259941/how-to-rotate-smoothly-a-gradient-background-css

1条答案

按热度按时间

omqzjyyz1#

我尝试添加更多的步骤之间的0%和100%，并使用线性和无限的，而不是缓解，例如

@keyframes Fond_rotatif {
    0% {
      background: linear-gradient(110deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
    }
  
    25% {
      background: linear-gradient(125deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
    }
  
    50% {
      background: linear-gradient(135deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
    }
  
    75% {
      background: linear-gradient(145deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
    }
  
    100% {
      background: linear-gradient(155deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
    }
  }

  body {
    background: linear-gradient(135deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
    animation-name: Fond_rotatif;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

赞(0）回复(0）举报 2023-02-01

我来回答

如何平滑地旋转渐变背景css [副本]

1条答案

相关问题

热门标签

最新问答