css实现触角动画效果代码

代码语言:html

所属分类:动画

代码描述:css实现触角动画效果代码

代码标签: 动画 效果

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


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

<head>

  <meta charset="UTF-8">
  

  
<style>
body {
  background: #212121;
  overflow: hidden;
}

i, em {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

em {
  -webkit-transform: translate(-50%, -50%) rotate(calc(var(--e) * 360deg)) translateY(-14vw) rotate(180deg);
          transform: translate(-50%, -50%) rotate(calc(var(--e) * 360deg)) translateY(-14vw) rotate(180deg);
}
em:nth-child(1) {
  --e: 0.125;
  --m: 1;
}
em:nth-child(2) {
  --e: 0.25;
  --m: 0.75;
}
em:nth-child(3) {
  --e: 0.375;
  --m: 0.5;
}
em:nth-child(4) {
  --e: 0.5;
  --m: 0.25;
}
em:nth-child(5) {
  --e: 0.625;
  --m: 0;
}
em.........完整代码请登录后点击上方下载按钮下载查看

网友评论0