常常看到一种酷炫的效果,鼠标hover一片区域后,区域显示出虚线边框,并且还有线条动画,那么这种效果具体是怎么实现的呢,本文提供了几种思路仅供参考。
基本HTML
测试测试
Easy-way
通过背景图片实现。
p得垂直居中哦,还记得如何垂直居中吗?详见另一篇博客~
.box {
width: 100px;
height: 100px;
position: relative;
background: url(https://www.zhangxinxu.com/study/image/selection.gif);
p {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
height: calc(100% - 2px);
width: calc(100% - 2px);
background-color: #fff;
}
}
repeating-linear-gradient
135度repeating线性渐变,p撑开高度,白色背景覆盖外层div渐变。
.box {
width: 100px;
height: 100px;
background: repeating-linear-gradient(
135deg,
transpa