妙法攻略:渐变虚框及边框滚动动画的纯CSS实现

这篇文章发布于 2018年08月30日,星期四,01:28,归类于 CSS相关。 阅读 56671 次, 今日 13 次 37 条评论

 

一、渐变虚线边框的实现

前段时间,有位小伙伴在微博上问了我这么一个虚线边框如何实现渐变效果的问题:

微博问题截图

如果对边框的样式细节不是很在意,则可以借助反向镂空的方法实现,也就是虚线原本实色的地方和周围颜色融为一体,看上去透明,而原来虚框透明的部分透出渐变背景色,于是看上去像是渐变色。

如下HTML和CSS:

<div class="box">
    <div class="content"></div>
</div>
.box {
    width: 150px;
    border: 2px dashed #fff;
    background: linear-gradient(to bottom, #34538b, #cd0000);
    background-origin: border-box;
}
.content {
    height: 100px;
    background-color: #fff;
}

实时效果如下:

Chrome 68截图效果如下:

镂空方法实现的渐变边框效果

问题
虽然这种实现兼容性不错,IE10+都支持,但是,虚实比例由于反过来了,因此,虚线太稀疏,而且边角无法形成直角。在实际项目中,是过不了设计师这一关的。

那有没有效果更精致的虚线边框渐变实现方法呢,有!我们可以借助CSS3 mask遮罩来实现。


借助CSS遮罩实现精致的渐变虚框

这个方法HTML只需要一层标签即可,而且没有冗余的纯色覆盖,适用于各种背景场合,HTML代码如下:

<div class="box"></div>

CSS代码如下,渐进增强,不支持遮罩的浏览器还是纯色虚框:

.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;
    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;
  }    
}

实际使用的时候,mask属性还需要加下-webkit-私有前缀,这里示意目的,因此简化了代码。

实现的渐变虚框效果如下截图:
渐变虚框效果截图

眼见为实,您可以狠狠地点击这里:基于CSS遮罩实现的渐变虚框效果demo

由于这个虚框本质上是CSS绘制的,因此,我们可以随意控制虚线的虚实比例,非常灵活。

关于CSS遮罩
默认情况下,CSS遮罩可以让元素只显示遮罩图片有颜色部分的区域,于是,这里,我们只要使用mask属性绘制一个黑色虚框,就能实现真正意义上的渐变虚框效果了。

CSS mask遮罩包含属性和知识点非常多,也非常强大,有兴趣可以预留足够时间看看我之前写的“CSS遮罩CSS3 mask/masks详细介绍”一文。

二、虚线边框滚动动画

百度ueditor编辑器网站首页(http://ueditor.baidu.com/website/)底部有一个滚动虚框的效果,如下GIF示意:

滚动的虚框动画效果

当时我看到这个效果的时候,很兴奋,没想到做这个官网页面的还是个CSS牛人!等我打开控制台一看——恩,原来是JS计算实现的,我就默默地关掉了页面,假装刚才什么都没发生过。

实际上,这种效果三两行CSS代码就可以实现,且IE10+浏览器都支持。

如下HTML和CSS:

<div class="box">
    <div class="content">内容占位</div>
</div>
.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;}
}

实现的边框运动效果如下GIF:

虚线运动GIF截图

眼见为实,您可以狠狠地点击这里:CSS实现虚线边框旋转动画demo

实现原理
这种边框跑马灯一样的效果的实现原理,我在很早之前有介绍过,可参见“使用CSS实现Photoshop选区效果”一文。

边框区域镂空,然后背景图片设为下面这个GIF平铺背景即可:

10倍大小的选区动画图片

例如下面这个水果的选区背景效果:

不规则选区实现

这里的边框滚动效果也是类似的,只是我们的斜纹是使用CSS3重复线性渐变属性repeating-linear-gradient实现的,而规律运动是CSS3动画实现的,于是,最终实现了视觉上的虚线边框滚动效果。这种视觉感受跟小时候看发廊里面那个旋转的斜纹柱子其实有异曲同工之处。

三、一个实线边框loading动画

先看效果吧,不过GIF截图尺寸会比较大,我就直接放一个静态图吧:

边框动画静态截图

实线的效果是一条边框实线,像个贪吃蛇一样,一直围着这个图片元素跑啊跑,跑啊跑,一直不停歇。

您可以狠狠地点击这里:CSS实线边框loading动画demo

实现原理其实也颇为简单,就是使用CSS clip属性对边框进行剪裁而已,使用clip属性是因为兼容性好,如果你的项目不需要管IE,则可以使用clip-path属性来剪裁(可参见我之前文章“CSS3/SVG clip-path属性简介”)。

具体HTML和CSS代码如下:

<div class="box">
    <img src="mm1.jpg" width="128" height="96">
</div>
.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效果好,应该两个线框相互驱逐,本demo为了避免干扰,某人就一个线框悠悠地转,如果想要显示2个线框相互追逐,demo页面是留了彩蛋的,点击图片即可,会变成下面这样:

实线边框旋转加载效果


此效果应用场景个人觉得还是相当广泛的。

一是强调和警示,例如某些非常重要的申明,就可以用这个边框动画,保证人人都会注意到。

二是作为loading效果。并且可大可小,平常一个大容器里面加载东西,我们都是容器中间放个菊花,实际上,让容器边缘这个两条折线追逐效果也挺好的;或者把容器中的菊花换成同尺寸的边框动画也是可以的,很有心意,保证创新。

四、结束语

本文的CSS小技巧都是源自平时的积累,当你掌握足够扎实的基础的时候,才能有各种思路和想法,否则,只能拾人牙慧,难有创新。

本文的完成共占用了我4个晚上的业余时间。

现在上年纪,肝不动了,超过1点就顶不住,我也认了。前3个晚上,一个晚上整一个demo,今天写文字。要是年轻的时候,肯定2晚搞定,第一晚一口气弄完所有demo,估计要到凌晨3,4点,第二晚,就像今天这样,搞到1~2点。

现在想想,远没有年轻的时候勤奋了,以前刚开始工作时候,上厕所时候都捧着个技术书籍再啃,现在上厕所不是刷微博就是刷朋友圈。以前写文章,开头可以有一半的篇幅唠叨各种废话,现在不行了,你看这篇文章,直接开门见山。而且老实讲,我本来计划是按照《延禧攻略》的剧本写本文的,我是一个小边框,名叫魏璎框,因为想要替姐姐报仇,我需要学会几个技能,一是渐变边框,然后边框动画……后来想想还是算了,按照剧本模式写,又要多一个晚上,我这边积压的活已经排成队了,不能再拖了,所以还是老老实实地写。

哎呀哎呀,不能再扯来扯去了,罪过罪过。

边框动画还有很多很酷的效果,例如和border-radius配合,可以实现转弯边框动画效果,这个以后有机会再演示。

就这些,3个与边框有关的tips三合一,希望可以对你的工作学习有所帮助。

(本篇完)

分享到:


发表评论(目前37 条评论)

  1. 小亭子说道:

    如果有圆角怎么办

  2. 摸鱼中...说道:

    一、渐变虚线边框的实现
    有个小问题哈,遮罩只显示 mask 图片不透明的部分,所以不能在元素本身使用 mask,可以考虑在伪元素上使用 mask。

    提供另一个实现思路,叠加多个 background-image 来实现:
    .gradient-border {
    $bg-color: #fff;
    width: 200px;
    height: 150px;
    padding: 2px;
    box-sizing: border-box;
    background: linear-gradient(to right, transparent 6px, $bg-color 6px) 0 0/8px 2px repeat-x,
    linear-gradient(to bottom, transparent 6px, $bg-color 6px) 0 0/2px 8px repeat-y,
    linear-gradient(to left, transparent 6px, $bg-color 6px) 100% 100%/8px 2px repeat-x,
    linear-gradient(to top, transparent 6px, $bg-color 6px) 100% 100%/2px 8px repeat-y,
    linear-gradient(to right, transparent 4px, $bg-color 4px) -2px 2px/100% calc(100% – 4px) no-repeat,
    linear-gradient(to bottom, #34538b, #cd0000);
    }

  3. 学徒说道:

    大佬 能不能展示一下 文字下的波浪线是怎么弄的

  4. A3说道:

    这个视觉效果更自然一些 😆 https://code.h5jun.com/guhan/

  5. 初心说道:

    哥,是什么让你一直坚持程序员这一条道路一直走下去的,我这刚刚1年的工作时间,我都有点佩服自己能坚持做一件事情做一年,现在真是小鹿乱撞,什么想法都有。

  6. 释然说道:

    大侠的文章总是那么实用,感谢!

  7. natsu说道:

    渐变虚线边框直接用三层渐变叠加好像也可以实现
    background: repeating-linear-gradient(transparent, transparent 3px, #fff 3px, #fff 7px),repeating-linear-gradient(90deg,transparent, transparent 3px, #fff 3px, #fff 7px),linear-gradient(to bottom, #34538b, #cd0000);

  8. 九月说道:

    感谢

  9. trance说道:

    基础雄厚构思巧妙融会贯通点石成金

  10. tangerine说道:

    不知道问什么百度那个效果用linear-gradient
    {
    background: linear-gradient(135deg, transparent 3px, #000 3px, #000 8px) repeat-x;
    background-size: 8px 100%;
    }
    这样不行

  11. 前端打杂小子说道:

    在使用CSS3 mask遮罩实现颜色渐变时区box区域内填写内容后并不可展示

  12. 依韵说道:

    想到什么效果,不知道怎么做,就来你的博客找找,大多数都有方案。确实如你的书中所说——“艰难的路我一个人走就好了,等我踏遍整个css世界,再把完整的地图绘制出来,岂不不能就帮助更多的人了”

  13. 依韵说道:

    这文章你写了三晚,涉及的知识点掌握怕是一个星期都非常难,css可以这么玩,非常赞!

  14. 刘东奇说道:

    大佬辛苦!人狠话也多

  15. tsdd说道:

    百度的虚线是转圈,而博主的虚线是向左上角,效果还是不同的

  16. 或兮说道:

    点击文章rss订阅出现整个当前页面的源码

  17. 我是bug说道:

    广告网站:www.cssworld.cn 打不开啦,403

  18. 666说道:

    666

  19. 神秘博士说道:

    居然还有时间看延禧攻略

  20. zilong说道:

    我很佩服您!

  21. WangNianyi2001说道:

    妈耶,结尾怎么不是 gif 了

  22. dizuncainiao说道:

    css果然博大精深啊……

  23. 狗蛋说道:

    不知道为什么用动画效果 rect可以实现无缝连接的感觉,然后不用动画 一个个显示剪裁看效果,有些就直接全空白了

  24. lalala说道:

    虚线边框滚动那个只能双龙入海,不能一条道走到黑啊

  25. suntgr说道:

    两个动画效果不一样啊!

  26. webster说道:

    so cool

  27. 张鑫旭的小粉粉说道:

    棒~

  28. lalala说道:

    一楼