以下是 HTML5 SVG表情图标特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 SVG表情图标特效</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<!-- ico 01 -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>
<path class="st0" d="M27,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.8c-1.4,0-2.5-1.1-2.5-2.5V4.9
c0-1.4,1.1-2.5,2.5-2.5H27 M27,0H4.8C2.1,0-0.1,2.2-0.1,4.9v22.2c0,2.7,2.2,4.9,4.9,4.9H27c2.7,0,4.9-2.2,4.9-4.9V4.9
C31.9,2.2,29.7,0,27,0L27,0z"/>
<path class="st1" d="M17.6,23.2c0,0.5-0.4,0.9-0.9,0.9h-1.4c-0.5,0-0.9-0.4-0.9-0.9l0,0c0-0.5,0.4-0.9,0.9-0.9h1.4
C17.2,22.3,17.6,22.7,17.6,23.2L17.6,23.2z"/>
<g>
<g>
<circle class="st2" cx="10.8" cy="13.4" r="1.1"/>
</g>
<g>
<circle class="st2" cx="21.2" cy="13.4" r="1.1"/>
</g>
<path class="st3" d="M21.2,8.8c-2.3,0-4.3,1.8-4.6,4h-1.1c-0.1,0-0.1,0-0.1,0c-0.3-2.3-2.2-4-4.6-4c-2.5,0-4.6,2.1-4.6,4.6
c0,2.5,2.1,4.6,4.6,4.6c2.3,0,4.3-1.8,4.6-4c0,0,0.1,0,0.1,0h1.1c0.3,2.3,2.2,4,4.6,4c2.5,0,4.6-2.1,4.6-4.6
C25.8,10.9,23.7,8.8,21.2,8.8z M10.9,16.8c-1.9,0-3.4-1.5-3.4-3.4S9,10,10.9,10c1.9,0,3.4,1.5,3.4,3.4S12.7,16.8,10.9,16.8z
M21.2,16.8c-1.9,0-3.4-1.5-3.4-3.4s1.5-3.4,3.4-3.4c1.9,0,3.4,1.5,3.4,3.4S23.1,16.8,21.2,16.8z"/>
</g>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>
<path class="st0" d="M27.7,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H5.5c-1.4,0-2.5-1.1-2.5-2.5V4.9c0-1.4,1.1-2.5,2.5-2.5H27.7
M27.7,0H5.5C2.8,0,0.6,2.2,0.6,4.9v22.2c0,2.7,2.2,4.9,4.9,4.9h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9C32.6,2.2,30.4,0,27.7,0L27.7,0z"/>
<g>
<g class="st3">
<path d="M16.3,24.1c-2.9,0-5.3-2.2-5.3-5c0-0.4,0.4-0.8,0.8-0.8c0.4,0,8.6,0,9,0c0.4,0,0.8,0.4,0.8,0.8
C21.6,21.8,19.2,24.1,16.3,24.1z"/>
</g>
<g class="st1">
<path d="M13.6,9c-0.7-0.7-1.8-0.7-2.5,0L11,9l0,0c-0.7-0.7-1.8-0.7-2.5,0c-0.7,0.7-0.7,1.8,0,2.5L11,14l2.5-2.5l0,0l0.1-0.1
C14.3,10.8,14.3,9.7,13.6,9z"/>
<path d="M24.1,9c-0.7-0.7-1.8-0.7-2.5,0L21.5,9l0,0c-0.7-0.7-1.8-0.7-2.5,0c-0.7,0.7-0.7,1.8,0,2.5l2.5,2.5l2.5-2.5l0,0l0.1-0.1
C24.7,10.8,24.7,9.7,24.1,9z"/>
</g>
</g>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>
<g>
<path class="st1" d="M16,24.5c-2.9,0-5.3-2.2-5.3-5c0-0.4,0.4-0.8,0.8-0.8c0.4,0,8.6,0,9,0c0.4,0,0.8,0.4,0.8,0.8
C21.3,22.3,18.9,24.5,16,24.5z"/>
</g>
<path class="st0" d="M27.1,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.9c-1.4,0-2.5-1.1-2.5-2.5V4.9
c0-1.4,1.1-2.5,2.5-2.5H27.1 M27.1,0H4.9C2.2,0,0,2.2,0,4.9v22.2C0,29.8,2.2,32,4.9,32h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9
C32,2.2,29.8,0,27.1,0L27.1,0z"/>
<g>
<polygon class="st3" points="11,7.7 12,9.9 14.5,10.3 12.7,12 13.1,14.4 11,13.3 8.8,14.4 9.2,12 7.4,10.3 9.9,9.9 "/>
<polygon class="st3" points="21,7.7 22.1,9.9 24.6,10.3 22.8,12 23.2,14.4 21,13.3 18.9,14.4 19.3,12 17.5,10.3 20,9.9 "/>
</g>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>
<path class="st0" d="M26.9,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.8c-1.4,0-2.5-1.1-2.5-2.5V4.9
c0-1.4,1.1-2.5,2.5-2.5H26.9 M26.9,0H4.8C2.1,0-0.1,2.2-0.1,4.9v22.2c0,2.7,2.2,4.9,4.9,4.9h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9
C31.9,2.2,29.6,0,26.9,0L26.9,0z"/>
<g>
<path class="st1" d="M8.2,22.4c-0.4-0.6-0.1-1.4,0.7-1.8c4.3-2.1,9.3-2.1,13.5,0c0.8,0.4,1.1,1.2,0.7,1.8l0,0
c-0.4,0.6-1.1,0.7-1.8,0.4c-3.6-1.8-7.8-1.8-11.4,0C9.3,23.1,8.5,23,8.2,22.4L8.2,22.4z"/>
<path class="st4" d="M23.7,17c-0.1,1-0.8,1.7-1.5,1.5c-0.7-0.2-1.1-0.9-1.1-1.6c0.1-0.7,1.1-2.5,1.1-2.5
C22.2,14.2,23.8,15.9,23.7,17z"/>
<g>
<circle class="st2" cx="11" cy="12.1" r="2.1"/>
<circle class="st2" cx="19.9" cy="12.1" r="2.1"/>
</g>
</g>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>
<path class="st0" d="M27.1,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.9c-1.4,0-2.5-1.1-2.5-2.5V4.9
c0-1.4,1.1-2.5,2.5-2.5H27.1 M27.1,0H4.9C2.2,0,0,2.2,0,4.9v22.2C0,29.8,2.2,32,4.9,32h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9
C32,2.2,29.8,0,27.1,0L27.1,0z"/>
<g>
<circle class="st2" cx="11.5" cy="11.9" r="2.1"/>
<circle class="st2" cx="20.4" cy="11.9" r="2.1"/>
</g>
<path class="st1" d="M21.4,17.8c0-0.5-0.4-0.8-0.8-0.8c-0.5,0-0.8,0.4-0.8,0.8c0,1.9-1.7,3.5-3.8,3.5s-3.8-1.6-3.8-3.5
c0-0.5-0.4-0.8-0.8-0.8c-0.5,0-0.8,0.4-0.8,0.8c0,2.2,1.5,4.1,3.6,4.8v2.1c0,1,0.8,1.9,1.9,1.9s1.9-0.8,1.9-1.9v-2.1
C19.9,21.9,21.4,20,21.4,17.8z"/>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>
<path class="st0" d="M27.1,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.9c-1.4,0-2.5-1.1-2.5-2.5V4.9
c0-1.4,1.1-2.5,2.5-2.5H27.1 M27.1,0H4.9C2.2,0,0,2.2,0,4.9v22.2C0,29.8,2.2,32,4.9,32h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9
C32,2.2,29.8,0,27.1,0L27.1,0z"/>
<path class="st3" d="M21.6,9.2c-2.1,0-3.9,0.3-4.8,1.4h-2.3c-0.9-1.1-2.7-1.4-4.8-1.4c-2.9,0-5.3,0.7-5.3,3.1
c0,2.4,2.4,4.4,5.3,4.4c2.7,0,4.9-1.7,5.3-3.8h1.4c0.4,2.2,2.6,3.8,5.3,3.8c2.9,0,5.3-2,5.3-4.4C26.9,9.9,24.6,9.2,21.6,9.2z"/>
<path class="st1" d="M20.7,21.7c0-0.6-0.5-1.1-1.1-1.1H13c-0.6,0-1.1,0.5-1.1,1.1c0,0.6,0.5,1.1,1.1,1.1h2.1
c0.2,0.9,1.4,1.5,2.8,1.5C19.5,24.3,20.7,22.8,20.7,21.7C20.7,21.8,20.7,21.8,20.7,21.7C20.7,21.7,20.7,21.7,20.7,21.7z"/>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>
<path class="st0" d="M27.1,2.8c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.9c-1.4,0-2.5-1.1-2.5-2.5V5.3
c0-1.4,1.1-2.5,2.5-2.5H27.1 M27.1,0.4H4.9C2.2,0.4,0,2.6,0,5.3v22.2c0,2.7,2.2,4.9,4.9,4.9h22.2c2.7,0,4.9-2.2,4.9-4.9V5.3
C32,2.6,29.8,0.4,27.1,0.4L27.1,0.4z"/>
<path class="st1" d="M15.9,23.6c0,0.6-0.5,1.1-1.1,1.1h-1.6c-0.6,0-1.1-0.5-1.1-1.1l0,0c0-0.6,0.5-1.1,1.1-1.1h1.6
C15.4,22.5,15.9,23,15.9,23.6L15.9,23.6z"/>
<path class="st2" d="M11.2,11.1c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8C15,12.8,13.3,11.1,11.2,11.1z
M11.8,15.3c-0.9,0-1.5-0.7-1.5-1.5c0-0.9,0.7-1.5,1.5-1.5c0.9,0,1.5,0.7,1.5,1.5C13.3,14.6,12.6,15.3,11.8,15.3z"/>
<path class="st2" d="M20.2,10.3c-2.4,0-4.4,2-4.4,4.4s2,4.4,4.4,4.4s4.4-2,4.4-4.4S22.6,10.3,20.2,10.3z M18.9,17.3
c-0.9,0-1.5-0.7-1.5-1.5c0-0.9,0.7-1.5,1.5-1.5c0.9,0,1.5,0.7,1.5,1.5C20.5,16.6,19.8,17.3,18.9,17.3z"/>
<path class="st3" d="M12.8,8.3c0.1,0.5-0.2,0.9-0.6,1c-1.3,0.3-2.6,0.8-3.8,1.5c-0.4,0.2-0.8,0.1-1.1-0.3l0,0
C7.1,10,7.2,9.4,7.6,9.2c1.3-0.8,2.7-1.3,4.2-1.6C12.2,7.5,12.7,7.8,12.8,8.3L12.8,8.3z"/>
<path class="st3" d="M23.7,9.5c-0.3,0.4-0.8,0.4-1.1,0.2c-1.1-0.8-2.3-1.5-3.6-1.9c-0.4-0.1-0.6-0.6-0.4-1l0,0
c0.1-0.4,0.6-0.7,1.1-0.5c1.4,0.5,2.8,1.2,4,2.1C24,8.6,24,9.1,23.7,9.5L23.7,9.5z"/>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>
<path class="st0" d="M27.2,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H5.1c-1.4,0-2.5-1.1-2.5-2.5V4.9c0-1.4,1.1-2.5,2.5-2.5H27.2
M27.2,0H5.1C2.4,0,0.2,2.2,0.2,4.9v22.2c0,2.7,2.2,4.9,4.9,4.9h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9C32.2,2.2,29.9,0,27.2,0L27.2,0z"/>
<path class="st2" d="M23.4,11.2c-0.2-0.4-0.5-0.6-0.9-0.6h-3.6c-0.6,0-1,0.5-1,1c0,0.6,0.5,1,1,1h1c0,0,0,0,0,0c0,1.1,0.9,2.1,2.1,2.1
c1.1,0,2.1-0.9,2.1-2.1C24,12.1,23.8,11.5,23.4,11.2z"/>
<path class="st2" d="M12.9,11.2c-0.2-0.4-0.5-0.6-0.9-0.6H8.4c-0.6,0-1,0.5-1,1c0,0.6,0.5,1,1,1h1c0,0,0,0,0,0c0,1.1,0.9,2.1,2.1,2.1
c1.1,0,2.1-0.9,2.1-2.1C13.5,12.1,13.3,11.5,12.9,11.2z"/>
<path class="st1" d="M14.4,22c0,0.6-0.5,1.1-1.1,1.1h-2.2c-0.6,0-1.1-0.5-1.1-1.1l0,0c0-0.6,0.5-1.1,1.1-1.1h2.2C13.9,20.8,14.4,21.3,14.4,22
L14.4,22z"/>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>
<path class="st0" d="M27.1,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.9c-1.4,0-2.5-1.1-2.5-2.5V4.9
c0-1.4,1.1-2.5,2.5-2.5H27.1 M27.1,0H4.9C2.2,0,0,2.2,0,4.9v22.2C0,29.8,2.2,32,4.9,32h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9
C32,2.2,29.8,0,27.1,0L27.1,0z"/>
<circle class="st2" cx="11.2" cy="13.3" r="2.1"/>
<path class="st1" d="M23.3,19.4c0.4,0.5,0.2,1.4-0.5,1.8c-4,2.5-9,3-13.5,1.4c-0.8-0.3-1.2-1.1-0.9-1.7l0,0c0.3-0.6,1-0.8,1.7-0.6
c3.8,1.4,8,0.9,11.4-1.2C22.1,18.8,22.9,18.8,23.3,19.4L23.3,19.4z"/>
<path class="st4" d="M13.2,9.5c-0.2,0.3-0.6,0.4-0.9,0.2c-1.1-0.6-2.3-0.3-3.2,0.7c-0.3,0.3-0.6,0.4-0.9,0.2l0,0
C7.9,10.3,8,9.7,8.3,9.2c1.2-1.4,3-1.8,4.5-0.9C13.3,8.6,13.4,9.2,13.2,9.5L13.2,9.5z"/>
<path class="st4" d="M20.3,18.3c0.2,0.3,0.6,0.4,0.9,0.2c1.1-0.6,2.3-0.3,3.2,0.7c0.3,0.3,0.6,0.4,0.9,0.2l0,0
c0.3-0.2,0.2-0.9-0.1-1.3c-1.2-1.4-3-1.8-4.5-0.9C20.3,17.3,20.1,17.9,20.3,18.3L20.3,18.3z"/>
<path class="st2" d="M23.8,12.1c0.1,0.5-0.2,1-0.6,1.1l-4.7,1.3c-0.5,0.1-1-0.2-1.1-0.6l0,0c-0.1-0.5,0.2-1,0.6-1.1l4.7-1.3
C23.1,11.3,23.6,11.6,23.8,12.1L23.8,12.1z"/>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>
<path class="st0" d="M27.1,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.9c-1.4,0-2.5-1.1-2.5-2.5V4.9
c0-1.4,1.1-2.5,2.5-2.5H27.1 M27.1,0H4.9C2.2,0,0,2.2,0,4.9v22.2C0,29.8,2.2,32,4.9,32h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9
C32,2.2,29.8,0,27.1,0L27.1,0z"/>
<g>
<path class="st3" d="M23.1,20.8c0,3.5-3.2,6.3-7.1,6.3c-3.9,0-7.1-2.8-7.1-6.3s3.2,0,7.1,0C19.9,20.8,23.1,17.3,23.1,20.8z"/>
<g>
<g>
<circle class="st2" cx="10.8" cy="13.3" r="1.1"/>
</g>
<g>
<circle class="st2" cx="21.2" cy="13.3" r="1.1"/>
</g>
<path class="st1" d="M21.2,8.7c-2.3,0-4.3,1.8-4.6,4h-1.1c-0.1,0-0.1,0-0.1,0c-0.3-2.3-2.2-4-4.6-4c-2.5,0-4.6,2.1-4.6,4.6
c0,2.5,2.1,4.6,4.6,4.6c2.3,0,4.3-1.8,4.6-4c0,0,0.1,0,0.1,0h1.1c0.3,2.3,2.2,4,4.6,4c2.5,0,4.6-2.1,4.6-4.6
C25.8,10.8,23.7,8.7,21.2,8.7z M10.8,16.7c-1.9,0-3.4-1.5-3.4-3.4S9,9.9,10.8,9.9c1.9,0,3.4,1.5,3.4,3.4S12.7,16.7,10.8,16.7z
M21.2,16.7c-1.9,0-3.4-1.5-3.4-3.4s1.5-3.4,3.4-3.4s3.4,1.5,3.4,3.4S23,16.7,21.2,16.7z"/>
</g>
<path class="st4" d="M13.6,6.8c-0.2,0.3-0.6,0.4-0.9,0.2c-1.1-0.6-2.3-0.3-3.2,0.7C9.2,7.9,8.8,8,8.6,7.8l0,0
C8.3,7.6,8.3,6.9,8.7,6.5c1.2-1.4,3-1.8,4.5-0.9C13.6,5.8,13.8,6.4,13.6,6.8L13.6,6.8z"/>
<path class="st4" d="M18.4,6.8c0.2,0.3,0.6,0.4,0.9,0.2c1.1-0.6,2.3-0.3,3.2,0.7c0.3,0.3,0.6,0.4,0.9,0.2l0,0
c0.3-0.2,0.2-0.9-0.1-1.3c-1.2-1.4-3-1.8-4.5-0.9C18.4,5.8,18.2,6.4,18.4,6.8L18.4,6.8z"/>
</g>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path class="st0" d="M27.1,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.9c-1.4,0-2.5-1.1-2.5-2.5V4.9
c0-1.4,1.1-2.5,2.5-2.5H27.1 M27.1,0H4.9C2.2,0,0,2.2,0,4.9v22.2C0,29.8,2.2,32,4.9,32h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9
C32,2.2,29.8,0,27.1,0L27.1,0z"/>
<path class="st4" d="M21.3,15.9H10.7c-1.5,0-2.7,1.2-2.7,2.7v3.5c0,1.5,1.2,2.7,2.7,2.7h10.6c1.5,0,2.7-1.2,2.7-2.7v-3.5
C24,17.1,22.8,15.9,21.3,15.9z M22.9,18.5v1.2h-2.6v-2.8h1C22.2,16.9,22.9,17.6,22.9,18.5z M15.4,20.8v2.8h-2.7v-2.8H15.4z
M12.7,19.8v-2.8h2.7v2.8H12.7z M16.5,20.8h2.7v2.8h-2.7V20.8z M16.5,19.8v-2.8h2.7v2.8H16.5z M10.7,16.9h1v2.8H9.1v-1.2
C9.1,17.6,9.8,16.9,10.7,16.9z M9.1,22.1v-1.2h2.6v2.8h-1C9.8,23.7,9.1,22.9,9.1,22.1z M21.3,23.7h-1v-2.8h2.6v1.2
C22.9,22.9,22.2,23.7,21.3,23.7z"/>
<g>
<g>
<circle class="st2" cx="11.4" cy="12" r="1.2"/>
<g>
<path class="st3" d="M14.7,11.1c-0.1,0-0.2,0-0.3-0.1L9.7,8.6C9.4,8.5,9.3,8.1,9.4,7.7c0.2-0.3,0.6-0.4,0.9-0.3L15,9.9
c0.3,0.2,0.4,0.6,0.3,0.9C15.2,11,15,11.1,14.7,11.1z"/>
</g>
</g>
<g>
<circle class="st2" cx="21.8" cy="12" r="1.2"/>
<g>
<path class="st3" d="M18.5,11.1c0.1,0,0.2,0,0.3-0.1l4.7-2.4c0.3-0.2,0.4-0.6,0.3-0.9c-0.2-0.3-0.6-0.4-0.9-0.3l-4.7,2.4
c-0.3,0.2-0.4,0.6-0.3,0.9C18,11,18.2,11.1,18.5,11.1z"/>
</g>
</g>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>
<path class="st0" d="M27.1,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.9c-1.4,0-2.5-1.1-2.5-2.5V4.9
c0-1.4,1.1-2.5,2.5-2.5H27.1 M27.1,0H4.9C2.2,0,0,2.2,0,4.9v22.2C0,29.8,2.2,32,4.9,32h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9
C32,2.2,29.8,0,27.1,0L27.1,0z"/>
<g>
<path class="st1" d="M15.9,18c2.9,0,5.3,2.2,5.3,5c0,0.4-0.4,0.8-0.8,0.8c-0.4,0-8.6,0-9,0c-0.4,0-0.8-0.4-0.8-0.8
C10.5,20.2,12.9,18,15.9,18z"/>
</g>
<g>
<g>
<path class="st4" d="M9.6,14.2c-0.3,0-0.6-0.1-0.8-0.4c-0.3-0.4-0.2-1,0.3-1.3l1.5-1l-1.5-1.3C8.7,9.9,8.6,9.4,8.9,9
c0.3-0.4,0.9-0.5,1.3-0.1l2.5,2.1c0.2,0.2,0.4,0.5,0.3,0.8c0,0.3-0.2,0.6-0.4,0.7l-2.5,1.7C10,14.2,9.8,14.2,9.6,14.2z"/>
</g>
<g>
<path class="st4" d="M22.1,14.2c-0.2,0-0.4-0.1-0.6-0.2L19,11.9c-0.2-0.2-0.4-0.5-0.3-0.8c0-0.3,0.2-0.6,0.4-0.7l2.5-1.7
c0.4-0.3,1-0.2,1.3,0.3c0.3,0.4,0.2,1-0.3,1.3l-1.5,1l1.5,1.3c0.4,0.3,0.5,0.9,0.1,1.3C22.6,14.1,22.3,14.2,22.1,14.2z"/>
</g>
</g>
</g>
</svg>
</body>
</html>CSS代码(style.css):
body{background:#2D2E3F;}
.st0{fill:#DBA6F5;/*purple*/
}
.st1{fill:#F7696D;/*red*/
}
.st2{fill:#41C2ED;/*blue*/
}
.st3{fill:#F7CE30;/*yellow*/
}
.st4{fill:#FFFFFF;/*white*/
}
svg{width:15%;height:15%;}
分享到QQ
分享到微博
微信扫一扫
