每天一个css小技巧，巩固自己的css基础知识，例子都是网上找的，尽可能的会把出处标记出来，没有标记的作者看到请联系我。。。目的只是为了借助这些例子学习巩固基础。谢谢，尊重原创，一起学习！ 原文 -〉
效果展示：
在ppt中很常见的过渡效果，没想到用css也可以实现（只是单纯的因为我很菜，不知道的很多)
html:
<img src="https://z3.ax1x.com/2021/08/18/f7Uya4.png" width="500" height="400">
很简单一看就懂，就是放张图片---拓展的话就是可以是页面显示的任何图片
scss:
分为css版本和scss版本(复杂效果的话我们还是尽可能的进行预处理，可以少写亿点代码)：
scss:
$x:20; /* 行数 */
$y:20; /* 列数 */
$s:0.8; /* 速度 */
/* 使用@property 定义了N(行*列)个属性，并设置初始值为1，代表显示 */
@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;
}
}
}
/* 添加动画：对自定义的N个属性由1到0这个过程，持续时间随机，延迟时间随机，这样就会出现不规则的消失，当然也可以有规则的消息，比如从左往右... */
@function transition($i,$j) {
@return ($s*random())+s ($s*random())+s;
}
/*
使用scss中的@mixin生成mask遮罩代码
*/
@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();
/* 设置遮罩大小 */
-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;
}
/* 鼠标悬停触发：将上面自定义的N个属性值由1改为0 */
img:hover {
@for $i from 0 through ($x - 1) {
@for $j from 0 through ($y - 1) {
--c-#{$i}-#{$j}: 0;
}
}
}
body {
background:pink;
}
`css:
https://www.sassmeister.com/ 请大家自行转换，太长了...
整个动画实现的思路就是，将图片分割为x * y块，然后添加maskN个遮罩，mask遮罩我们使用黑色和白色，黑色就是不遮罩，白色就是全遮罩，所以我们根据透明度从1-0，就是一个慢慢消失的过程，然后设置一下动画消失的先后顺序和持续时间，就成了最后的效果
整个下来之前没注意的属性有很多，也有一些新的属性没用过： 比如 mask遮罩，transform业务写多了也用的变少了，还有linear-gradient()，加油加油，不断学习，不断复习～～～
