百度前端技术学园

# 来给图片添加滤镜

# 课程目标

  • 掌握 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 特效

# 编码二

利用 clip-path 和 CSS 动画，实现如下图所示动画效果

  • 背景是两个图层叠加起来的，一个黑色，一个白色 利用 CSS3 clip-path 属性将背景剪切成斜线拼接效果
  • 利用动画实现文字左右移动效果，并且文字和底部背景使用合适的 CSSdifference混合模式

# 提交

把你的代码提交到 Github ，把 Github 地址提交到作业里，如果有余力的同学，可以学习如何在 Github 中预览你的 HTML 代码，并提交预览地址。

# 总结

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

  • 日期，今天的学习总用时，今天学习的目标是什么，是否达成
  • 哪些东西今天了解得比较透彻，说说自己的理解
  • 哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
  • 哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决

# 相关参考

← CSS 雪碧图 →