css实现点状组合开花动画效果代码

代码语言:html

所属分类:动画

代码描述:css实现点状组合开花动画效果代码

代码标签: 组合 开花 动画 效果

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        #btn--yp {
          box-sizing: content-box;
          position: fixed;
          z-index: 9;
          bottom: 1em;
          right: 1em;
          border: solid 1em transparent;
          width: 4.625em;
          height: 3.25em;
        
          font: 16px/1.25 trebuchet ms, sans-serif;
          text-indent: 200vw;
          text-shadow: none;
          filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0);
          transition: 0.5s;
          white-space: nowrap;
        }
        #btn--yp:before {
          box-sizing: inherit;
          position: absolute;
          left: 0;
          bottom: 100%;
          margin: 1em -0.5em;
          padding: 0.5em;
          width: 100%;
          border-radius: 5px;
          background: #e8e0e0;
          color: #000;
          text-align: center;
          text-decoration: none;
          text-indent: 0vw;
          white-space: normal;
          animation: float 1s ease-in-out infinite alternate;
          content: attr(data-txt);
        }
        #btn--yp:hover, #btn--yp:focus {
          outline: none;
          filter: grayscale(0) drop-shadow(0 0 1px crimson);
        }
        
        @keyframes float {
          to {
            transform: translateY(0.75em);
          }
        }
        body {
          display: grid;
          overflow: hidden;
          margin: 0;
          height: 100vh;
          background: #262626;
        }
        
        .ball {
          --f: calc(var(--i)/var(--n-rings));
          --dif: calc(var(--k) - .5*var(--n-balls));
          --abs: max(var(--dif), -1*var(--dif));
          grid-area: 1/1;
          place-self: center;
          padding: 0.375em;
          border-radius: 50%;
          --pos:
          	rotate(calc(var(--j)/var(--n-segms)*1turn))
          	translate(calc(var(--n-balls)*0.5625em/var(--tan)),
          						calc(var(--dif)*1.125em));
          transform: scale(0.5) var(--pos);
          background: hsl(calc(180 + var(--f)*120), 85%, 65%);
          mix-blend-mode: screen;
          animation: a 3s ease-in-out calc((var(--f) + var(--abs)/var(--n-balls) - 2)*3s) infinite alternate;
        }
        
        @keyframes a {
          to {
            transform: var(--pos);
          }
        }
    </style>


</head>

<body style="--n-rings: 9; --n-segms: 6; --n-balls: 18; --tan: 0.577">
    <style>
        .ball:nth-of-type(n + 1) { --i: 0 }.ball:nth-of-type(n + 109) { --i: 1 }.ball:nth-of-type(n + 217) { --i: 2 }.ball:nth-of-type(n + 325) { --i: 3 }.ball:nth-of-type(n + 433) { --i: 4 }.ball:nth-of-type(n + 541) { --i: 5 }.ball:nth-of-type(n + 649) { --i: 6 }.ball:nth-of-type(n + 757) { --i: 7 }.ball:nth-of-type(n + 865) { --i: 8 }.ball:nth-of-type(n + 1):nth-of-type(-n + 18),.ball:nth-of-type(n + 109):nth-of-type(-n + 126),.ball:nth-of-type(n + 217):nth-of-type(-n + 234),.ball:nth-of-type(n + 325):nth-of-type(-n + 342),.ball:nth-of-type(n + 433):nth-of-type(-n + 450),.ball:nth-of-type(n + 541):nth-of-type(-n + 558),.ball:nth-of-type(n + 649):nth-of-type(-n + 666),.ball:nth-of-type(n + 757):nth-of-type(-n + 774),.ball:nth-of-type(n + 865):nth-of-type(-n + 882) { --j: 0 }.ball:nth-of-type(n + 19):nth-of-type(-n + 36),.ball:nth-of-type(n + 127):nth-of-type(-n + 144),.ball:nth-of-type(n + 235):nth-of-type(-n + 252),.ball:nth-of-type(n + 343):nth-of-type(-n + 360),.ball:nth-of-type(n + 451):nth-of-type(-n + 468),.ball:nth-of-type(n + 559):nth-of-type(-n + 576),.ball:nth-of-type(n + 667):nth-of-type(-n + 684),.ball:nth-of-type(n + 775):nth-of-type(-n + 792),.ball:nth-of-type(n + 883):nth-of-type(-n + 900) { --j: 1 }.ball:nth-of-type(n + 37):nth-of-type(-n + 54),.ball:nth-of-type(n + 145):nth-of-type(-n + 162),.ball:nth-of-type(n + 253):nth-of-type(-n + 270),.ball:nth-of-type(n + 361):nth-of-type(-n + 378),.ball:nth-of-type(n + 469):nth-of-type(-n + 486),.ball:nth-of-type(n + 577):nth-of-type(-n + 594),.ball:nth-of-type(n + 685):nth-of-type(-n + 702),.ball:nth-of-type(n + 793):nth-of-type(-n + 810),.ball:nth-of-type(n + 901):nth-of-type(-n + 918) { --j: 2 }.ball:nth-of-type(n + 55):nth-of-type(-n + 72),.ball:nth-of-type(n + 163):nth-of-type(-n + 180),.ball:nth-of-type(n + 271):nth-of-type(-n + 288),.ball:nth-of-type(n + 379):nth-of-type(-n + 396),.ball:nth-of-type(n + 487):nth-of-type(-n + 504),.ball:nth-of-type(n + 595):nth-of-type(-n + 612),.ball:nth-of-type(n + 703):nth-of-type(-n + 720),.ball:nth-of-type(n + 811):nth-of-type(-n + 828),.ball:nth-of-type(n + 919):nth-of-type(-n + 936) { --j: 3 }.ball:nth-of-type(n + 73):nth-of-type(-n + 90),.ball:nth-of-type(n + 181):nth-of-type(-n + 198),.ball:nth-of-type(n + 289):nth-of-type(-n + 306),.ball:nth-of-type(n + 397):nth-of-type(-n + 414),.ball:nth-of-type(n + 505):nth-of-type(-n + 522),.ball:nth-of-type(n + 613):nth-of-type(-n + 630),.ball:nth-of-type(n + 721):nth-of-type(-n + 738),.ball:nth-of-type(n + 829):nth-of-type(-n + 846),.ball:nth-of-type(n + 937):nth-of-type(-n + 954) { --j: 4 }.ball:nth-of-type(n + 91):nth-of-type(-n + 108),.ball:nth-of-type(n + 199):nth-of-type(-n + 216),.ball:nth-of-type(n + 307):nth-of-type(-n + 324),.ball:nth-of-type(n + 415):nth-of-type(-n + 432),.ball:nth-of-type(n + 523):nth-of-type(-n + 540),.ball:nth-of-type(n + 631):nth-of-type(-n + 648),.ball:nth-of-type(n + 739):nth-of-type(-n + 756),.ball:nth-of-type(n + 847):nth-of-type(-n + 864),.ball:nth-of-type(n + 955):nth-of-type(-n + 972) { --j: 5 }.ball:nth-of-type(18n + 1) { --k: 0 }.ball:nth-of-type(18n + 2) { --k: 1 }.ball:nth-of-type(18n + 3) { --k: 2 }.ball:nth-of-type(18n + 4) { --k: 3 }.ball:nth-of-type(18n + 5) { --k: 4 }.ball:nth-of-type(18n + 6) { --k: 5 }.ball:nth-of-type(18n + 7) { --k: 6 }.ball:nth-of-type(18n + 8) { --k: 7 }.ball:nth-of-type(18n + 9) { --k: 8 }.ball:nth-of-type(18n + 10) { --k: 9 }.ball:nth-of-type(18n + 11) { --k: 10 }.ball:nth-of-type(18n + 12) { --k: 11 }.ball:nth-of-type(18n + 13) { --k: 12 }.ball:nth-of-type(18n + 14) { --k: 13 }.ball:nth-of-type(18n + 15) { --k: 14 }.ball:nth-of-type(18n + 16) { --k: 15 }.ball:nth-of-type(18n + 17) { --k: 16 }.ball:nth-of-type(18n + 18) { --k: 17 }
    </style>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <d.........完整代码请登录后点击上方下载按钮下载查看

网友评论0