WEB前端教程：来给图片添加滤镜

掌握 clip-path 属性的定义和运用

课程目标

掌握 clip-path 属性的定义和运用
了解图像滤镜和图片叠加各个属性以及用法
复习 CSS3 2D 变形和动画相关内容，了解 CSS 3D 变换。

阅读学习

Clip-path 和 Mask

滤镜和混合模式

Transform 和 Animation

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS3 IMAGE Effects PRACTICE</title>
  </head>
  <body>
    <!-- partial:index.partial.html -->
    <div class="container">
      <!-- 滤镜效果 -->
      <h2>CSS3 Filter Effect</h2>
      <div>
        <a id="sepia"
          ><img src="pic02.jpg" />
          <p>Sepia</p></a
        >
        <a id="grayscale"
          ><img src="pic03.jpg" />
          <p>Grayscale</p></a
        >
      </div>

      <!-- 剪切效果 -->
      <h2>CSS3 Clip-Path Effect</h2>
      <div>
        <a id="clipPath1"
          ><figure><img src="pic02.jpg" /></figure>
          <p>剪切成圆形</p></a
        >
        <a id="clipPath2"
          ><figure><img src="pic03.jpg" /></figure>
          <p>剪切成正方形角形</p></a
        >
      </div>
      <!-- 剪变形果 -->
      <h2>CSS3 Transform Effect</h2>
      <div>
        <a id="zoomIn"
          ><figure><img src="pic02.jpg" /></figure>
          <p>Zoom In</p></a
        >
        <a id="zoomOut"
          ><figure><img src="pic03.jpg" /></figure>
          <p>Zoom Out</p></a
        >
      </div>
      <!-- 叠加效果 -->
      <h2>CSS Mix Blend Mode Effect</h2>
      <div>
        <a
          ><span><h1>Travel</h1></span><img src="pic02.jpg"
        /></a>
        <div>
          <img src="pic03.jpg" />
          <div>
            <h1>Lorem</h1>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
              lorem nunc, sollicitudin a nisi sodales, imperdiet dignissim enim.
              Nam sapien quam
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- partial -->
  </body>
</html>

应用今天学习的 CSS 滤镜，CSS 混合模式，CSS Clip-path，完成如下的图片集效果,以上是 HTML 模板代码

第一行 CSS3 Filter Effect 图片组应用 CSS3 滤镜属性,第一个添加Sepia,第二个添加Grayscale滤镜，当鼠标移进去时，滤镜效果消失
第二行应用 CSS3 Clip-Path Effect 图片组，鼠标移入时，第一个图片向中间剪切成小圆形，第二个图片向中心剪切成小正方形
第三行 CSS3 Transform Effect 图片组应用 CSS3 变形属性，鼠标移入时，第一个图片放大，第二张图片缩小
第四行 CSS Mix Blend Mode Effect 图片组应用第一个图片 CSS3 混合模式属性，表层有一个蓝色层把它盖住了，鼠标移入，底层图片和蓝色图层进柔光混合
第四行 CSS Mix Blend Mode Effect 图片组应用第二个图片 CSS3 混合模式和 CSS 变形属性，表层有一个文字层刚开始反转 90°，鼠标移入，文字层反转和图片层进行difference模式混合
样例中的图片和样式可以自行设定
您不用拘束与题目中的要求，可以尽量去多尝试别的属性，探索这些属性的用法，发挥你的创造力去制作更多新颖的 CSS 特效