css能做什么-background篇2

今日目标：基于background-size和background-position的聚焦效果

该效果的主要特点是边框的进方向和出方向是相反的

这里拿上边框来举例

.wrapper{  
  --sp: 0%;  
  --color: black;  
  position: relative;  
  padding: 6px;  
  width: 200px;  
  height: 200px;  
  transition: background-size .3s ease-in-out;  
  background: linear-gradient(var(--color) 2px, transparent 2px) no-repeat var(--sp) 0/var(--sp) 100%;
}  
.wrapper:hover{  
--sp: 100%;  
}

这里定义了一个变量sp（为什么是sp呢，其实就是background-size和background-position都会用到这个变量），linear-gradient(var(--color) 2px, transparent 2px) no-repeat主要定义了一个顶部的线条，这没什么说的，主要是在var(--sp) 0/var(--sp) 100%,可以看到除开用var(--sp)控制线条的长度外，其还控制着背景的位置。

当页面hover时var(--sp)变为100%，但是我们的过渡只指定了background-size属性，所以background-position属性的变化会立即生效，导致背景开始的位置是在最右边，而background-size属性我们是指定了过渡的，所以hover时，就会出现线条从右往左出现的效果。

当鼠标移开时，var(--sp)变为0%，background-position会立即变为从最左边开始，background-size的过渡效果便会表现成从右边开始到左边消失。

再看看底部的线条，底部的线条过渡效果和顶部的是正好相反的（左进右出），这时只需要将位置参数修改为calc(100% - var(--sp)),这样它在方向上便正好和顶部的方向相反。

linear-gradient(transparent calc(100% - 2px), var(--color) calc(100% - 2px)) no-repeat calc(100% - var(--sp)) 0/var(--sp) 100%

完整代码：

.wrapper{  
  --sp: 0%;  
  --color: black;  
  position: relative;  
  padding: 6px;  
  width: 200px;  
  height: 200px;  
  transition: background-size .3s ease-in-out;  
  background: linear-gradient(var(--color) 2px, transparent 2px) no-repeat var(--sp) 0/var(--sp) 100%,  
  linear-gradient(90deg, transparent calc(100% - 2px), var(--color) calc(100% - 2px)) no-repeat 0 var(--sp)/100% var(--sp),  
  linear-gradient(transparent calc(100% - 2px), var(--color) calc(100% - 2px)) no-repeat calc(100% - var(--sp)) 0/var(--sp) 100%,  
  linear-gradient(90deg, var(--color) 2px, transparent 2px) no-repeat 0 calc(100% - var(--sp))/100% var(--sp);  
}  
.wrapper:hover{  
  --sp: 100%;  
}

注意：--sp: 0%;不能写成--sp: 0;,不然会没有过渡效果