渡一学习笔记：canvas必会、css滤镜、特效、svg

最近菜鸟没来写文章，一是因为被一些bug搞得焦头烂额，二是因为在查漏补缺，感觉自己太菜了，感觉收藏的很多，但是会的很少。

所以菜鸟就把收藏的渡一的教程都刷了一遍，能写代码的就写了，要记的就准备每天都看，感觉渡一的短视频确实不错！但是长视频质量感觉不咋地，反正之前花钱买了几个做活动的课，长的视频就讲得没有短视频好了！

这是我学习的一些成果，代码已经上传到 GitHub 了，感兴趣的可以来看看：github

下面就是我实现的一些效果，代码什么的都在 GitHub 上，注释也很详细，所以这里就展示效果了！

弧形选项卡

弧形选项卡

其实这是一个长方形设置了上方的border-radius，旁边两个是伪元素，是正方形减去两个半圆（锥型渐变），然后通过旋转得到的！

瀑布流布局

瀑布流布局

这里的思路就是循环创建图片元素，在图片 onload 之后，设置每个图片的定位！

定位就是要根据图片宽度，看整个屏幕有多少列 + 间隙多大，并根据列数生成一个记录高度的数组（一开始都为0），每次选择最短的列加上图片，并根据图片高度，设置数组数据+父元素高度（因为定位不会撑大父元素）！

手写钉钉动画

手写钉钉动画

这里的思路可以看我的博客：前端三件套配合MarsCode实现钉钉官网动画 # 豆包MarsCode

鼠标移动的高亮边框效果

鼠标移动的高亮边框效果

这里的思路就是使用三层实现，边框其实是父元素背景色，内容是子元素缩小一点在父元素里面居中，而高亮就是子元素的 before伪元素，伪元素设置成圆形渐变并根据鼠标位置设置偏移量就行了！

头像超出边框特效

头像超出边框特效

这个效果一开始看见以为很简单，但是其实有点难，因为边框会被头像盖住，这里没有用渡一的思路，感觉太复杂了，这是菜鸟自己的思路写的！

菜鸟设置了两个容器，把父容器设置得高一点，子容器放到父容器的底部，就可以做到下面超出隐藏，上面不隐藏了，然后边框就是用伪元素设置的，不能使用 border，会被 img挡住！

透明盒子的渐变阴影(clip-path)

透明盒子的渐变阴影(clip-path)

这里大家一看可能会感觉很简单，直接用一个白色的盒子，放在一个渐变的盒子上不就行了？

但是这里不一样，这里的内容里面是没设置背景色的，也可以实现该效果，具体使用的是背景裁剪！

裁剪思路

图片3D_Hover倾斜

图片3D_Hover倾斜

这里的盒子阴影看起来像渐变，其实不是，和上面的效果没有关系，这里就是简单的设置了四个方向的纯色 box-shadow

.card:hover {
   
  box-shadow: -3px -3px 10px #a1f541, 3px 3px 10px #f1597a,
    -3px 3px 10px #a1f541, 3px -3px 10px #f1597a;
}

这里主要是鼠标移入后改变 css变量，去设置图片的 transform ！

图片3D突显效果

图片3D突显效果

这里就是纯css效果了，和上面没关系，不用跟随鼠标改变偏移量！

就是人物元素一开始看不见，hover 后设置可见并设置 transform，卡片和文字也是设置移入就 transform！

图片9宫格效果

图片9宫格效果

这里的思路很巧妙，没有用到 js，就纯css 实现的，巧妙的就在于 css 后面的会覆盖前面的，然后通过 列和行 的选择，依次设置好了全部图片的偏移量，用scss可能很简单，但是纯css 能想到很难！

.imgItem {
   
  width: 200px;
  height: 200px;
  background-image: url(../img/11.png);
  background-size: 600px 600px;
  /* 鼠标划入的偏移 */
  position: relative;
  transition: all 0.3s;
}
/* n 的有关问题见 问题img */
/* 第一列 */
.imgItem:nth-child(3n + 1) {
   
  left: -20px;
  background-position-x: 0;
}
/* 第二列 */
.imgItem:nth-child(3n + 2) {
   
  left: 0;
  background-position-x: -200px;
}
/* 第三列 */
.imgItem:nth-child(3n) {
   
  left: 20px;
  background-position-x: -400px;
}

/* 选横着的不好选，取巧办法 */
/* 1-9 会被 1-6 覆盖，1-6 会被 1-3 覆盖 */
/* 注意 n 的位置不能乱放，见：问题img */
.imgItem {
   
  top: 20px;
  background-position-y: -400px;
}
.imgItem:nth-child(-n + 6) {
   
  top: 0;
  background-position-y: -200px;
}
.imgItem:nth-child(-n + 3) {
   
  top: -20px;
  background-position-y: 0;
}

图片锯齿菱形边缘(mask)

图片锯齿菱形边缘(mask)

这里设置的思路很难，反正主要是：使用锥形渐变实现一个一个小方块，然后使用线性渐变旋转设置出菱形，再通过mask蒙版显示菱形加小方块，最后背景裁剪，把多余的小方块去掉！

只能说这里菜鸟并不能举一反三，这种还是太牛了！

图片轮播(不无限循环，思路教学)

图片轮播(不无限循环，思路教学)

轮播是前端特效过不去的坎，这里我照着渡一也只学到了不无限循环的思路，循环确实不知道咋搞，只知道要复制元素，但是不知道咋复制，这个感兴趣的读者可以实现了留言，感谢！

反正思路一般就是这样：

1. 获取轮播的图片
2. 设置一个变量记录当前图片索引（表示当前显示的第几张）
3. 根据当前的索引设置布局（暂不写，整个轮播就是完成这个函数）–> 除了这个基本都是通用的
4. 获取两个按钮
5. 按钮添加事件
6. 添加点击轮播图事件

其中3就是要循环图片元素，针对每个图片按照需求设置样式就行了。

图片上下视差滚动

图片上下视差滚动

这里的思路就是，先写出css，能通过添加class 实现上下滚动的效果！然后就是设置index，并通过index 每次都准备三个元素，前一张、当前一张、后一张，然后监听鼠标滚动，实时的去修改index，等transitionend 事件结束就移除加的class就行！

图片旋转视差效果

图片旋转视差效果

这里就是使用grad布局，然后让其旋转，而里面的图片反向旋转就行了！

需要学习的是，当动画是类似的时候，只是方向、角度等不一样，完全可以使用css 变量，共用同一个动画

/* 动画 */
.container {
   
  --r: 360deg;
}
.item img {
   
  --r: -360deg;<