其他分享
首页 > 其他分享> > 纯css3发光多边形动画特效

纯css3发光多边形动画特效

作者：互联网

CSS3动效集合：https://www.17sucai.com/pins/tag/5665.html

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Glowing polygons</title>
<style>
  /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
  html {
overflow: hidden;
background: #000;
}
body {
  filter: drop-shadow(0 0 15px #fff);
}
.poly {
  position: absolute;
  color: HSL(var(--hue), 100%, 65%);
  filter: drop-shadow(0 0 15px currentcolor);
  mix-blend-mode: screen;
  animation: pos 6s linear infinite;
}
.poly:before {
  display: block;
  margin: -10em;
  padding: 10em;
  transform: scale(0);
  background: currentcolor;
  clip-path: var(--p0);
  animation: inherit;
  animation-name: poly;
  animation-timing-function: ease-out;
  content: "";
}
.poly:nth-child(n + 1) {
  top: 50vh;
  left: 50vw;
  --x: 0;
  --y: 0;
  --hue: 157;
  --p0: polygon(calc(50%*(1 + -0.15643)) calc(50%*(1 + -0.98769)), calc(50%*(1 + 0.98769)) calc(50%*(1 + -0.15643)), calc(50%*(1 + 0.15643)) calc(50%*(1 + 0.98769)), calc(50%*(1 + -0.98769)) calc(50%*(1 + 0.15643)), calc(50%*(1 + -0.15643)) calc(50%*(1 + -0.98769)), calc(50% + (50% - 50%)*-0.15643) calc(50% + (50% - 50%)*-0.98769), calc(50% + (50% - 50%)*-0.98769) calc(50% + (50% - 50%)*0.15643), calc(50% + (50% - 50%)*0.15643) calc(50% + (50% - 50%)*0.98769), calc(50% + (50% - 50%)*0.98769) calc(50% + (50% - 50%)*-0.15643), calc(50% + (50% - 50%)*-0.15643) calc(50% + (50% - 50%)*-0.98769));
  --p1: polygon(calc(50%*(1 + -0.15643)) calc(50%*(1 + -0.98769)), calc(50%*(1 + 0.98769)) calc(50%*(1 + -0.15643)), calc(50%*(1 + 0.15643)) calc(50%*(1 + 0.98769)), calc(50%*(1 + -0.98769)) calc(50%*(1 + 0.15643)), calc(50%*(1 + -0.15643)) calc(50%*(1 + -0.98769)), calc(50% + (50% - 4px)*-0.15643) calc(50% + (50% - 4px)*-0.98769), calc(50% + (50% - 4px)*-0.98769) calc(50% + (50% - 4px)*0.15643), calc(50% + (50% - 4px)*0.15643) calc(50% + (50% - 4px)*0.98769), calc(50% + (50% - 4px)*0.98769) calc(50% + (50% - 4px)*-0.15643), calc(50% + (50% - 4px)*-0.15643) calc(50% + (50% - 4px)*-0.98769));
}
.poly:nth-child(n + 4) {
  top: 25vh;
  left: 75vw;
  --x: 0;
  --y: 0;
  --hue: 95;
  --p0: polygon(calc(50%*(1 + 0.83867)) calc(50%*(1 + -0.54464)), calc(50%*(1 + 0.77715)) calc(50%*(1 + 0.62932)), calc(50%*(1 + -0.35837)) calc(50%*(1 + 0.93358)), calc(50%*(1 + -0.99863)) calc(50%*(1 + -0.05234)), calc(50%*(1 + -0.25882)) calc(50%*(1 + -0.96593)), calc(50%*(1 + 0.83867)) calc(50%*(1 + -0.54464)), calc(50% + (50% - 50%)*0.83867) calc(50% + (50% - 50%)*-0.54464), calc(50% + (50% - 50%)*-0.25882) calc(50% + (50% - 50%)*-0.96593), calc(50% + (50% - 50%)*-0.99863) calc(50% + (50% - 50%)*-0.05234), calc(50% + (50% - 50%)*-0.35837) calc(50% + (50% - 50%)*0.93358), calc(50% + (50% - 50%)*0.77715) calc(50% + (50% - 50%)*0.62932), calc(50% + (50% - 50%)*0.83867) calc(50% + (50% - 50%)*-0.54464));
  --p1: polygon(calc(50%*(1 + 0.83867)) calc(50%*(1 + -0.54464)), calc(50%*(1 + 0.77715)) calc(50%*(1 + 0.62932)), calc(50%*(1 + -0.35837)) calc(50%*(1 + 0.93358)), calc(50%*(1 + -0.99863)) calc(50%*(1 + -0.05234)), calc(50%*(1 + -0.25882)) calc(50%*(1 + -0.96593)), calc(50%*(1 + 0.83867)) calc(50%*(1 + -0.54464)), calc(50% + (50% - 4px)*0.83867) calc(50% + (50% - 4px)*-0.54464), calc(50% + (50% - 4px)*-0.25882) calc(50% + (50% - 4px)*-0.96593), calc(50% + (50% - 4px)*-0.99863) calc(50% + (50% - 4px)*-0.05234), calc(50% + (50% - 4px)*-0.35837) calc(50% + (50% - 4px)*0.93358), calc(50% + (50% - 4px)*0.77715) calc(50% + (50% - 4px)*0.62932), calc(50% + (50% - 4px)*0.83867) calc(50% + (50% - 4px)*-0.54464));
}
.poly:nth-child(n + 7) {
  top: 75vh;
  left: 25vw;
  --x: 0;
  --y: 0;
  --hue: 266;
  --p0: polygon(calc(50%*(1 + -0.71934)) calc(50%*(1 + 0.69466)), calc(50%*(1 + -0.99756)) calc(50%*(1 + 0.06976)), calc(50%*(1 + -0.80902)) calc(50%*(1 + -0.58779)), calc(50%*(1 + -0.24192)) calc(50%*(1 + -0.9703)), calc(50%*(1 + 0.43837)) calc(50%*(1 + -0.89879)), calc(50%*(1 + 0.91355)) calc(50%*(1 + -0.40674)), calc(50%*(1 + 0.96126)) calc(50%*(1 + 0.27564)), calc(50%*(1 + 0.55919)) calc(50%*(1 + 0.82904)), calc(50%*(1 + -0.10453)) calc(50%*(1 + 0.99452)), calc(50%*(1 + -0.71934)) calc(50%*(1 + 0.69466)), calc(50% + (50% - 50%)*-0.71934) calc(50% + (50% - 50%)*0.69466), calc(50% + (50% - 50%)*-0.10453) calc(50% + (50% - 50%)*0.99452), calc(50% + (50% - 50%)*0.55919) calc(50% + (50% - 50%)*0.82904), calc(50% + (50% - 50%)*0.96126) calc(50% + (50% - 50%)*0.27564), calc(50% + (50% - 50%)*0.91355) calc(50% + (50% - 50%)*-0.40674), calc(50% + (50% - 50%)*0.43837) calc(50% + (50% - 50%)*-0.89879), calc(50% + (50% - 50%)*-0.24192) calc(50% + (50% - 50%)*-0.9703), calc(50% + (50% - 50%)*-0.80902) calc(50% + (50% - 50%)*-0.58779), calc(50% + (50% - 50%)*-0.99756) calc(50% + (50% - 50%)*0.06976), calc(50% + (50% - 50%)*-0.71934) calc(50% + (50% - 50%)*0.69466));
  --p1: polygon(calc(50%*(1 + -0.71934)) calc(50%*(1 + 0.69466)), calc(50%*(1 + -0.99756)) calc(50%*(1 + 0.06976)), calc(50%*(1 + -0.80902)) calc(50%*(1 + -0.58779)), calc(50%*(1 + -0.24192)) calc(50%*(1 + -0.9703)), calc(50%*(1 + 0.43837)) calc(50%*(1 + -0.89879)), calc(50%*(1 + 0.91355)) calc(50%*(1 + -0.40674)), calc(50%*(1 + 0.96126)) calc(50%*(1 + 0.27564)), calc(50%*(1 + 0.55919)) calc(50%*(1 + 0.82904)), calc(50%*(1 + -0.10453)) calc(50%*(1 + 0.99452)), calc(50%*(1 + -0.71934)) calc(50%*(1 + 0.69466)), calc(50% + (50% - 4px)*-0.71934) calc(50% + (50% - 4px)*0.69466), calc(50% + (50% - 4px)*-0.10453) calc(50% + (50% - 4px)*0.99452), calc(50% + (50% - 4px)*0.55919) calc(50% + (50% - 4px)*0.82904), calc(50% + (50% - 4px)*0.96126) calc(50% + (50% - 4px)*0.27564), calc(50% + (50% - 4px)*0.91355) calc(50% + (50% - 4px)*-0.40674), calc(50% + (50% - 4px)*0.43837) calc(50% + (50% - 4px)*-0.89879), calc(50% + (50% - 4px)*-0.24192) calc(50% + (50% - 4px)*-0.9703), calc(50% + (50% - 4px)*-0.80902) calc(50% + (50% - 4px)*-0.58779), calc(50% + (50% - 4px)*-0.99756) calc(50% + (50% - 4px)*0.06976), calc(50% + (50% - 4px)*-0.71934) calc(50% + (50% - 4px)*0.69466));
}
.poly:nth-child(n + 10) {
  top: 39vh;
  left: 5vw;
  --x: 80vw;
  --y: -47vh;
  --hue: 220;
  --p0: polygon(calc(50%*(1 + -0.35837)) calc(50%*(1 + -0.93358)), calc(50%*(1 + 0.62932)) calc(50%*(1 + -0.77715)), calc(50%*(1 + 0.98769)) calc(50%*(1 + 0.15643)), calc(50%*(1 + 0.35837)) calc(50%*(1 + 0.93358)), calc(50%*(1 + -0.62932)) calc(50%*(1 + 0.77715)), calc(50%*(1 + -0.98769)) calc(50%*(1 + -0.15643)), calc(50%*(1 + -0.35837)) calc(50%*(1 + -0.93358)), calc(50% + (50% - 50%)*-0.35837) calc(50% + (50% - 50%)*-0.93358), calc(50% + (50% - 50%)*-0.98769) calc(50% + (50% - 50%)*-0.15643), calc(50% + (50% - 50%)*-0.62932) calc(50% + (50% - 50%)*0.77715), calc(50% + (50% - 50%)*0.35837) calc(50% + (50% - 50%)*0.93358), calc(50% + (50% - 50%)*0.98769) calc(50% + (50% - 50%)*0.15643), calc(50% + (50% - 50%)*0.62932) calc(50% + (50% - 50%)*-0.77715), calc(50% + (50% - 50%)*-0.35837) calc(50% + (50% - 50%)*-0.93358));
  --p1: polygon(calc(50%*(1 + -0.35837)) calc(50%*(1 + -0.93358)), calc(50%*(1 + 0.62932)) calc(50%*(1 + -0.77715)), calc(50%*(1 + 0.98769)) calc(50%*(1 + 0.15643)), calc(50%*(1 + 0.35837)) calc(50%*(1 + 0.93358)), calc(50%*(1 + -0.62932)) calc(50%*(1 + 0.77715)), calc(50%*(1 + -0.98769)) calc(50%*(1 + -0.15643)), calc(50%*(1 + -0.35837)) calc(50%*(1 + -0.93358)), calc(50% + (50% - 4px)*-0.35837) calc(50% + (50% - 4px)*-0.93358), calc(50% + (50% - 4px)*-0.98769) calc(50% + (50% - 4px)*-0.15643), calc(50% + (50% - 4px)*-0.62932) calc(50% + (50% - 4px)*0.77715), calc(50% + (50% - 4px)*0.35837) calc(50% + (50% - 4px)*0.93358), calc(50% + (50% - 4px)*0.98769) calc(50% + (50% - 4px)*0.15643), calc(50% + (50% - 4px)*0.62932) calc(50% + (50% - 4px)*-0.77715), calc(50% + (50% - 4px)*-0.35837) calc(50% + (50% - 4px)*-0.93358));
}
.poly:nth-child(n + 13) {
  top: 73vh;
  left: 85vw;
  --x: -65vw;
  --y: 7vh;
  --hue: 323;
  --p0: polygon(calc(50%*(1 + -0.39073)) calc(50%*(1 + 0.9205)), calc(50%*(1 + -0.92718)) calc(50%*(1 + 0.37461)), calc(50%*(1 + -0.9205)) calc(50%*(1 + -0.39073)), calc(50%*(1 + -0.37461)) calc(50%*(1 + -0.92718)), calc(50%*(1 + 0.39073)) calc(50%*(1 + -0.9205)), calc(50%*(1 + 0.92718)) calc(50%*(1 + -0.37461)), calc(50%*(1 + 0.9205)) calc(50%*(1 + 0.39073)), calc(50%*(1 + 0.37461)) calc(50%*(1 + 0.92718)), calc(50%*(1 + -0.39073)) calc(50%*(1 + 0.9205)), calc(50% + (50% - 50%)*-0.39073) calc(50% + (50% - 50%)*0.9205), calc(50% + (50% - 50%)*0.37461) calc(50% + (50% - 50%)*0.92718), calc(50% + (50% - 50%)*0.9205) calc(50% + (50% - 50%)*0.39073), calc(50% + (50% - 50%)*0.92718) calc(50% + (50% - 50%)*-0.37461), calc(50% + (50% - 50%)*0.39073) calc(50% + (50% - 50%)*-0.9205), calc(50% + (50% - 50%)*-0.37461) calc(50% + (50% - 50%)*-0.92718), calc(50% + (50% - 50%)*-0.9205) calc(50% + (50% - 50%)*-0.39073), calc(50% + (50% - 50%)*-0.92718) calc(50% + (50% - 50%)*0.37461), calc(50% + (50% - 50%)*-0.39073) calc(50% + (50% - 50%)*0.9205));
  --p1: polygon(calc(50%*(1 + -0.39073)) calc(50%*(1 + 0.9205)), calc(50%*(1 + -0.92718)) calc(50%*(1 + 0.37461)), calc(50%*(1 + -0.9205)) calc(50%*(1 + -0.39073)), calc(50%*(1 + -0.37461)) calc(50%*(1 + -0.92718)), calc(50%*(1 + 0.39073)) calc(50%*(1 + -0.9205)), calc(50%*(1 + 0.92718)) calc(50%*(1 + -0.37461)), calc(50%*(1 + 0.9205)) calc(50%*(1 + 0.39073)), calc(50%*(1 + 0.37461)) calc(50%*(1 + 0.92718)), calc(50%*(1 + -0.39073)) calc(50%*(1 + 0.9205)), calc(50% + (50% - 4px)*-0.39073) calc(50% + (50% - 4px)*0.9205), calc(50% + (50% - 4px)*0.37461) calc(50% + (50% - 4px)*0.92718), calc(50% + (50% - 4px)*0.9205) calc(50% + (50% - 4px)*0.39073), calc(50% + (50% - 4px)*0.92718) calc(50% + (50% - 4px)*-0.37461), calc(50% + (50% - 4px)*0.39073) calc(50% + (50% - 4px)*-0.9205), calc(50% + (50% - 4px)*-0.37461) calc(50% + (50% - 4px)*-0.92718), calc(50% + (50% - 4px)*-0.9205) calc(50% + (50% - 4px)*-0.39073), calc(50% + (50% - 4px)*-0.92718) calc(50% + (50% - 4px)*0.37461), calc(50% + (50% - 4px)*-0.39073) calc(50% + (50% - 4px)*0.9205));
}
.poly:nth-child(3n + 1) {
  animation-delay: 0s;
}
.poly:nth-child(3n + 2) {
  animation-delay: -2s;
}
.poly:nth-child(3n + 3) {
  animation-delay: -4s;
}
@keyframes pos {
  to {
    transform: translate(var(--x), var(--y)) rotate(270deg);
  }
}
@keyframes poly {
  25% {
    opacity: .99;
    clip-path: var(--p1);
  }
  75% {
    opacity: 0.99;
  }
  to {
    transform: scale(1);
    opacity: 0;
    clip-path: var(--p1);
  }
}
</style>
</head>
<body>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
</body>
</html>

标签：css3,动画,多边形,--,0.15643,50%,0.98769,calc,4px
来源： https://blog.csdn.net/qq_25741071/article/details/110064173