预加载动画效果实现,css3总结,整理,附上svg用法及stroke-dasharray和stroke-dashoffset理解(9)
需要用到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
svg
如果片段以不同的宽高比显示,则片段必须如何变形。
值类型:(none
| xMinYMin
| xMidYMin
| xMaxYMin
| xMinYMid
| xMidYMid
| xMaxYMid
| xMinYMax
|xMidYMax
| xMaxYMax
)(meet
| slice
)?; 默认值:xMidYMid meet
; 动画:是的
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
预加载动画效果实现,css3总结,整理,附上svg用法及stroke-dasharray和stroke-dashoffset理解(9)相关推荐
- 超酷的 CSS3 loading 预加载动画特效
给大家介绍一款超酷CSS3 loading预加载动画特效. 该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成. HTML结构 4种loading预加载动画 ...
- HTML5+CSS3小实例:简单又好看的加载动画效果
HTML5+CSS3做一个简单又好看的加载动画效果,一个三色圆环转动,再加圆环内部文字转动,效果虽然简单,但第一次看到还是很惊艳的,最主要一点,代码真的超简单的. 效果: 源码: <!DOCTY ...
- 【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTY ...
- 真是好东西!一组动感的页面加载动画效果
如果您曾经访问过 Nicolas Zezuka 和 Active Theory 的出色的设计网站,你可能已经注意到在显示新内容之前动感的页面加载动画了.这种风格的动画效果最近非常流行,因此这篇文章想给 ...
- php设置加载动画,如何用CSS3制作页面圆圈加载动画(附代码)
打开页面时,经常会遇到页面正在加载的情况,作为一个前端工程师,你知道如何用CSS3实现页面加载动画效果吗?这篇文章就和大家分享一个炫酷的圆圈加载动画效果的代码,有一定的参考价值,感兴趣的朋友可以看看. ...
- 【每日一练】118—一款评论留言加载动画效果
写在前面 今天这个练习也是我们在开发中会经常遇到的一个实用场景,比方我们在开发个人主页或者企业营销主页时,对某人或者某物的推荐留言评论,都会应用到,这种效果也是我们在很多页面中经常见到的一种效果,好了 ...
- 模仿滴滴单车解锁的时候,从0%到90%的欺骗加载动画效果
/**欺骗加载动画效果-*/var text = '已解锁{value}%';var interval;var __fakeLoading = function (callback, time, pe ...
- SAP UI的加载动画效果和幽灵设计(Ghost Design)
这是Jerry 2021年的第 14 篇文章,也是汪子熙公众号总共第 285 篇原创文章. 在本篇文章之前,Jerry 印象最深的幽灵,应该要算<星际争霸I>里人族能够隐形的空中单位 Wr ...
- jsp预加载转圈_30种CSS3炫酷页面预加载loading动画特效(推荐)
这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画.当你点击页面的任何 ...
最新文章
- springboot整合mybatis和mybatis-plus
- C语言: const关键字与指针
- DPDK EAL parameters(DPDK环境抽象层参数)-MD版本(F-Stack配置文件的配置参数)
- UIView中常见的方法汇总
- JavaScript 编码规范大全-Eslint(持续更新,欢迎关注点赞加评论)
- 九零后女孩币圈变形记
- QQ自动登录 发消息给某人C++/C
- Matlab画图函数与参数
- Chisel Bootcamp安装说明
- 图像纹理特征总体简述
- ubuntu上安装使用冰封王座
- 远程唤醒、WOL、Magic_Packet【转】
- Java 编写的 坦克大战小游戏
- android 定位工具类,高德地图定位工具类
- ODX介绍(2)[ DiagLayerStructure]
- 实战案例讲解:用户画像如何应用?
- 英语词组的日常积累(有点长,接近300个)
- ubuntu + eigen3 安装(解决 fatal error: Eigen/Core: No such file or directory)
- Python 的日志模板
- 在线视频播放代码大全
热门文章
- 普冉PY32系列(二) Ubuntu GCC Toolchain和VSCode开发环境
- 云端Python编程给你“好看”
- ace admin switch 开关中英文切换
- java写抽象类的测试_如何使用JUnit在Java中测试抽象类?
- ADS仿真,3db均衡器是否可以补偿3db插入损耗?
- C语言初中入门,[初中教育]C语言程序设计入门篇.ppt
- 新浪微博开放平台开发-android客户端(3)
- Linux中mysql密码重置
- easyui-textbox 隐藏解决方案
- Java中使用二维数组打印出杨辉三角