css实现飞舞的绒毛动画效果-html代码-BFW代码库

css实现飞舞的绒毛动画效果

代码语言：html

所属分类：动画

代码描述：css实现飞舞的绒毛动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background: linear-gradient(5deg, #cab1bd, #e7cfcd);
  background-size: 400% 400%;
  animation: GradientBackground 10s ease infinite;
  margin: 0;
  padding: 0;
}

.fluff {
  position:absolute;
  z-index:20;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: white;
  -webkit-box-shadow: 0px 0px 20px 10px #ffffff;
  box-shadow: 0px 0px 20px 10px #ffffff;
}

[class="fluff 1"] {
  motion-path: path("M0 344s286-182 513 0 854-40 854-40");
  offset-path: path("M0 344s286-182 513 0 854-40 854-40");
  animation: move 20s ease-in-out infinite;
}
[class="fluff 2"] {
  motion-path: path("M0 380s332-123 557-25 809-83 809-83");
  offset-path: path("M0 380s332-123 557-25 809-83 809-83");
  animation: move 15s ease-in-out infinite;
  -webkit-box-shadow: 0px 0px 20px 10px #b5c9c3;
  box-shadow: 0px 0px 20px 10px #b5c9c3;
}
[class="fluff 3"] {
  motion-path: path("M0 416s378-64 602-49 764-127 764-127");
  offset-path: path("M0 416s378-64 602-49 764-127 764-127");
  animation: move 10s ease-in-out infinite;
}
[class="fluff 4"] {
  motion-path: path("M0 452s424-5 646-73 720-170 720-170");
  offset-path: path("M0 452s424-5 646-73 720-170 720-170");
  animation: move 5s ease-in-out infinite;
}
[class="fluff 5"] {
  motion-path: path("M0 488s470 54 691-97 675-214 675-214");
  offset-path: path("M0 488s470 54 691-97 675-214 675-214");
  animation: move  8s ease-in-out infinite;
}
[class="fluff 6"] {
  motion-path: path("M0 524s516 113 736-121 630-258 630-258");
  offset-path: path("M0 524s516 113 736-121 630-258 630-258");
  animation: move 15s ease-in-out infinite;
  -webkit-box-shadow: 0px 0px 20px 10px #cfd8d7;
  box-shadow: 0px 0px 20px 10px #cfd8d7;
}
[class="fluff 7"] {
  motion-path: path("M0 561s562 171 780-146 586-301 5.........完整代码请登录后点击上方下载按钮下载查看