纯CSS人像图片故障摇摆效果

这是一款纯CSS人像图片故障摇摆效果。该特效模拟电视故障效果，使人物头像呈现出左右摇摆的故障动画特效，非常炫酷。

使用方法

HTML代码

<div class="slide" style="--lines: 16">
    <div class="slide__item" style="--i: 0"></div>
    <div class="slide__item" style="--i: 1"></div>
    <div class="slide__item" style="--i: 2"></div>
    <div class="slide__item" style="--i: 3"></div>
    <div class="slide__item" style="--i: 4"></div>
    <div class="slide__item" style="--i: 5"></div>
    <div class="slide__item" style="--i: 6"></div>
    <div class="slide__item" style="--i: 7"></div>
    <div class="slide__item" style="--i: 8"></div>
    <div class="slide__item" style="--i: 9"></div>
    <div class="slide__item" style="--i: 10"></div>
    <div class="slide__item" style="--i: 11"></div>
    <div class="slide__item" style="--i: 12"></div>
    <div class="slide__item" style="--i: 13"></div>
    <div class="slide__item" style="--i: 14"></div>
    <div class="slide__item" style="--i: 15"></div>
</div>
		

CSS代码

@property --factor {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
:root {
  --factor: 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  font-size: 16px;
}

.container {
  background-color: #161616;
  display: flex;
  align-items: center;
  justify-content: center;
    height: 60vh;
}

.slide {
  --lines: 8;
  --slide-height: 16rem;
  --item-height: calc(var(--slide-height) / var(--lines));
  --delay-basis: 0.1s;
  width: var(--slide-height);
  height: var(--slide-height);
  border-radius: 50%;
  background-size: var(--slide-height) var(--slide-height);
  overflow: hidden;
  isolation: isolate;
}
.slide__item {
  height: var(--item-height);
  background-repeat: no-repeat;
  background-position: center calc(var(--i) * var(--item-height) * -1);
  background-size: var(--slide-height) var(--slide-height);
  transition: all 0.3s ease-in-out;
  -webkit-animation: slide calc(2s) ease-in-out calc(var(--delay-basis) * var(--i) * -1) alternate infinite;
          animation: slide calc(2s) ease-in-out calc(var(--delay-basis) * var(--i) * -1) alternate infinite;
}
.slide__item:nth-child(odd) {
  --factor: -1;
}
.slide__item:nth-child(even) {
  --factor: 1;
}
.slide:hover > .slide__item:nth-child(n) {
  --factor: 0.5;
}

@-webkit-keyframes slide {
  from {
    transform: translateX(calc(var(--factor) * var(--item-height) * 1));
  }
  to {
    transform: translateX(calc(var(--factor) * var(--item-height) * -1));
  }
}

@keyframes slide {
  from {
    transform: translateX(calc(var(--factor) * var(--item-height) * 1));
  }
  to {
    transform: translateX(calc(var(--factor) * var(--item-height) * -1));
  }
}
.slide,
.slide__item {
  background-image: 1.png;
}
		

codepen网址：https://codepen.io/chriskirknielsen/pen/WMrdKY