SVG配合CSS3小Demo

来源：互联网发布：vb模拟一计算器的界面编辑：程序博客网时间：2024/06/04 18:36

主要是利用SVG和CSS3来实现一个动态加载文字和等待的图标，个人感觉还是比较实用的，特别是后面的加载等待的图标，我们不用去gif图片实现，这样减少了http请求求，又节约了一点点空间。

这里要稍微说一下:

strok-dasharray: 是用来实现虚线，什么是虚线？就是实线和空白交替出现，形成虚线；

代码为：

            stroke: black;            stroke-width: 15;            stroke-dasharray:20,20;

stroke-dasharray后面接的数字顺序是实线，空白，实线，空白....这样循环

stroke-dashoffset是虚线的偏移：经过我实现，是空白开头地方向左偏移量；

代码：

            stroke: black;            stroke-width: 15;            stroke-dasharray:20,20;    stroke-dashoffset: 10;

偏移了10，可以看到空白开头地方向左偏移了10

让效果更明显我这边再偏移了19

代码：

            stroke: black;            stroke-width: 15;            stroke-dasharray:20,20;    stroke-dashoffset: 19;

github:https://github.com/liuzaijiang/SVG-CSS3-Demon

效果：

源码

<!DOCTYPE html><html><head>   <style type="text/css">svg {    position: absolute;    top: 0;    left: 0;}.codrops-1 {    stroke-width: 20;    stroke: #000;    fill: none;stroke-dasharray:0 35%;animation:linemove1 3s infinite  ease-out  alternate;}.codrops-2 {    stroke-width: 20;    stroke: #000;    fill: none;stroke-dasharray:35% 0%;animation:linemove2 3s infinite  ease-in-out alternate;}@keyframes  linemove1{from {stroke-dashoffset:7% 7%;}to {stroke-dasharray:7% 7%;stroke-dashoffset:7%;}}@keyframes  linemove2{from {stroke-dashoffset:7% 7%;}to{stroke-dasharray:0% 35%;stroke-dashoffset:14%;}}@keyframes  move{from {stroke-dasharray:180px,40px;}20%{stroke-dasharray:170px,50px;}40%{stroke-dasharray:150px,60px;}60%{stroke-dasharray:100px,70px;}80%{stroke-dasharray:120px,75px;}to {stroke-dasharray:180px,80px;}}      </style>   </head>   <body><svg style="display: none;">          <symbol id="codrops">           <path d="M153 334C153 334 151 334 151 334C151 339 153 344 156 344C164 344 171 339 171 334C171 322 164 314 156 314C142 314 131 322 131 334C131 350 142 364 156 364C175 364 191 350 191 334C191 311 175 294 156 294C131 294 111 311 111 334C111 361 131 384 156 384C186 384 211 361 211 334C211 300 186 274 156 274"style="fill:white;stroke:red;stroke-width:2"/>          </symbol>      </svg><svg height="400px" width="400px">            <use xlink:href="#codrops" class="codrops-1"/>        </svg>        <svg height="400px" width="400px">            <use xlink:href="#codrops" class="codrops-2"/>        </svg></body></html>

0 0