很久不去 alloyTeam http://www.alloyteam.com/ 逛了, 但每一次逛都会有惊喜, 对, 这次的收获是如下:
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/CSS">
- svg {
- position: absolute;
- width: 100%;
- height: 100%;
- background-color: #fff;
- }
- .path {
- fill: none;
- stroke-width: 3px;
- }
- #path1 {
- stroke-dashoffset: 7% 7%;
- stroke-dasharray: 0 35%;
- animation: animation 3s linear forwards;
- }
- @keyframes animation {
- 100% {
- stroke-dasharray: 7% 7%;
- stroke-dashoffset: 7%;
- }
- }
- #path2 {
- stroke-dashoffset: 7% 7%;
- stroke-dasharray: 0 35%;
- animation: animation2 3s linear forwards;
- }
- @keyframes animation2 {
- 100% {
- stroke-dasharray: 7% 7%;
- stroke-dashoffset: 14%;
- }
- }
- </style>
- </head>
- <body>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
- <symbol id="pathSymbol">
<path class="path" stroke="#00adef" d="M281.221,261.806c0,2.756-2.166,4.922-4.922,4.922l0,0h-33.964c-11.715-24.119-31.503-59.855-47.156-68.026
c-15.751,7.974-35.637,43.907-47.451,68.026h-33.865l0,0c-2.756,0-4.922-2.166-4.922-4.922l0,0l0,0c0-0.295,0-0.689,0.098-0.984
c0,0,14.078-69.109,79.15-129.161c-2.953-2.56-5.907-5.119-8.959-7.58c-1.87-1.575-2.166-4.233-0.591-6.104
c1.575-1.772,4.43-2.166,6.497-0.689c3.347,2.461,6.694,5.218,9.746,8.073c3.15-2.953,6.497-5.71,10.041-8.368
c2.067-1.378,4.922-1.083,6.497,0.689c1.575,1.87,1.28,4.529-0.591,6.104c-3.052,2.56-6.104,5.218-9.155,7.876
c65.27,59.953,79.446,129.161,79.446,129.161C281.221,261.117,281.221,261.412,281.221,261.806L281.221,261.806L281.221,261.806z"></path>
- <path class="path" stroke="#00adef" d="M194.589,212.583h0.984l0,0c19.886,28.451,31.503,54.145,31.503,54.145h-63.99C163.086,266.728,174.703,241.034,194.589,212.583
- L194.589,212.583z">
- </path>
- </symbol>
- <g>
- <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pathSymbol" id="path1"></use>
- <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pathSymbol" id="path2"></use>
- </g>
- </svg>
- <script type="text/javascript">
- // function draw(className) {
- // var path = document.querySelector(className);
- // var length = path.getTotalLength();
- // console.log(length);
- // }
- // draw("#path2"); // 得到 Path 的长度为 988
- </script>
- </body>
- </html>
感觉腾讯前端还是那么厉害, 大家没事可以多去学习学习, 反正也不是什么坏事, 哈哈哈哈!!
来源: http://www.qdfuns.com/article/30142/8545867a1089d8985d3889bc641f9be2.html