渐变虚线边框
如果对边框的样式细节不是很在意,我们可以借助反向镂空的方法实现,也就是虚线原本实色的地方和周围颜色融为一体,看上去透明,而原来虚框透明的部分透出渐变背景色,于是看上去像是渐变色。
以下是HTML和CSS:
.box {
width: 150px;
border: 2px dashed #fff;
background: linear-gradient(to bottom, #34538b, #cd0000);
background-origin: border-box;
}
.content {
height: 100px;
background-color: #fff;
}
问题:虽然这种方式兼容性不错,IE10+都支持,但是,虚实比例由于反过来了,因此,虚线太稀疏,而且边角无法形成直角。在实际项目中肯定过不了设计师这一关。
那有没有效果更精致的虚线边框渐变实现方法呢?当然有!我们可以借助CSS3 mask遮罩来实现。
借助CSS遮罩实现精致的渐变虚框,渐进增强,不支持遮罩的浏览器还是纯色虚框,这个方法HTML只需要一层标签即可,而且没有冗余的纯色覆盖,适用于各种背景场合,代码如下:
.box {
width: 200px; height: 150px; border: 2px dashed #cd0000; box-sizing: border-box;}@supports (-webkit-mask: none) or (mask: none) {.box {
border: none; background: linear-gradient(to bottom, #34538b, #cd0000) no-repeat; -webkit-mask-image: linear-gradient(to right, #000 6px, transparent 6px), linear-gradient(to bottom, #000 6px, transparent 6px), linear-gradient(to right, #000 6px, transparent 6px), linear-gradient(to bottom, #000 6px, transparent 6px); -webkit-mask-repeat: repeat-x, repeat-y, repeat-x, repeat-y; -webkit-mask-position: 0 0, 0 0, 0 100%, 100% 0; -webkit-mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px; /* 合并写法 */
mask: linear-gradient(to right, #000 6px, transparent 6px) repeat-x,
linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y,
linear-gradient(to right, #000 6px, transparent 6px) repeat-x 0 100%,
linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y 100% 0; mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px;} }
由于这个虚框本质上是CSS绘制的,因此,我们可以随意控制虚线的虚实比例,非常灵活。
默认情况下,CSS遮罩可以让元素只显示遮罩图片有颜色部分的区域,那么在这里,我们只要使用mask属性绘制一个黑色虚框,就能实现真正意义上的渐变虚框效果了。
CSS mask遮罩包含属性和知识点非常多,也非常强大,这里就不展开详说了,有兴趣的朋友可以多搜索学习一下相关知识。
虚线边框滚动动画
.box {
width: 200px;
background: repeating-linear-gradient(135deg, transparent, transparent 3px, #000 3px, #000 8px);
animation: shine 1s infinite linear;
overflow: hidden;
}
.content {
height: 128px;
margin: 1px; padding: 10px;
background-color: #fff;
}
@keyframes shine {
0% { background-position: -1px -1px;}
100% { background-position: -12px -12px;}
}
实线边框loading动画
实线的效果是一条边框实线,像个贪吃蛇一样,一直围着这个图片元素跑啊跑,跑啊跑,就像跑马灯那样一直不停歇。
实现原理其实也颇为简单,就是使用CSS clip属性对边框进行剪裁而已,使用clip属性是因为兼容性好,如果你的项目不需兼容IE,则可以使用clip-path属性来剪裁。
.box {
display: inline-block;
padding: 10px;
position: relative;
}
.box::before {
content: '';
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
border: 2px solid #cd0000;
animation: borderAround 1.5s infinite linear;
}
@keyframes borderAround {
0%, 100% { clip: rect(0 148px 2px 0); }
25% { clip: rect(0 148px 116px 146px); }
50% { clip: rect(114px 148px 116px 0); }
75% { clip: rect(0 2px 116px 0); }
}
实际上,要想loading效果好,应该两个线框相互驱逐,像下面这样:
.box {
display: inline-block;
padding: 10px;
position: relative;
}
.box::before {
content: '';
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
border: 2px solid #cd0000;
animation: borderAround 1.5s infinite linear;
}
.box::after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border: 2px solid #cd0000;
animation: borderAround2 1.5s infinite linear;
}
@keyframes borderAround {
0%, 100% { clip: rect(0 148px 2px 0); }
25% { clip: rect(0 148px 116px 146px); }
50% { clip: rect(114px 148px 116px 0); }
75% { clip: rect(0 2px 116px 0); }
}
@keyframes borderAround2 {
50% { clip: rect(0 148px 2px 0); }
75% { clip: rect(0 148px 116px 146px); }
0%,100% { clip: rect(114px 148px 116px 0); }
25% { clip: rect(0 2px 116px 0); }
}
此效果应用场景应该说还是相当广泛的:一是可以用作强调和警示,例如某些非常重要的图文信息,就可以用这个边框动画,保证吸睛人人都会注意到;二是作为loading效果,尺寸可大可小,平常一个大容器里面加载东西,我们都是容器中间放个菊花,实际上,让容器边缘这个两条折线追逐效果也挺好的,或者把容器中的菊花换成同尺寸的边框动画也是可以的,既是创意,也是创新。