[CSS] Houdini CSS to animate linear gradient background

https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Houdini</title>
    <link rel="stylesheet" href="./index.css">
  </head>
  <body>
    <div class="card container">
      <div class="cover">Houdini</div>
    </div>
  </body>
</html>

 

css:

body {
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    position: relative;
    margin: 50px;
    width: 300px;
    height: 600px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cover {
    width: 92%;
    height: 96%;
    background-color: black;
    border-radius: 20px;
    color: red;
    font-size: 2rem;
    display: grid;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@property --direc {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.card {
    /* due to --direc is not a css property, animation cannot be applied to it */
    --direc: 0deg;
    background-image: linear-gradient(var(--direc), #5ddcff, #3c67e3, #4300c2);
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    to {
        --direc: 360deg;
    }
}

 

Key point is we define a css property:

@property --direc {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

Due to it's a css property, and degis number value which can be animated.

posted @ 2024-11-24 19:54  Zhentiw  阅读(41)  评论(0)    收藏  举报