前端内容黑白处理、轮播图、奇妙的头像特效

1、内容黑白处理

（1）filter：滤镜

可以把包裹的区域中每一个像素点，经过固定的算法转换成另一种颜色来呈现

（2）grayscale：灰阶滤镜

取值范围：0~1
取0：原图
去1：完全黑白

filter: grayscale(1)

（3）hue-rotate：阴间滤镜

filter: hue-rotate(45deg);

2、轮播图

代码示例用较原始的方式实现

（1）快速编写标签

div.item*4>a>img[src=./img/$.jpg]

<div class="item"><a href=""><img src="./img/1.jpg" alt=""></a></div>
<div class="item"><a href=""><img src="./img/2.jpg" alt=""></a></div>
<div class="item"><a href=""><img src="./img/3.jpg" alt=""></a></div>
<div class="item"><a href=""><img src="./img/4.jpg" alt=""></a></div>

（2）静态轮播图

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .container {
      width: 500px;
      height: 300px;
      margin: 10px auto;
      overflow: hidden;
      position: relative;
    }

    .carousel {
      width: 100%;
      height: 100%;
      display: flex;
      transition: 0.5s;
      /* css3动画效果 */
    }

    .container .carousel img {
      width: 500px;
      height: 300px;
    }

    .indicator {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      /* css3横向偏移，50%：元素自身的一半 */
      display: flex;
      /* 边框 */
      /* outline: 1px solid #fff; */
    }

    .indicator span {
      width: 20px;
      height: 20px;
      border: 2px solid #c466ef;
      border-radius: 50%;
      margin: 0 3px;
    }

    .indicator span.active {
      background-color: #c466ef;
      border-color: #c466ef;
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 轮播图 -->
    <div class="carousel">
      <div class="item">
        <a href=""><img src="./img/1.jpg" alt="" /></a>
      </div>
      <div class="item">
        <a href=""><img src="./img/2.jpg" alt="" /></a>
      </div>
      <div class="item">
        <a href=""><img src="./img/3.jpg" alt="" /></a>
      </div>
      <div class="item">
        <a href=""><img src="./img/4.jpg" alt="" /></a>
      </div>
    </div>
    <!-- 指示器 -->
    <div class="indicator">
      <span class="active"></span><span></span><span></span><span></span>
    </div>
  </div>
  <script>
    var doms = {
      carousel: document.querySelector(".carousel"),
      indicators: document.querySelectorAll(".indicator span"),
    };

    /**
     * 移动轮播图到第几个板块
     * @param {Number} index 板块的索引
     */
    function moveTo(index) {
      curIndex = index;
      doms.carousel.style.transform = `translateX(-${index}00%)`;
      // 去除当前选中的指示器
      var active = document.querySelector(".indicator span.active");
      active.classList.remove("active");
      // 重新设置要选中的指示器
      doms.indicators[index].classList.add("active");
    }

    // 绑定指示器点击事件
    doms.indicators.forEach(function (item, index) {
      item.onclick = function () {
        moveTo(index);
      };
    });
  </script>
</body>

</html>

（3）定时器轮播

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .container {
      width: 500px;
      height: 300px;
      margin: 10px auto;
      overflow: hidden;
      position: relative;
    }

    .carousel {
      width: 100%;
      height: 100%;
      display: flex;
      transition: 0.5s;
      /* css3动画效果 */
    }

    .container .carousel img {
      width: 500px;
      height: 300px;
    }

    .indicator {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      /* css3横向偏移，50%：元素自身的一半 */
      display: flex;
      /* 边框 */
      /* outline: 1px solid #fff; */
    }

    .indicator span {
      width: 20px;
      height: 20px;
      border: 2px solid #c466ef;
      border-radius: 50%;
      margin: 0 3px;
    }

    .indicator span.active {
      background-color: #c466ef;
      border-color: #c466ef;
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 轮播图 -->
    <div class="carousel">
      <div class="item">
        <a href=""><img src="./img/1.jpg" alt="" /></a>
      </div>
      <div class="item">
        <a href=""><img src="./img/2.jpg" alt="" /></a>
      </div>
      <div class="item">
        <a href=""><img src="./img/3.jpg" alt="" /></a>
      </div>
      <div class="item">
        <a href=""><img src="./img/4.jpg" alt="" /></a>
      </div>
    </div>
    <!-- 指示器 -->
    <div class="indicator">
      <span class="active"></span><span></span><span></span><span></span>
    </div>
  </div>
  <script>
    var doms = {
      carousel: document.querySelector(".carousel"),
      indicators: document.querySelectorAll(".indicator span"),
    };
    var curIndex = 0,
      timer;

    /**
     * 移动轮播图到第几个板块
     * @param {Number} index 板块的索引
     */
    function moveTo(index) {
      curIndex = index;
      doms.carousel.style.transform = `translateX(-${index}00%)`;
      // 去除当前选中的指示器
      var active = document.querySelector(".indicator span.active");
      active.classList.remove("active");
      // 重新设置要选中的指示器
      doms.indicators[index].classList.add("active");
    }

    // 绑定指示器点击事件
    doms.indicators.forEach(function (item, index) {
      item.onclick = function () {
        moveTo(index);
      };
    });

    // 定时器自动轮播
    function autoPlay() {
      timer = setInterval(function () {
        if (curIndex == doms.indicators.length - 1) {
          curIndex = 0;
        } else {
          curIndex++;
        }
        moveTo(curIndex);
      }, 2000);
    }
    autoPlay()
  </script>
</body>

</html>

（4）鼠标移入移出

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .container {
      width: 500px;
      height: 300px;
      margin: 10px auto;
      overflow: hidden;
      position: relative;
    }

    .carousel {
      width: 100%;
      height: 100%;
      display: flex;
      transition: 0.5s;
      /* css3动画效果 */
    }

    .container .carousel img {
      width: 500px;
      height: 300px;
    }

    .indicator {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      /* css3横向偏移，50%：元素自身的一半 */
      display: flex;
      /* 边框 */
      /* outline: 1px solid #fff; */
    }

    .indicator span {
      width: 20px;
      height: 20px;
      border: 2px solid #c466ef;
      border-radius: 50%;
      margin: 0 3px;
    }

    .indicator span.active {
      background-color: #c466ef;
      border-color: #c466ef;
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 轮播图 -->
    <div class="carousel">
      <div class="item">
        <a href=""><img src="./img/1.jpg" alt="" /></a>
      </div>
      <div class="item">
        <a href=""><img src="./img/2.jpg" alt="" /></a>
      </div>
      <div class="item">
        <a href=""><img src="./img/3.jpg" alt="" /></a>
      </div>
      <div class="item">
        <a href=""><img src="./img/4.jpg" alt="" /></a>
      </div>
    </div>
    <!-- 指示器 -->
    <div class="indicator">
      <span class="active"></span><span></span><span></span><span></span>
    </div>
  </div>
  <script>
    var doms = {
      carousel: document.querySelector(".carousel"),
      indicators: document.querySelectorAll(".indicator span"),
    };
    var curIndex = 0,
      timer;

    /**
     * 移动轮播图到第几个板块
     * @param {Number} index 板块的索引
     */
    function moveTo(index) {
      curIndex = index;
      doms.carousel.style.transform = `translateX(-${index}00%)`;
      // 去除当前选中的指示器
      var active = document.querySelector(".indicator span.active");
      active.classList.remove("active");
      // 重新设置要选中的指示器
      doms.indicators[index].classList.add("active");
    }

    // 绑定指示器点击事件
    doms.indicators.forEach(function (item, index) {
      item.onclick = function () {
        moveTo(index);
      };
    });

    // 定时器自动轮播
    function autoPlay() {
      timer = setInterval(function () {
        if (curIndex == doms.indicators.length - 1) {
          curIndex = 0;
        } else {
          curIndex++;
        }
        moveTo(curIndex);
      }, 2000);
    }
    autoPlay()

    doms.carousel.onmouseover = function () {
      clearInterval(timer);
    }
    doms.carousel.onmouseout = function () {
      autoPlay();
    }
  </script>
</body>

</html>

3、奇妙的头像特效

（1）初始化代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-content: center;
      background: #e8e4cc;
      margin-top: -200px;
    }
    img {
      --s: 200px;
      --c1: #c82942;
      --c2: #ecd878;

      width: var(--s);
      height: var(--s);
      cursor: pointer;
      transition: 0.5s;
    }
    img:hover {
      transform: scale(1.35);
    }
  </style>
</head>
<body>
  <div>
    <img src="./img/头像.png" alt="">
  </div>
</body>
</html>

（2）背景、背景边框

①背景渐变

background: radial-gradient(var(--c2), var(--c1));

②配置比例，形成背景边框

没有设置100%：解决背景与背景边框出现锯齿

--b: 5px;

background: radial-gradient(
  circle closest-side, 
  var(--c2) calc(99% - var(--b)), 
  var(--c1) calc(100% - var(--b)) 99%,
  transparent
);

③保持背景不放大

img {
  --s: 200px;
  --c1: #c82942;
  --c2: #ecd878;
  --b: 5px;
  --f: 1;

  transform: scale(var(--f));
  width: var(--s);
  height: var(--s);
  cursor: pointer;
  transition: 0.5s;
  /* ①背景渐变 */
  background: radial-gradient(
    circle closest-side, 
    var(--c2) calc(99% - var(--b)), 
    var(--c1) calc(100% - var(--b)) 99%,
    transparent
  )
  no-repeat center / calc(100% / var(--f));
}

img:hover {
  --f: 1.35;
}

（3）外边框

①绘制外边框

outline: var(--b) solid var(--c1);
border-radius: 0 0 50% 50%;
outline-offset: calc(0px - var(--b));

②外边框内缩

outline-offset: calc((1 / var(--f) - 1) * var(--s) / 2 - var(--b));

③顶部线被遮挡

padding-top
border-radius设置大些
content-box：因为padding-top导致整个背景偏移，所以要加这个属性

background: radial-gradient(
  circle closest-side, 
  var(--c2) calc(99% - var(--b)), 
  var(--c1) calc(100% - var(--b)) 99%,
  transparent
)
content-box no-repeat center / calc(100% / var(--f));
outline: var(--b) solid var(--c1);
border-radius: 0 0 999px 999px;
outline-offset: calc((1 / var(--f) - 1) * var(--s) / 2 - var(--b));
padding-top: calc(var(--s) / 5);

（4）蒙层

①蒙层一

--bgOption: content-box no-repeat center / calc(100% / var(--f));

background: radial-gradient(
  circle closest-side, 
  var(--c2) calc(99% - var(--b)), 
  var(--c1) calc(100% - var(--b)) 99%,
  transparent
) var(--bgOption);
mask: radial-gradient(
  circle closest-side, 
  #000 99%,
  transparent
) var(--bgOption);

②蒙层二

mask: linear-gradient(#000 0 0) no-repeat 50% calc(10px - (1 / var(--f) - 1) * var(--s) / 2 - var(--b)) / calc(100% / var(--f) - 3 * var(--b)) 50%,radial-gradient(
  circle closest-side, 
  #000 99%,
  transparent
) var(--bgOption);