Css how to achieve the circle to slowly shrink inward, boss to give a wave of ideas

how do you slowly shrink in the blue outside like this and don"t overwrite the previous content

Css
Aug.19,2021

you can simulate colored masks by border or box-shadow . 

.box{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 0 0 10000px -sharp000;
    background-color: transparent;
    animation: border_shrink 1s;
  }
  @keyframes border_shrink {
    0% {
      width: 100px;
      height: 100px;
    }
    100% {
      width: 0;
      height: 0;
    }
  }

this circle can be realized by setting broder-radius:50% with the same width and height as div, and then shrinking inward is actually changing the width and height of div

usually using canvas
, that is, the blue background is at the bottom, the content is on the top, and then give the content border-radius

.

Previous: How does onScrollCapture listen only for vertical scrolling in react, without triggering events when scrolling horizontally?

Next: How to disable element table header selection?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu