有意思的css3属性：mix-blend-mode: difference

最新推荐文章于 2023-09-25 14:50:45 发布

微笑的鱼_

最新推荐文章于 2023-09-25 14:50:45 发布

阅读量126

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_30907845/article/details/123703797

版权

在这里插入图片描述
文字颜色随背景色改变

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    div {
      height: 100vh;
      background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);
    }
    div::before {
      content: "LOREM IPSUM";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 30px;
      mix-blend-mode: difference;
      animation: move 3s infinite linear alternate;
    }
    @keyframes move {
      0% {
          transform: translate(-30%, -50%);
      }
      100% {
          transform: translate(-70%, -50%);
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

微笑的鱼_

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
有意思的css3属性：mix-blend-mode: difference

文字颜色随背景色改变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt.
复制链接

扫一扫