css实现震撼表情漫画线动画效果代码-html代码-BFW代码库

css实现震撼表情漫画线动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现震撼表情漫画线动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
.manga-lines {
  --center-x: 50%;
  --center-y: 50%;
  --size-x: 25%;
  --size-y: 25%;
  --speed: 1s;
  /*******/
  --end3: #0000, black 0.50deg 1.75deg, #0000 2.0deg;
  --end2: #0000, black 0.25deg 2.25deg, #0000 2.5deg;
  --end1: #0000, black 0.25deg 1.25deg, #0000 1.5deg;
  position: relative;
  
  &.slow {
    --speed: 1.5s;
  }
  
  &.fast {
    --speed: 0.75s;
  }
  
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  &::before {
    --x: 1.1;
    --y: 1.1;
    --space: 10deg;
    --from: 2deg;
    --width: 0.7deg;
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
      repeating-conic-gradient(from calc(var(--from) * 1.75 * var(--x)) at var(--center-x) var(--center-y), #000 0 var(--width), #0000 0 var(--space)),
      repeating-conic-gradient(from var(--from) at var(--center-x) var(--center-y), #000 0 calc(var(--width) * var(--x)), #0000 0 calc(var(--space) * var(--y) * 2.5)),
      repeating-conic-gradient(from calc(var(--from) * 13) at var(--center-x) var(--center-y), #000 0 calc(var(--width) * var(--x)), #0000 0 calc(var(--space) * var(--y) * 2.5))
      ;
     
    mask: radial-gradient(calc(var(--size-x) * var(--x)) calc(var(--size-y) * var(--y)) at var(--center-x) var(--center-y), #f000 99%, #000);
    animation: moveAfter var(--speed) -0.33s infinite;
  }
  
  &::after {
    --x: 1.1;
    --y: 1.1;
    --space: 10deg;
    --from: 2deg;
    --width: 0.7deg;
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
      repeating-conic-gradient(from var(--from) at var(--center-x) var(--center-y), #000 0 var(--width), #0000 0 var(--space)),
      repeating-conic-gradient(from var(--from) at var(--center-x) var(--center-y), #000 0 calc(va.........完整代码请登录后点击上方下载按钮下载查看