css 彼得科纳的钢笔。

Posted 2021-05-13

SVG icons animation
-------------------
Svg animation

A [Pen](http://codepen.io/ikona/pen/Avucj) by [Peter Kona](http://codepen.io/ikona) on [CodePen](http://codepen.io/).

[License](http://codepen.io/ikona/pen/Avucj/license).

    <div class="container">
<div class="row-fluid">
  <div class="span3">
    <!--svg skype-->
<h1 class="hover"> Hover over</div>
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="skype" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
         viewBox="-49 141 512 512" enable-background="new -49 141 512 512" xml:space="preserve">
      <path d="M438.7,430c1.4-10.4,2.2-21,2.2-31.7c0-129.2-105.3-233.9-235.1-233.9c-12.9,0-25.6,1.1-37.9,3.1
	c-22.1-14.4-48.3-22.8-76.6-22.8C13.8,144.7-49,207.5-49,285c0,28.2,8.3,54.4,22.6,76.4c-1.9,12-2.9,24.3-2.9,36.9
	c0,129.2,105.2,233.9,235.1,233.9c14.7,0,28.9-1.4,42.8-3.9c21.5,13.4,46.9,21.1,74.1,21.1c77.5,0,140.3-62.8,140.3-140.3
	C463,479.7,454,452.5,438.7,430z M227.7,570.6C153,574.5,118.1,558,86.1,527.9c-35.8-33.6-21.4-71.9,7.7-73.8
	c29.1-1.9,46.6,33,62.2,42.7c15.5,9.7,74.6,31.8,105.8-3.9c34-38.8-22.6-58.9-64.1-65C138.5,419.2,63.7,387.1,69.5,324
	c5.8-63.1,53.6-95.4,103.8-100c64.1-5.8,105.8,9.7,138.8,37.9c38.1,32.5,17.5,68.9-6.8,71.8c-24.2,2.9-51.4-53.5-104.8-54.4
	c-55-0.9-92.2,57.3-24.3,73.8c68,16.5,140.8,23.3,167,85.4C369.5,500.7,302.5,566.7,227.7,570.6z"/>
    </svg>

</div>
  <div class="span3">
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="github" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
         viewBox="-49 231 611.9 611.9" enable-background="new -49 231 611.9 611.9" xml:space="preserve">
      <path d="M108.4,684.9c0,16.1,13.6,24.3,41,24.3c23.9,0,35.9-8.4,35.9-25.2c0-15.9-13-23.8-39.2-23.8
	C121.1,660.1,108.4,668.4,108.4,684.9z M461,231H53c-56.1,0-102,45.9-102,102v408c0,56.2,45.9,102,102,102h408
	c56.1,0,102-45.9,102-102V333C563,276.9,517.1,231,461,231z M235.4,475.4c-4.3,1.6-10.5,3.2-18.6,5.1c2.5,7.2,3.7,13.9,3.7,20.1
	c0,19.8-6,37.2-17.9,52c-12,14.8-27.5,23.5-46.4,26.3c-12.4,1.9-18.6,8.6-18.6,20.1c0,4.1,2,8.1,6.1,12.1c5.3,5.9,13,9.7,23.3,11.2
	c44.5,6.8,66.7,25.3,66.7,55.5c0,48.2-28.8,72.3-86.3,72.3c-23.7,0-43-4.2-58.3-12.6c-19.4-10.6-28.9-27.3-28.9-50
	c0-26.2,14.5-44,43.4-53.7v-1c-10.5-6.6-15.9-16.5-15.9-29.9c0-17.5,5-28.3,14.9-32.6v-1c-9.9-3.5-18.8-11.2-26.5-23.3
	c-8.7-13-13-27-13-42c0-22.4,7.9-41,23.8-55.9c15.2-14,33.5-21,54.6-21c15.2,0,29.4,3.7,42.4,11.2c14.9,0,32.2-3.7,51.8-11.2
	L235.4,475.4L235.4,475.4z M310.9,636.8h-52.7c0.6-6.2,1-16.7,1-31.7V460c0-14.6-0.4-24.7-1-30.4h52.7c-0.6,5.9-1,15.7-1,29.4v143.2
	C310,618.2,310.3,629.6,310.9,636.8z M307.4,383c-6.3,6.8-13.9,10.3-22.6,10.3c-9,0-16.7-3.5-23.1-10.3c-6.3-6.8-9.6-14.9-9.6-24.3
	c0-9.7,3.2-17.9,9.6-24.7c6.3-6.8,14.1-10.3,23.1-10.3c8.7,0,16.3,3.5,22.6,10.3s9.6,15.1,9.6,24.7C317,368.2,313.8,376.2,307.4,383
	z M454,630.7c-11.5,6.2-25.3,9.3-41.5,9.3c-22.7,0-38.4-8.1-47.1-24.3c-6.6-12.1-9.8-31.2-9.8-57.4V475h0.5v-1l-7.1-0.5
	c-4.1,0-9.3,0.5-15.9,1.4v-45.2H356v-18.3c0-8.7-0.5-15.7-1.4-21h54.3c-1,5.9-1.4,12.6-1.4,20.1v19.1h40.5v45.2
	c-1.6,0-4.4-0.1-8.6-0.5s-8.1-0.5-11.8-0.5h-20.1v86.8c0,20.8,6.8,31.2,20.6,31.2c9.7,0,18.3-2.6,26.2-7.9L454,630.7L454,630.7z
	 M143,470.3c-19.6,0-29.4,11.5-29.4,34.5c0,21.5,9.8,32.2,29.4,32.2c19,0,28.4-10.9,28.4-32.6c0-9-2.2-16.7-6.6-23.3
	C159.6,473.9,152.3,470.3,143,470.3z"/>
    </svg>
  </div>
  <div class="span3">
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="email" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
         viewBox="-49 231 611.9 611.9" enable-background="new -49 231 611.9 611.9" xml:space="preserve">
      <path d="M461,231H53c-56.1,0-102,45.9-102,102v408c0,56.1,45.9,102,102,102h408c56.2,0,102-45.9,102-102V333
	C563,276.9,517.1,231,461,231z M104,384h306c5.5,0,10.8,1.2,15.7,3.3L257,584.1L88.3,387.3C93.2,385.2,98.5,384,104,384z
	 M65.8,651.8V422.2c0-0.8,0-1.6,0.1-2.4L178,550.7L67.1,661.7C66.2,658.4,65.8,655.1,65.8,651.8z M410,690H104
	c-3.3,0-6.7-0.5-9.9-1.3L203,579.8l54,63l54-63l108.9,108.9C416.7,689.5,413.3,690,410,690z M448.2,651.8c0,3.3-0.5,6.7-1.3,9.9
	L336,550.7l112.1-130.9c0,0.8,0.1,1.6,0.1,2.4V651.8z"/>
    </svg>
  </div>
  <div class="span3">
<a href="http://www.linkedin.com">
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="link" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
         viewBox="-49 231 612 612" enable-background="new -49 231 612 612" xml:space="preserve">
      <path d="M460.2,231H53.8C-2.7,231-49,277.3-49,333.8v406.4C-49,796.7-2.7,843,53.8,843h406.4c56.5,0,102.8-46.3,102.8-102.8V333.8
	C563,277.3,516.7,231,460.2,231z M180.5,728.2H104V460.5h76.5V728.2z M142.2,422.2c-21.2,0-38.2-17.1-38.2-38.2s17.1-38.2,38.2-38.2
	s38.2,17.1,38.2,38.2C180.5,405.2,163.4,422.2,142.2,422.2z M448.2,728.2h-76.5v-153c0-21.2-17.1-38.2-38.2-38.2
	s-38.2,17.1-38.2,38.2v153h-76.5V460.5h76.5V508c15.8-21.6,39.9-47.5,66.9-47.5c47.6,0,86.1,42.8,86.1,95.6V728.2z"/>
    </svg>
    </a>
  </div>
  </div>
</div>

svg#skype {
  height:70px;
  width: 70px;
}

svg#github {
  height:70px;
  width: 70px;
}

svg#email {
  height:70px;
  width: 70px;
}

svg#link {
  height:70px;
  width: 70px;
}
svg {
  width: 150px;
  height: 150px;
  -webkit-filter: drop-shadow( 0px 0px 5px #555 );
  -moz-filter: drop-shadow( 0px 0px 5px #555 );
  filter: drop-shadow( 0px 0px 5px #555 );
  transition:1s;
}
svg:hover{
  -webkit-filter: drop-shadow( 0px 10px 5px #336633 );
  -moz-filter: drop-shadow( 0px 10px 5px #336633 );
  filter: drop-shadow( 0px 10px 5px #336633);
}
#logo:hover .st0{
  fill:#99cc99;
  transition: 5s;
}

#skype:hover{
  fill:#00aff0;
  transition: 1s;
}

#link:hover{
  fill:#0e76a8;
  transition: 1s;
}
#email:hover{
  fill:darkred;
  transition: 1s;
}
#email, #link, #skype, #logo, #github {
  width: 100px;
  height:100px;
}