SVG 手写签名
<svg class="kuing" xmlns="http://www.w3.org/2000/svg" width="280" height="130"><style type="text/css" >
<![CDATA[
.kuing:hover .stroke-1 {animation: write1 3s 1 ease-in-out;}
.kuing:hover .stroke-2 {animation: write2 3s 1 ease-in-out;}
.kuing:hover .stroke-3 {animation: write3 3s 1 ease-in-out;}
.kuing:hover .stroke-4 {animation: write4 3s 1 ease-in-out;}
.kuing:hover .stroke-5 {animation: write5 3s 1 ease-in-out;}
.kuing:hover .stroke-6 {animation: write6 3s 1 ease-in-out;}
.kuing:hover .stroke-7 {animation: write7 3s 1 ease-in-out;}
.stroke-1 {stroke-dasharray: 200;}
@keyframes write1 {
0% {stroke-dashoffset: 200;}
5% {stroke-dashoffset: 0;}}
.stroke-2 {stroke-dasharray: 200;}
@keyframes write2 {
0%,5% {stroke-dashoffset: 200;}
15% {stroke-dashoffset: 0;}}
.stroke-3 {stroke-dasharray: 300;}
@keyframes write3 {
0%,15% {stroke-dashoffset: 300;}
30% {stroke-dashoffset: 0;}}
.stroke-4 {stroke-dasharray: 100;}
@keyframes write4 {
0%,30% {stroke-dashoffset: 100;}
35% {stroke-dashoffset: 0;}}
.stroke-5 {stroke-dasharray: 50;}
@keyframes write5 {
0%,35% {stroke-dashoffset: 50;}
40% {stroke-dashoffset: 0;}}
.stroke-6 {stroke-dasharray: 300;}
@keyframes write6 {
0%,40% {stroke-dashoffset: 300;}
50% {stroke-dashoffset: 0;}}
.stroke-7 {stroke-dasharray: 1000;}
@keyframes write7 {
0%,50% {stroke-dashoffset: 1000;}
75% {stroke-dashoffset: 0;}}
]]>
</style>
<g style="fill: none; stroke: #000; stroke-width: 5;
stroke-linecap: round; stroke-linejoin: round;"
transform="matrix(0.5,0,0,0.5,-35,-15)">
<path class="stroke-1" d="
M104,43.2 C104,80.6 103.57,120.08 98,157.2 C96.19,169.28 90.17,204.29 88,216.2
"></path>
<path class="stroke-2" d="
M164,118.2 C159.14,121.12 136.56,140.84 132,144.2 C119.51,153.4
110.39,155.09 99,164.2 C103.37,175.12 114,183.2 124,192.2
C134,199.2 148.65,209.97 155,214.2
"></path>
<path class="stroke-3" d="
M194,122.2 C190,138.2 188,154.2 185,176.2 C184.79,182.58
184.44,206.94 197,208.2 C216.37,210.14 235,193.2 238,183.2
C242,174.2 249.39,139.55 250,135.2 C252.7,132.42 250.25,116.96
253,125.2 C247.56,169.32 244,188.69 244,210.2
"></path>
<path class="stroke-4" d="
M298,124.2 C294,149.2 293,185.77 293,211.2
"></path>
<path class="stroke-5" d="
M296,85.2 C296,88.36 297.1,91.67 299,94.2
"></path>
<path class="stroke-6" d="
M338,122.2 C336.05,139.76 333.41,156.56 333,174.2 C332.76,184.53
333.26,198.87 333,209.2 C332.93,211.89 336,148.2 342,139.2
C350,122.2 369,122.2 379,122.2 C398,123.2 398,154.2 398,166.2
C399,184.2 398.36,195.54 399,210.2
"></path>
<path class="stroke-7" d="
M486,120.2 C483,112.2 463,113.2 454,118.2 C443,124.2 440.12,131.89
438,137.2 C430.61,155.67 430.53,171.63 432,192.2 C432.12,193.93
435.7,201.82 438,202.2 C463.56,206.46 488.05,184.58 497,162.2
C498.14,159.35 497.82,156.04 499,153.2 C499.54,151.89
501.87,121.61 502,120.2 C495.6,113.8 496.21,138.15 496,147.2
C495.21,180.86 499.62,214.54 499,248.2 C498.76,261.12 482,280.2
460,282.2 C446,283.2 425,285.2 415,274.2 C392.43,245.99
433.29,224.69 449,216.2 C479.72,199.6 514.82,192.07 545,174.2
C574.78,156.57 589.42,140.68 614,120.2
"></path>
</g>
</svg>
<br />
移动鼠标到图上就会写{:victory:}
<br />
手机上好像也可以，点一下它{:victory:} [b]回复 [url=http://kuing.orzweb.net/redirect.php?goto=findpost&pid=39945&ptid=8000]1#[/url] [i]kuing[/i] [/b]
高科技~
页:
[1]