Every day a CSS tip, consolidate their basic knowledge of CSS, examples are found online, as far as possible will mark the source, no mark the author see please contact me… The purpose is just to use these examples to strengthen the foundation. Thank you, respect the original, learn together! Original text – > Effect display:



在pptIn the very common transition effect, did not expect to usecssIt can also be done (just because I’m a terrible person and don’t know a lot)

html:

<img src="https://z3.ax1x.com/2021/08/18/f7Uya4.png" width="500" height="400">
Copy the code

Very simple to understand, is to put an image – extended to be any image displayed on the page

scss:

It is divided into CSS version and SCSS version (if the complex effect is still preprocessed as far as possible, you can write hundreds of millions of points of code) :$x:20;  / * rows * /
$y:20;  The column number / * * /
$s:0.8; / * * / speed

/* Defines N(row * column) attributes using @property, and sets the initial value to 1 to display */
@for $i from 0 through ($x - 1) {
  @for $j from 0 through ($y - 1) {
    @property --c-#{$i# {} -$j} {
      syntax: "<number>";
      initial-value: 1; inherits: false; }}}/* Add animation: for custom N attributes from 1 to 0 this process, random duration, random delay time, so that there will be irregular disappearance, of course, can also have regular messages, such as from left to right... * /
@function transition($i.$j) {
  @return ($s*random())+s ($s*random())+s;
}
/* Use @mixin in SCSS to generate mask code */
@mixin image() {
    $all_t: ();
    $all_m: ();
    @for $i from 0 through ($x - 1) {
      @for $j from 0 through ($y - 1) {
         $all_t: append($all_t, --c-#{$i# {} -$j} transition($i.$j), comma);
         $all_m: append($all_m, linear-gradient(rgba(0.0.0,var(--c-#{$i# {} -$j})) 0 0) calc(#{$i} *100%/ (# {$x} - 1)) calc(#{$j} *100%/ (# {$y} - 1)), comma); }}transition: $all_t;
     -webkit-mask: $all_m;
     mask: $all_m;
}

img {
  @include image();
  /* Set the mask size */
  -webkit-mask-size:calc(100%/ # {$x}) calc(100%/ # {$y});
  -webkit-mask-repeat:no-repeat;
  mask-size:calc(100%/ # {$x}) calc(100%/ # {$y});
  mask-repeat:no-repeat;
}
/* Hover trigger: change the values of N attributes from 1 to 0 */
img:hover {
  @for $i from 0 through ($x - 1) {
      @for $j from 0 through ($y - 1) {
         --c-#{$i# {} -$j} :0; }}}body {
  background:pink;
}
Copy the code

`css:

https://www.sassmeister.com/ please transform itself, is too long... The idea of the whole animation is to divide the picture into X * Y blocks, and then add maskN masks. We use black and white masks. Black means no mask, and white means full mask1-0", is a process of slowly disappearing, and then set the sequence and duration of the disappearance of the animation, became the final effectCopy the code

There are many attributes that I didn’t notice before, and some new attributes that I haven’t used: mask, Transform business, linear-gradient(). Come on, come on, keep learning and reviewing