CSS特效（18）——背景色渐变+动画

最新推荐文章于 2024-07-28 20:04:07 发布

weixin_34393428

最新推荐文章于 2024-07-28 20:04:07 发布

阅读量1.5k

点赞数 1

原文链接：http://www.cnblogs.com/janas-luo/p/9605072.html

版权

背景色渐变+动画

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 通过 background-size 模拟渐变动画 */

    div {
      position: relative;
      width: 300px;
      height: 100px;
      margin: 20px auto;
      background: linear-gradient(90deg, #ffc700 0%, #e91e1e 33%, #6f27b0 66%, #00ff88 100%);
      background-position: 100% 0;
      animation: bgSize 5s infinite ease-in-out alternate;

    }

    @keyframes bgSize {
      0% {
        background-size: 300% 100%;
      }
      100% {
        background-size: 100% 100%;
      }
    }

    /* 通过 background-position 模拟渐变动画 */

    p {
      position: relative;
      width: 300px;
      height: 100px;
      margin: 20px auto;
      background: linear-gradient(90deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
      background-size: 200% 100%;
      background-position: 0 0;
      animation: bgposition 2s infinite linear alternate;
    }

    @keyframes bgposition {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: 100% 0;
      }
    }

    /* 通过 transform 模拟渐变动画 */

    ul {
      position: relative;
      overflow: hidden;
      width: 180px;
      height: 180px;
      margin: 40px auto;


    }

    ul::before {
      content: "";
      position: absolute;
      top: -100%;
      left: -100%;
      bottom: -100%;
      right: -100%;
      background: linear-gradient(45deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
      background-size: 100% 100%;
      animation: position 8s infinite linear alternate;
      z-index: -1;
    }

    @keyframes position {
      0% {
        transform: translate(30%, 30%);
      }
      25% {
        transform: translate(30%, -30%);
      }
      50% {
        transform: translate(-30%, -30%);
      }
      75% {
        transform: translate(-30%, 30%);
      }
      100% {
        transform: translate(30%, 30%);
      }
    }
  </style>
</head>

<body>
  <div></div>
  <p></p>
  <ul></ul>
</body>

</html>

转载于:https://www.cnblogs.com/janas-luo/p/9605072.html

weixin_34393428

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS特效（18）——背景色渐变+动画

背景色渐变+动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...
复制链接

扫一扫