css border 虚线间距_【前端冷知识】CSS如何实现虚线框动画
我们知道,CSS支持将元素的border属性设为虚线,例如:
<h1>君喻学堂h1>
h1 {
border: dashed 1px;
}
但是,CSS的虚线样式是固定的,如果我们希望改变虚线的间隔,或者显示虚线滚动的动画效果,那么在CSS属性中是没办法做到的。
一个办法是使用SVG来模拟外框:
<div>
<h1>君喻学堂
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="2" y="2" width="200px" height="46px">rect>
svg>
h1>
div>
h1 {
position: relative;
width: 200px;
text-align: center;
margin-top: 20px;
margin-left: 20px;
/* border: dashed 1px; */
}
h1 svg {
position: absolute;
left: -2px;
top: -2px;
fill: transparent;
stroke: black;
stroke-width: 2;
stroke-dasharray: 5, 5;
stroke-dashoffset: 3;
animation: dashmove .5s linear infinite;
}
@keyframes dashmove {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 10;
}
}
因为svg元素支持stroke-dasharray和stroke-dashoffset属性,所以我们可以设置stroke-dasharray来改变虚线间隔,并通过改变stroke-dashoffset来实现滚动动画。最终实现的效果如下:
这么实现能够达到效果,但是这么实现也有明显的缺点:
改变了HTML结构,在h1中增加了svg标签。
还要根据h1的大小、border的宽度计算svg中rect标签的x、y、width、height
要解决这些问题,一个改进的办法是可以把SVG单独抽出来作为元素背景图片。
我们创建一个border.svg文件:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="2"
y="2"
width="200"
height="46"
fill="transparent"
stroke="black"
stroke-width="2"
stroke-dasharray="5,5"
stroke-dashoffset="3">
<animate attributeName="stroke-dashoffset"
from="0"
to="10"
begin="0s"
dur=".5s"
repeatCount="indefinite" />
rect>
svg>
在这里,我们把前面SVG的CSS属性改用SVG的属性实现,将css动画用SVG的SMIL动画实现。
然后我们的HTML、CSS就可以简化:
<h1>君喻学堂h1>
h1 {
position: relative;
width: 200px;
padding: 2px;
text-align: center;
margin-top: 20px;
margin-left: 20px;
background-image: url(https://s0.ssl.qhres.com/static/29d07f74b85903c0.svg);
background-repeat: no-repeat;
}
上面只要注意一个细节,因为我们的虚线框度为2px,所以我们要给h1元素设置一个padding:2px,将border需要的空间给腾出来。
这样我们就实现了同样的效果,而且HTML、CSS代码简单了。
但是这么做也有一个明显的问题,那就是,如果我们要修改虚线的样式或者动画,我们就要修改并更新SVG图片,这也让我们的代码维护起来比较麻烦。
那么有没有更好的办法解决这个问题呢?
如果你有任何想法,欢迎留言讨论。后续我们会专门开个CSS的专栏来深入讨论这类问题。
更多内容,尽在君喻学堂:《前端进阶十日谈》
css border 虚线间距_【前端冷知识】CSS如何实现虚线框动画相关推荐
- css border 虚线间距_一小时快速了解 CSS 基础
这一章,我们开始学习 CSS 样式表有关的知识点,通过 CSS 来控制 HTML 标签和元素的样式的方法和规范. 当然,结合视频观看效果更佳. CSS 和 HTML 不是同一种代码语言,所以自然语法书 ...
- 前端里的button怎么去除点击自带边框_前端不为人知的一面--前端冷知识集锦
前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...
- 这些鲜为人知的前端冷知识,你都GET了吗?
来源:猴哥说前端 背景 最近公司项目不多,比较清闲,划水摸鱼混迹于各大技术博客平台,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来,不由的发出一声感 ...
- 前端wxml取后台js变量值_这些鲜为人知的前端冷知识,你都GET了吗?
背景 最近公司项目不多,比较清闲,划水摸鱼混迹于各大技术博客平台,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来,不由的发出一声感叹! 前端可真是博大精深 于是 ...
- excel判断字符串包含另一个字符串_【前端冷知识】如何正确判断一个字符串是数值?...
在网页中,我们从用户输入的内容中获取的值通常是字符串,但是有时候我们希望用户输入的内容一定要能转成数值: <input id="userInput"> userInpu ...
- 前端不为人知的一面--前端冷知识集锦
转自:http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html 前端已经被玩儿坏了!像console.log()可 ...
- 前端相关知识(CSS)(1)(美化页面效果)
1)HTML只是描述了页面的结构和内容,也就是骨 2)CSS描述的是页面的样式,也就是页面具体长成什么样子,也就是皮 3)具体来说就是就是描述了任意一个网页的元素,大小,位置,字体,颜色,背景,边框, ...
- css初始化样式文件_前端必备技能 webpack 4. webpack处理CSS资源
每篇文章纯属个人经验观点,如有错误疏漏欢迎指正 因为 webpack 本身只具有识别 JS 的能力,所以涉及到其他资源,需要我们通过 loader 来进行特殊处理,针对不同的样式资源,需要以下几个 ...
- 调css p 段落间距,html P标签段落 CSS段落间距距离调整
在网页中文章段落一般我们用html 标签进行分段.搜集整理这篇文章只是因为某一个网站因为p标签使用,却在不同浏览器下有着不同的效果,为了尽最大可能地保持同一效果,特简单整理了一下文章.使用html的P ...
最新文章
- mac 需要修复你的资源库才能运行应用软件
- 计算机网络是通信技术和,计算机网络是计算机技术和通信技术相结合的产物。()...
- 众望所归的《JAVASCRIPT凌厉开发--EXT详解与实践 》终于上市了!
- invoke 数组_对于反射中的invoke()方法的理解
- SQLyog连接Mysql8.0提示 Authentication plugin ‘caching_sha2_password‘ cannot be loaded
- 精武风云全线公映,挂马欺诈网站同步上线
- fedora在此处打开终端
- AlertDialog禁止返回键
- Java开发岗位面试题
- DEDE常见的错误(转)
- ICPC程序设计题解书籍系列之六:吴永辉:《算法设计编程实验》
- 深度学习课程笔记(十三)深度强化学习 --- 策略梯度方法(Policy Gradient Methods)...
- QGIS插件开发详细教程
- 如何让iframe背景色透明
- sim868 c++二次开发基本完成
- 直播/点播系统快速搭建指南
- jqGrid设置三级表头和表头合并
- 【原创--学习整理】学习bat和dos的相关资料整理--汇总
- PUN☀️实用API
- win2012+r2+php+mysql_Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建教程
热门文章
- jquery.zSlide.js-基于CSS3/HTML5演示文档jQuery插件
- 【转】集合类说明及区别
- 如何在单台计算机上配置 Windows XP SP2 网络保护技术
- VS一直停留在“正在还原nuget程序包”
- Flex与.NET互操作(九):FluorineFx.NET的认证(Authentication )与授权(Authorization)
- java发送http请求的四种方式
- Graphviz安装配置及入门(windows安装亲测)
- Git .gitignore文件忽略(自己做过测试了)
- Mysql用navicat操作导出查询结果
- java session创建_request创建session