526互联

用css给坤坤增打篮球加一些灵动效果（ikun忠实粉丝 👻）

发布时间 2023-05-25 13:26:26作者: lwlcode

ikun演示

首先我们拿出珍藏已久的ikun背景图，没有的下载下来，也可以到网上找一个类似的

ikun.gif

新建ikun.html，把下载下来的ikun.gif和ikun.html放在同一个文件夹下

在ikun.html的div里写满ikun，然后加上一些神奇的css。在线预览

ikun.html全部代码

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

<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>
    .ikun {
      width: 400px;
      height: 400px;
      background: url(./ikun.gif) center/cover;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      filter: grayscale(1) contrast(3);
      mix-blend-mode: multiply;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="ikun">
    ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun 
    ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun ikun  
  </div>
</body>

</html>

主要的css属性介绍

  • background: url(./ikun.gif) center/cover;：将 ./ikun.gif这个图片作为元素的背景图像，并使用 "center/cover" 属性将背景图像居中显示并覆盖整个元素。
  • background-clip: text;：将背景限制在文本的区域内，即将背景图像裁剪到与文字相同的形状。
  • -webkit-background-clip: text;：这是 WebKit 浏览器引擎的特定属性，用于在支持的浏览器中将背景限制在文本的区域内。
  • color: transparent;：将文字颜色设为透明，使文字变为不可见。
  • filter: grayscale(1) contrast(3);：应用滤镜效果，首先将图像转为灰度（灰度值为 1），然后增加对比度（对比度值为 3）。
  • mix-blend-mode: multiply;：使用 "multiply" 混合模式，将元素的背景与其下方的内容进行混合，产生一种颜色混合的效果。