JSDM

HTML

 
1
<div class="kz-photo">
2
<svg class="kz-photo-line" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="227px" height="224px">
3
  <circle class="line circle" cx="114" cy="112" r="107"/>
4
  <path class="line torso" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M208.359,164.118
5
    l-5.216-2.414c0,0-1.651-2.129-2.616-2.49c-2.08-0.779-9.845-3.479-11.272-4.287l-8.114-3.369c0,0-12.777-5.741-16.036-5.148
6
    c-3.26,0.593-11.556,5.148-11.556,5.148h-17.776c0,0-39.999,40.479-44.294,42.553c-4.296,2.074,0.864-37.628,0.864-37.628
7
    l0.188-7.07l-0.364-9.914l-0.753-2.408l0.683,5.02l0.526,3.876l-0.28,10.496l-16.564,2.518c-3.185,1.005-5.981,2.54-8.814,4.295
8
    c-2.02,1.251-3.112,2.638-4.247,4.65c-1.338,2.375-2.482,4.82-3.667,7.274l-1.73,5.624l-1.73,5.193l-4.76,8.651l-1.553,3.625"/>
9
  <path class="line hair" fill="none" stroke="#000000" stroke-miterlimit="10" d="M181.811,151.482c0,0,1.287-11.487,0.979-13.902
10
    c-1.268-9.869-5.378-18.948-9.014-28.107c-2.22-5.594-4.354-11.223-6.506-16.843c-0.668-1.745-1.335-3.491-2.003-5.237
11
    c-2.372-6.86-4.611-13.782-7.109-20.596c-1.75-4.771-4.079-9.325-6.63-13.714c-1.271-2.186-2.604-4.334-3.98-6.454
12
    c-1.992-3.067-3.563-4.99-6.496-7.091c-1.836-1.315-3.602-2.727-5.421-4.063c-3.468-1.926-6.706-3.45-10.406-4.865
13
    c-2.573-0.984-4.284-1.957-7.064-2.303c-6.865-0.855-13.721-0.541-20.53,0.595c-6.408,1.068-12.995,2.411-18.582,5.902
14
    c-2.334,1.459-4.738,2.932-6.358,5.211c-3.304,4.646-4.24,8.99-4.985,14.496l0.433,3.678l-1.081,5.841l-0.434,4.11
15
    c-0.161,0.968,0.118,1.937-0.042,2.905c-0.26,1.584-1.185,2.903-1.463,4.454c-0.516,2.872,0.114,4.839,1.289,7.351
16
    c0.505,1.299,1.494,2.908,1.512,4.306c0.023,1.818-1.053,3.504-1.5,5.219c-1.188,4.559-0.808,11.307-0.649,12.745
17
    s1.07,3.906,1.07,3.906c-0.73,5.474-0.886,10.79-0.866,16.301c0.011,2.922,0.064,5.843,0.118,8.764
18
    c0.053,2.821,0.16,5.6,0.902,3.811,1.848,7.387,4.122,10.655c1.4,2.014,2.856,4.267,4.665,5.917"/>
19
  <path class="line face" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M149.146,86.429
20
    c0,1.567-0.039,3.07-0.434,4.586c-0.508,1.952-1.282,3.799-1.857,5.709c-0.396,1.318-1.132,2.403-1.916,3.514
21
    c-0.752,1.065-2.104,1.785-3.126,2.565c-0.986,0.755-2.221,1.326-3.389,1.821c0,0-1.233,1.806-1.611,3.219
22
    s-2.133,10.777-2.133,10.777c0.149-2.157,0.197-5.215,0.758-7.934c0.642-3.107,1.795-5.75,1.795-5.75
23
    c-0.903,0.122-1.887,0.026-2.626-0.314c-0.382-0.175-0.771-0.441-0.959-0.829c-0.146-0.299,0.006-0.881-0.334-1.01
24
    c-0.667-0.251-1.359,1.534-1.605,1.922c-0.986,1.561-1.944,3.14-2.919,4.708c-1.488,2.395-2.998,4.781-4.614,7.092
25
    c-1.3,1.857-2.653,3.8-4.361,5.31c-2.241,1.981-12.333,9-14.11,9.888c-2.827,1.415-5.181,3.799-8.262,4.701
26
    c-1.499,0.438-3.14,0.42-4.686,0.566c-1.513,0.142-3.234,0.419-4.72-0.04c-1.275-0.395-4.818-2.283-8.11-5.449
27
    c-4.16-4.001-7.723-9.683-8.666-11.766c-1.659-3.668-4.422-10.691-4.422-10.691s-0.911-2.467-1.07-3.906s-0.539-8.187,0.649-12.745
28
    c0.447-1.714,1.523-3.401,1.5-5.219c-0.018-1.398-1.007-3.007-1.512-4.306c-1.174-2.512-1.805-4.479-1.289-7.351
29
    c0.278-1.55,1.204-2.87,1.463-4.454c0.159-0.969-0.12-1.937,0.042-2.905l0.434-4.11l1.081-5.841c0,0,1.347-2.592,4.235-6.813
30
    c2.889-4.222,17.555-7.778,19.777-8.444c2.222-0.667,7.555-4,7.555-4s2.666,4.667,3.667,4.778
31
    c0.999,0.111,10.666,2.667,11.665,3.889c1.001,1.222,9.444,13.777,11.445,22.666"/>
32
</svg>
33
  <img src="http://www.kristenzirkler.com/wp-content/uploads/2014/08/kz-photo.jpg"  />
34
</div>
!

CSS

x
 
1
$line-weight: 1px;
2
$circle-weight: 3px;
3
4
.kz-photo {
5
  width: 227px;
6
  height: 227px;
7
  position: absolute;
8
  margin: auto;
9
  top: 0; bottom: 0;
10
  right: 0; left: 0;
11
}
12
img {
13
  position: absolute;
14
  top: 3px; left: 5px;
15
  border-radius: 50%;
16
  overflow: hidden;
17
  border: $circle-weight solid #fff;
18
  width: 211px;
19
  height: 212px;
20
  z-index: 3;
21
  opacity: 1;
22
  animation: photo-ani 4s forwards;
23
}
24
.kz-photo-line {
25
  z-index: 2;
26
  position: relative;
27
}
28
.line {
29
  fill: none;
30
  stroke: #fff;
31
  stroke-width: $line-weight;
32
33
  stroke-dasharray: 400;
34
  stroke-dashoffset: 400;
35
  animation: line-ani 5.5s forwards;
36
}
37
.circle {
38
  stroke-width: $circle-weight;
39
40
  stroke-dasharray: 700;
41
  stroke-dashoffset: 700;
42
  animation: line-ani 3s forwards;
43
}
44
45
/* Keyframes */
46
@keyframes line-ani {
47
  to {
48
    stroke-dashoffset: 0;
49
  } 
50
}
51
@keyframes photo-ani {
52
  0% {
53
    opacity: 0;
54
  }
55
  50% {
56
    opacity: 0;
57
  }
58
  100% {
59
    opacity: 1;
60
  }
61
}
62
63
64
/* Style Demo */
65
body {
66
  background: #2c3e50;
67
}
!
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
1
 
1
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................