预加载动画效果实现，css3总结，整理，附上svg用法及stroke-dasharray和stroke-dashoffset理解（9）

最新推荐文章于 2024-05-18 23:00:17 发布

漫游者码农

最新推荐文章于 2024-05-18 23:00:17 发布

阅读量1.5k

点赞数

分类专栏： html5 css3学习

本文链接：https://blog.csdn.net/xu2034029667/article/details/99630872

版权

css3学习同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

html5

2 篇文章 0 订阅

订阅专栏

需要用到animation知识，参考博主之前博文

还有svg基础知识，参考后文


<div class="preloader">			
			<svg>
				<!-- <circle> SVG 元素是一个SVG的基本形状，x，y轴坐标，半径，。-->
				<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2"></circle>
				<!--注：与SVG2开始，x，y，width，和height是几何Propertie S，这意味着这些属性也可以用作CSS属性。全局属性
					fill它定义了它应用的图形元素内部的颜色。
						stroke-width
定义要应用于形状的笔触的宽度。
值：<length> | <百分比> ; 动画：是的
				-->
			</svg>
		</div>

<style>
.preloader {
				z-index: 1;
				position: absolute;
				border: 1px red solid;
				width: 100%;
			}
			/*infinite无限*/
			.preloader .path {
				-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
				animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
			}
			/*关键的关键是,设置关键帧,针对什么类*/
			@-webkit-keyframes dash {
				/*stroke-dasharray:给的一个数,那么就是实线为1,虚线也是1,两个数就是实线1 虚线200相当于没有
				 * 而单独89 ，除开虚线89，不足以再产生一条虚线
				 官方没有给逗号，给不给都可以
				 默认起点，即偏移为0情况，封闭图形，即是顺时针方向，负数为逆时针
				 */
				0% {
					stroke-dasharray:1,200;
					stroke-dashoffset: 0;
				}
				50% {
					stroke-dasharray: 89;
					/*stroke-dashoffset: -35px;*/
					/*起点拽回顺时针30开始*/
				}
				100% {
					stroke-dasharray:89 200;
					stroke-dashoffset: -126;
				 /*负值为逆时针方向,顺着轨迹移动126,即是产生消失效果*/
				}
			}
			/*stroke-dasharray="167" stroke="red"
			 * <!--stroke-dasharray="167" stroke="red" 这意味着疏密程度变化 ，要么百分数，要么数字，实际上相对周长而言，比如
			 * r=20 周长为120左右，89差不多占据四分之三-->
			 */
			/*
			 * 作为呈现属性，它可以被应用到任何元素，但它只有在下列十元素效果：
			 * <altGlyph>，<circle>，<ellipse>，<path>，<polygon>，<polyline>，<rect>，<text>，<textPath>，<tref>，和<tspan>
			 * stroke-dasharray
定义用于绘制形状轮廓的破折号和间隙的图案。
价值：none| <dasharray>; 动画：是的
个人理解是间隙和非间隙的比例，单独一个数，那么间隙和非间隙都是它，
两个数， 正好一个是非间隙，一个是间隙,重点是
stroke-dashoffset
定义关联的虚线阵列的渲染时的偏移量。
值：<百分比> | <length> ; 动画：是的*/
			@keyframes dash {
				0% {
					stroke-dasharray: 1, 200;
					stroke-dashoffset: 0;
				}
				50% {
					stroke-dasharray: 89, 200;
					stroke-dashoffset: -35px;
				}
				100% {
					stroke-dasharray: 89, 200;
					stroke-dashoffset: -126px;
				}
			}			
			@-webkit-keyframes color {
				100%,
				0% {
					stroke: #d62d20;
				}
				/*40% {
					stroke: #0057e7;
				}
				66% {
					stroke: #008744;
				}
				80%,
				90% {
					stroke: #ffa700;
				}*/
			}
			@keyframes color {
				100%,
				0% {
					stroke: #d62d20;
				}
				40% {
					stroke: #0057e7;
				}
				66% {
					stroke: #008744;
				}
				80%,
				90% {
					stroke: #ffa700;
				}
			}
</style>

该svg元件是一个定义一个新的坐标系和容器视口。它用作SVG文档的最外层元素，但它也可用于在SVG或HTML文档中嵌入SVG片段。

注意：xmlns只有SVG文档的最外层svg元素才需要该属性。内部元素或HTML文档内部不需要它。svg

<span style="color:#333333"><span style="color:#333333"><code class="language-html"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>svg</span> <span style="color:#669900">viewBox</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>0 0 300 100<span style="color:#999999">"</span></span> <span style="color:#669900">xmlns</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>http://www.w3.org/2000/svg<span style="color:#999999">"</span></span> <span style="color:#669900">stroke</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>red<span style="color:#999999">"</span></span> <span style="color:#669900">fill</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>grey<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>circle</span> <span style="color:#669900">cx</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>50<span style="color:#999999">"</span></span> <span style="color:#669900">cy</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>50<span style="color:#999999">"</span></span> <span style="color:#669900">r</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>40<span style="color:#999999">"</span></span> <span style="color:#999999">/></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>circle</span> <span style="color:#669900">cx</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>150<span style="color:#999999">"</span></span> <span style="color:#669900">cy</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>50<span style="color:#999999">"</span></span> <span style="color:#669900">r</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>4<span style="color:#999999">"</span></span> <span style="color:#999999">/></span></span>

  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>svg</span> <span style="color:#669900">viewBox</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>0 0 10 10<span style="color:#999999">"</span></span> <span style="color:#669900">x</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>200<span style="color:#999999">"</span></span> <span style="color:#669900">width</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>100<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>circle</span> <span style="color:#669900">cx</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>5<span style="color:#999999">"</span></span> <span style="color:#669900">cy</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>5<span style="color:#999999">"</span></span> <span style="color:#669900">r</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>4<span style="color:#999999">"</span></span> <span style="color:#999999">/></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>svg</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>svg</span><span style="color:#999999">></span></span></code></span></span>

在CodePen中打开在JSFiddle中打开

属性Section

baseProfile 自SVG 2以来已弃用

文档所需的最小SVG语言配置文件。
值类型：<string> ; 默认值：无; 动画：没有

contentScriptType 自SVG 2以来已弃用

SVG片段使用的默认脚本语言。
值类型：<string> ; 默认值：application/ecmascript; 动画：没有

contentStyleType 自SVG 2以来已弃用

SVG片段使用的默认样式表语言。
值类型：<string> ; 默认值：text/css; 动画：没有

height

显示矩形视口的高度。（不是其坐标系的高度。）
值类型：<length> | <百分比> ; 默认值：auto; 动画：是的

preserveAspectRatio

version 自SVG 2以来已弃用

哪个版本的SVG用于元素的内部内容。
值类型：<number> ; 默认值：无; 动画：没有

viewBox

当前SVG片段的SVG视口坐标。
值类型：<list-of-numbers> ; 默认值：无; 动画：是的

width

显示的矩形视口宽度。（不是其坐标系的宽度。）
值类型：<length> | <百分比> ; 默认值：auto; 动画：是的

x

显示svg容器的x坐标。对最外层svg元素没有影响。
值类型：<length> | <百分比> ; 默认值：0; 动画：是的

y

svg容器的显示y坐标。对最外层svg元素没有影响。
值类型：<length> | <百分比> ; 默认值：0; 动画：是的

注：与SVG2开始，x，y，width，和height是几何Propertie S，这意味着这些属性也可以用作CSS属性。

全局属性Section

核心属性

最值得注意的是：id，tabindex

样式属性

class， style

条件处理属性

最值得注意的是：requiredExtensions，systemLanguage

事件属性

全局事件属性，图形事件属性，文档事件属性，文档元素事件属性

演示属性

最值得注意的是：clip-path，clip-rule，color，color-interpolation，color-rendering，cursor，display，fill，fill-opacity，fill-rule，filter，mask，opacity，pointer-events，shape-rendering，stroke，stroke-dasharray，stroke-dashoffset，stroke-linecap，stroke-linejoin，stroke-miterlimit，stroke-opacity，stroke-width，transform，vector-effect，visibility

咏叹调属性

aria-activedescendant，aria-atomic，aria-autocomplete，aria-busy，aria-checked，aria-colcount，aria-colindex，aria-colspan，aria-controls，aria-current，aria-describedby，aria-details，aria-disabled，aria-dropeffect，aria-errormessage，aria-expanded，aria-flowto，aria-grabbed，aria-haspopup，aria-hidden，aria-invalid，aria-keyshortcuts，aria-label，aria-labelledby，aria-level，aria-live，aria-modal，aria-multiline，aria-multiselectable，aria-orientation，aria-owns，aria-placeholder，aria-posinset，aria-pressed，aria-readonly，aria-relevant，aria-required，aria-roledescription，aria-rowcount，aria-rowindex，aria-rowspan，aria-selected，aria-setsize，aria-sort，aria-valuemax，aria-valuemin，aria-valuenow，aria-valuetext，role

使用说明Section

分类	容器元素，结构元素
允许的内容	任意数量的以下元素中的，以任何顺序：动画元素描述元素的形状要素的结构要素梯度元件 `<a>`，`<altGlyphDef>`，`<clipPath>`，`<color-profile>`，`<cursor>`，`<filter>`，`<font>`，`<font-face>`，`<foreignObject>`，`<image>`，`<marker>`，`<mask>`，`<pattern>`，`<script>`，`<style>`，`<switch>`，`<text>`，`<view>`

产品规格Section

规格	状态	评论
可缩放矢量图形（SVG）2 该规范中“<svg>”的定义。	候选推荐
可缩放矢量图形（SVG）1.1（第二版）该规范中“<svg>”的定义。	建议	初步定义

浏览器兼容性Section

更新GitHub上的兼容性数据

	桌面						移动
	铬	边缘	火狐	IE浏览器	歌剧	苹果浏览器	Android webview	适用于Android的Chrome	适用于Android的Firefox	适用于Android的Opera	iOS上的Safari	三星互联网
`svg`	全力支持1	全力支持是的	全力支持1.5	全力支持9	全力支持8	全力支持3	全力支持3	全力支持是的	全力支持4	全力支持是的	全力支持3	？
`baseProfile` 弃用	全力支持是的	？	？	？	全力支持是的	？	全力支持是的	全力支持是的	？	？	？	？
`contentScriptType` 弃用	没有支持号	？	？	？	没有支持号	？	没有支持号	没有支持号	？	？	？	？
`contentStyleType` 弃用	没有支持号	？	？	？	没有支持号	？	没有支持号	没有支持号	？	？	？	？
`height`	全力支持1	全力支持是的	全力支持1.5	全力支持9	全力支持8	全力支持3	全力支持3	全力支持是的	全力支持4	全力支持是的	全力支持3	？
`preserveAspectRatio`	全力支持1	全力支持是的	全力支持1.5	全力支持9	全力支持8	全力支持3	全力支持3	全力支持是的	全力支持4	全力支持是的	全力支持3	？
`version` 弃用	全力支持是的	？	？	？	全力支持是的	？	全力支持是的	全力支持是的	？	？	？	？
`viewBox`	全力支持1	全力支持是的	全力支持1.5	全力支持9	全力支持8	全力支持3	全力支持3	全力支持是的	全力支持4	全力支持是的	全力支持3	？
`width`	全力支持1	全力支持是的	全力支持1.5	全力支持9	全力支持8	全力支持3	全力支持3	全力支持是的	全力支持4	全力支持是的	全力支持3	？
`x`	全力支持1	全力支持是的	全力支持1.5	全力支持9	全力支持8	全力支持3	全力支持3	全力支持是的	全力支持4	全力支持是的	全力支持3	？
`y`	全力支持1	全力支持是的	全力支持1.5	全力支持9	全力支持8	全力支持3	全力支持3	全力支持是的	全力支持4	全力支持是的	全力支持3	？
`zoomAndPan`	全力支持是的	？	？	？	全力支持是的	？	全力支持是的	全力支持是的	？	？	？	？

传说

全力支持

没有支持

兼容性未知

已过时。不适用于新网站。

吐糟一句：还是看权威写法，网上查到消息，看起来写的很清晰简单的样子，但是有些核心问题，仍然没有答案，当然有也不太敢相信，比如在html中将svg作为标签使用，是否该引用xmlns属性，没有答案，但是官方一些，权威一些的网站

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg 如下所示，说的清清楚楚，html文档内部不需要

https://www.jianshu.com/p/f5b510b656f2一开始看了这个文章，也不错，但总觉得万一遇到其他元素呢，能不能查到呢？最后还是要看官方一些的

https://svgwg.org/svg2-draft/painting.html#StrokeDashing

漫游者码农

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
预加载动画效果实现，css3总结，整理，附上svg用法及stroke-dasharray和stroke-dashoffset理解（9）

需要用到animation知识，参考博主之前博文还有svg基础知识，参考后文<div class="preloader"> <svg>  <circle class="path" cx="50" cy="50...
复制链接

扫一扫

专栏目录