Small talk

Just last Saturday, I went to a sharing session that shared a few broad themes:

  • How to debug error messages online in time, and handle and record (window.onerror)
  • Web animation practices and Techniques (he’s the MVP, and that’s what I’m sharing with you today)
  • Front end automated testing (wire mock, I really don’t understand that much…)

Shared several short topics (within 15 minutes)

  • Data base types and reference types
  • Matrix algorithm (the principle of transform, etc., well, I don’t understand that much either. I admit I love it.
  • JsBinding (oc and JS interaction technology, well, OC I don’t understand, so I don’t understand)

example

Demo address: fireworks

start

When it comes to doing this kind of animation of fireworks, we should think of particle animation at the beginning, so the cost will be relatively high. And a search online is also a lot of this kind of demo, let’s try using a few simple cSS3 to achieve this effect!

html

    <div class="bg">
        <div class="fire"></div>
        <div class="fire2"></div>
    </div>
Copy the code

css

  body {
    background: # 000;
  }
  .fire..fire2 {
    background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528711658929&di=b1915568e41809ec716dd5fb197059bf&i mgtype=0&src=http%3A%2F%2Fimg07.tooopen.com%2Fimages%2F20171215%2Ftooopen_sy_230419854445.jpg') no-repeat;
    background-size: contain;
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    background-clip: content-box;
    border-radius: 100%;
  }

  .fire {
    animation: firing 1.5 s ease infinte;
    -webkit-animation: firing 1.5 s ease infinite;
  }

  .fire2 {
    animation: firing2 1.5 s ease infinte;
    -webkit-animation: firing2 1.5 s ease infinite;
  }

  @keyframes firing {
    0%{ padding: 80px; transform: scale(0.5) translateY(0); opacity:1;}
    75% { padding:0; transform: scale(1) translateY(0); 100%} {opacity:0; transform:scale(1) translateY(100px); @ -}}webkit-keyframes firing {
    0%{ padding: 80px; -webkit-transform: scale(0.5) translateY(0); opacity:1; 75%} {padding:0;-webkit-transform: scale(1) translateY(0); 100%} {opacity:0;-webkit-transform:scale(1) translateY(100px);}
  }

  @keyframes firing2 {
    0%{ padding: 80px; -webkit-transform: scale(0.5) translate(0); opacity:1; }
    100%{ opacity: 0; -webkit-transform: scale(1); @ -}}webkit-keyframes firing2 {
    0%{ padding: 80px; -webkit-transform: scale(0.5) translate(0); opacity:1; }
    100%{ opacity: 0; -webkit-transform:scale(1); }}Copy the code

conclusion

Two effects were used, one with a Y-axis offset and the other with no Y-axis offset. The first method includes a process of falling after fireworks bloom, which is shared by the original great god. The second method is the simplest way to achieve this, which is also considered as a natural transition.