SVG动画边框

最新推荐文章于 2024-05-20 15:56:58 发布
最新推荐文章于 2024-05-20 15:56:58 发布
阅读量1.4k 收藏 4
点赞数
分类专栏： SVG
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44506318/article/details/102885846
版权

 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" 
viewbox="0 0 600 400">
    <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>
    <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>
</svg>

version： 表示 <svg> 的版本，目前只有 1.0，1.1 两种

xmlns：http://www.w3.org/2000/svg 固定值

xmlns:xlink：http://www.w3.org/1999/xlink 固定值

xml:space：preserve 固定值，上述三个值固定，表示命名空间，当数据单独存在svg文件内时，这3个值不能省略

class：就是我们熟悉的 class

width | height： 定义 svg 画布的大小

viewbox： 定义了画布上可以显示的区域，当 viewBox 的大小和 svg 不同时，viewBox 在屏幕上的显示会缩放至 svg 同等大小（暂时可以不用理解）

stroke-dasharray用来设置虚线，用“，”分隔的数字表示“实线，空”，stroke-dasharray=”5, 5” 。如果数字是奇数个的话，则自动补充为偶数。如 stroke-dasharray=”5,3,2” 实际为 “5,3,2,5,3,2”.

stroke-dashoffset用来表示偏移。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svg边框动画特效</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>

<div id="workarea">

		<div class="svg-wrapper" style="position:absolute;top:200px;left:200px; border:1px solid red;">
			<svg height="193" width="540" >
				<rect id="shape" height="193" width="540" />
				
			</svg>
		</div>

</div>


</body>
</html>

 style.css

@charset "utf-8";



#workarea{position:absolute;width:100%;height:100%;background-color:#1e1a3e;font-family:Raleway}

#shape{
	stroke-width:6px;
	fill:transparent;
	stroke:#009FFD;
	stroke-dasharray:83 650;
	stroke-dashoffset:0;
  -webkit-animation: draw 2s linear infinite;
  animation: draw 2s linear infinite;
}

@-webkit-keyframes draw {
  to {
     stroke-dashoffset:733;
  }
 
}

@keyframes draw {
  to {
     stroke-dashoffset:733;
  }
}

 

zmlucky
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SVG入门-填充和边框
natsu-cc的博客
03-22 2260
前言 当我们绘制好了形状之后，是不会在SVG上显示出来（当然浏览器会给形状定义默认的填充色）。需要学习如何给形状添加颜色。可以使用几种方法来着色，包括指定对象的属性，使用内联CSS样式，或者内嵌的CSS样式，或者使用外部的CSS样式文件。大多数的web网站的SVG使用的是内联样式CSS，对于这些方法都有优缺点。 Fill 和 Stroke 属性 要使得形状显示出来，可以用两个属性来解决，一个是fill属性，一个是stroke属性，fill是填充，stroke是描边。 <rect x="10" y="
科技感大屏边框框架 datav
taotaobaobei的博客
03-06 414
主要用于构建大屏（全屏）数据展示页面即数据可视化
9.SVG
qq_44815463的博客
02-22 371
SVG 1.概念 SVG英文全称为Scalable Vector Graphics，意思为可缩放的矢量图。 2.矢量图 矢量图是用XML格式定义, 通过各种「路径」和「填充颜色」来描述渲染的的图片 矢量图优点和缺点: 优点: 放大后不会失真, 体积小 缺点: 不易制作色彩变化太多的图象 3.SVG使用方式 内嵌到HTML中(直接在HTML中绘制) 通过浏览器直接打开SVG文件 注意点:...
svg+css实现不规则虚线框流动效果
最新发布
未来可期的博客
05-20 217
使用svg+css可以实现规则矩形和不规则形状的虚线框流动效果。
svg 实例效果图
rainbow的专栏
03-19 1074
动态 普通效果 http://www.adobe.com/svg/dynamic/transformations2.html   无JS干预效果 http://www.adobe.com/svg/dynamic/declarative.html JS干预效果 http://www.adobe.com/svg/dynamic/javascript.html 鼠标事件效果，注意可以在H
H5 SVG边框特效
03-04
H5中使用SVG实现DIV边框特效
React数据可视化组件库（类似阿里DataV，大屏数据展示），提供SVG的边框及装饰、图表、水位图、飞线图等组件，.zip
03-04
React数据可视化组件库（类似阿里DataV，大屏数据展示），提供SVG的边框及装饰、图表、水位图、飞线图等组件，.zip
svg配合css3动画_使用SVG和CSS创建边框动画效果
culiao9310的博客
09-29 596
svg配合css3动画View demo 查看演示Download Source 下载源Today we’d like to explore a very subtle, but interesting border animation effect that can be seen on the creative website of Carl Phili...
html5 svg线条动态绘制iphone边框动画效果
12-13
一款使用html5 svg技术制作的线条动态绘制iphone边框动画效果，页面中先是用线条动态绘制出iphone的轮廓，然后再显示iphone图片，效果十分华丽。
svg+描边动画实现霓虹灯特效
string佳佳的博客
11-04 829
原博地址：https://juejin.cn/post/6844903815708164110 效果图： 代码实现 html： <svg width="1600px" height="100%" xmlns="http://www.w3.org/2000/svg"><!--xmlns命名空间,和html分离--> <symbol id="text"> <text x="0" y="35%" class="t
html大屏可视化边框怎么弄的,做大屏可视化，你需要知道这几点
weixin_29740025的博客
06-21 1814
看别人家的大屏做得直观又好看，自己也想做，那么自己做大屏可视化难吗？其实还真不算难，只要有BI数据可视化工具，你就能自由发挥，制作有个性又直观的大屏可视化报表。但简单归简单，有些该注意的事项还是得注意。做大屏可视化前的准备：数据、分析需求、BI数据可视化工具、大屏设备、其他辅助资料(如背景图等)将数据一键上传BI数据可视化工具后，点击新建报表进入报表设计页面，即可应用数据可视化图表、智能分析功能制...
纯CSS3动画实现SVG边框特效
wangzhneg123的博客
02-23 1126
效果展示 源码展示 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;纯C3动画实现SVG边框特效&lt;/title&gt; &lt;style&gt; body,html { height:100%; display:flex;
万能配置的大屏可视化功能来啦~
weixin_33795833的博客
03-07 3152
2019独角兽企业重金招聘Python工程师标准>>> ...
SVG 边框 (stroke) 基本知识以及 SVG 边框动画
weixin_34234829的博客
10-28 1468
最近做了一个关于SVG的应用的技术分享网站svgtrick.com，会同步一些文章到这里来，更多的关于SVG方面的技术知识可以去网站看看。 在SVG中边框这一属性虽然看似简单，但实则是大有天地，今天就来深扒下SVG中的边框的一些基础知识。 基本知识 在SVG中，边框最常见的应用就是用来指定路径或者是其它形状的边框的颜色以及宽度。使用方法跟...
css svg伸展动画,利用SVG和CSS3来实现一个炫酷的边框动画
weixin_35048609的博客
08-03 552
今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生——网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS渐变来完成。注意，这个技术还是实验性的。首先，让我们来看看基本的概念，然后我们会朝着这个方向努力。请注意，我们将在SVG...
HTML5 SVG简单的动态绘制轮廓线条动画插件
delmarks的博客
01-27 3570
walkway是一款非常简单的HTML5 SVG动态绘制轮廓线条动画插件。它支持SVG的path，line 和 polyline元素。walkway使用起来简单方便，可以制作出非常酷的SVG线条动态绘制效果。更好的动态绘制线条插件可以参考：html5 svg线条动态绘制文字轮廓边框动画、HTML5 SVG图形轮廓线条绘制动画插件-vivus 和 html5 svg线条动态绘制iphon
SVG 边框（stroke）
司马懿的西山居
11-27 8717
<stroke>属性介绍 stroke 边框（轮廓）颜色 stroke-width 边框（轮廓）厚度 stroke-linecap 开放路径的终结样式（或称为画笔线帽） butt 无线帽 round 圆形的线帽 square 方形的线帽 stroke-dasharray 定义一实线虚线长度数组，不断重复该样式 strokestroke指的是边框（轮廓）的颜色<svg xmlns="http://w
svg文本。填充和边框
onepunchmen00的博客
11-16 3997
字符 ：unicode表示 字形 ：字符的可视化表现形式  例如 abcd  啊哈 字体：字形的集合 注意：文本的（0,0）在基线的最左端 文本偏移 实现整体旋转
html炫酷边框样式,利用SVG和CSS3来实现一个炫酷的边框动画
weixin_35940511的博客
06-07 687
这篇文章主要介绍了利用SVG和CSS3来实现一个炫酷的边框动画,不使用JavaScript使得编写过程轻松了不少,需要的朋友可以参考下今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生——网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用...
html 环形 svg 类似于dashed边框
05-30
要实现类似于 `dashed` 边框的环形效果，可以使用 SVG 的 `stroke-dasharray` 和 `stroke-dashoffset` 属性，配合 CSS 的动画效果来创建。 以下是一个示例代码： ```html <svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" stroke="#ccc" fill="none" stroke-width="10" stroke-dasharray="251.2" stroke-dashoffset="251.2" class="circle" /> </svg> ``` ```css .circle { stroke-dasharray: 251.2; stroke-dashoffset: 251.2; animation: dash 2s linear forwards; } @keyframes dash { to { stroke-dashoffset: 0; } } ``` 解释一下代码： - `<circle>` 标签用于创建一个圆，其中 `cx` 和 `cy` 属性指定圆心坐标，`r` 属性指定半径，`stroke` 属性指定边框颜色，`fill` 属性指定填充颜色，这里为透明色，`stroke-width` 属性指定边框宽度。 - `stroke-dasharray` 属性指定边框线的长度和间隔，这里设置为 `251.2`（即圆的周长），表示边框线长度为圆的周长，间隔为 0。 - `stroke-dashoffset` 属性指定边框线的起始偏移量，这里设置为 `251.2`，表示边框线从圆的最上方开始画。 - `class` 属性用于给圆添加一个 `circle` 类名，用于 CSS 选择器。 - CSS 中，使用 `animation` 属性来定义动画效果，其中 `dash` 是动画名称，`2s` 是动画时长，`linear` 是动画速度曲线，`forwards` 表示动画结束后保持最后一帧的状态。 - `@keyframes` 规则用于定义动画的具体过程，这里从 `to` 开始，表示动画从开始到结束，`stroke-dashoffset` 属性从 `251.2` 减少到 0，即边框线从圆的最上方逆时针绘制到完整的圆形。 你可以根据需要调整圆的大小、颜色、宽度、动画时长等属性，从而得到不同的环形效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值