svg实现放大效果
在ai上写几个字
例如：
svg代码：
#XMLID_57_{
animation:zizou 3s;
}
@keyframes zizou{
from{
transform:scale(1.0);
}
to{
transform:scale(1.2);
}
}
#XMLID_65_{
animation:zizou 3s;
}
@keyframes zizou{
from{
transform:scale(1.0);
}
to{
transform:scale(1.2);
}
}
#XMLID_68_{
animation:zizou 3s;
}
@keyframes zizou{
from{
transform:scale(1.0);
}
to{
transform:scale(1.2);
}
}
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
svg{
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: block;
margin: 0 auto;
}
#XMLID_57_{
animation:zizou 3s;
}
@keyframes zizou{
from{
transform:scale(1.0);
}
to{
transform:scale(1.2);
}
}
#XMLID_65_{
animation:zizou 3s;
}
@keyframes zizou{
from{
transform:scale(1.0);
}
to{
transform:scale(1.2);
}
}
#XMLID_68_{
animation:zizou 3s;
}
@keyframes zizou{
from{
transform:scale(1.0);
}
to{
transform:scale(1.2);
}
}
</style>
</head>
<body>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 200 100" style="enable-background:new 0 0 200 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:#94EDFF;}
</style>
<g id="XMLID_3_">
<path id="XMLID_57_" d="M42.5,31.2H44l1.5,1.5c-1,2-2.5,3-4.5,3c0,1.6,1.7,4.1,5.3,7.5c-0.5,14-1.8,21-3.8,21h-2.3l-7.5-3
c-4.4,0.5-7.1,1.2-8.3,2.3l-0.8-0.8V62C26.3,52.1,30,44.1,35,38l-2.3-2.3c0-1.2,3-2.5,9-3.8L42.5,31.2z M27.5,59h0.8l1.5-1.5H29
L27.5,59z M29.8,53.7h1.5c0.9,0,1.9-3.8,3-11.3C31.3,45.9,29.8,49.6,29.8,53.7z M41.8,41.7c0,3.5-0.8,6.8-2.3,9.8L41,53
c-2.6,2.5-5.1,3.8-7.5,3.8v0.8h3.8v2.3l-0.8,0.8v0.8l3.8,0.8c2,0,3-4.7,3-14.3v-4.5L41.8,41.7z M36.5,39.5l0.8,0.8
c-0.9,1-1.6,5-2.3,12h1.5l3-10.5L38.8,41v-0.8l0.8-3h-0.8L36.5,39.5z M66.5,26.7l1.5,1.5l-0.8,4.5L68,35c-1.4,0.6-3.1,2.9-5.3,6.8
h1.5l2.3-1.5H68l1.5,1.5v0.8c-0.9,1.9-3.1,3.4-6.8,4.5v0.8c3.9,0,6.1,1,6.8,3v3c-1.9,8-3.6,12-5.3,12L63.5,65l-9,1.5l-0.8-0.8v-3
c0-3,1.7-8,5.3-15h-0.8l-5.3,3h-2.3l-1.5-1.5v-0.8l9.8-9h-0.8l-3.8,3H53L51.5,41v-3c2-1.9,3-4.1,3-6.8l0.8-0.8h3l1.5,1.5v0.8
L59,33.5v0.8h3C62,31,63.5,28.5,66.5,26.7z M57.5,61.2V62h0.8c2.5,0,4-3.2,4.5-9.8h-1.5C58.8,54.4,57.5,57.4,57.5,61.2z"/>
<path id="XMLID_65_" d="M88.9,25.2h2.6l2.6,2.6c-0.6,2.4-1.8,3.6-3.6,3.6v6.9l2.6,4.5l0.9-0.9H95l0.8,0.9
c8.6-1.4,12.9-3.8,12.9-7.1H108l-4.3,0.9L102,35l-5.3,0.8L95,34c3-2.4,5.6-3.6,7.7-3.6h12.2l1.7,1.9c-2.1,1.1-3.9,7-5.3,17.6
l1.9,12.2c-1.9,4.7-5.4,7.1-10.5,7.1c-5.1-0.6-7.7-1.8-7.7-3.6l1.7-1.9l6.9,1.9c3.4-1.4,5.1-2.6,5.1-3.6V50.7l0.9-4.3h-0.9
l-8.6,7.9h-1.7l-0.9-0.9h-0.8c0,1.8-0.6,2.6-1.7,2.6l-1.9-2.6V49h-1.7c-3.5,0-6.9,6.1-10.3,18.4l-0.9,0.9h-2.6l-1.7-1.9
c1.9-14.6,3.3-21.9,4.3-21.9h0.9l5.1,4.5h1.9l1.7-1.9c-3.5-3.6-5.3-8.3-5.3-14.1L83.8,34h-3.6l-3.4-1.7v-1.9
C76.9,29.2,80.9,27.5,88.9,25.2z M96.7,44.5v0.9l0.8,6.2l6.9-6.2v-0.9l-5.1,0.9L96.7,44.5z"/>
<path id="XMLID_68_" d="M158.8,22.2l0.8,0.8v0.8l-2.3,4.5v7.5l6.8-1.5l3,3.8c0,9-3.5,13.5-10.5,13.5v0.8l0.8,12
c-0.8,2.5-2.5,3.8-5.3,3.8c-1.5-3.4-2.3-6.9-2.3-10.5v-6.8c-1-1.1-1.5-2.9-1.5-5.3h-0.8l-6,3.8h-0.8l-1.5-1.5c0-1.6,4-7.1,12-16.5
l0.8-0.8V29h-1.5c-7,0-11.8,5.3-14.3,15.8l-2.3,6l0.8,0.8v0.8c-0.6,4-1.6,6-3,6H131c-0.8,0-1.5-1-2.3-3c1-8.3,2.5-15.5,4.5-21.8
c-1.3,0.4-3.3,4.1-6,11.3c-0.6,0-1.1,2.3-1.5,6.8l-5.3,5.3l-2.3-3.8v-3l4.5-12v-3l-1.5-2.3l2.3-2.3h3l4.5,3.8
c3.2-7.5,6.2-11.3,9-11.3l0.8,0.8v1.5c-3,5.4-4.5,9.1-4.5,11.3c5-7,11.3-11.5,18.8-13.5L158.8,22.2z M157.3,39.5l-0.8,7.5v1.5h1.5
c2.5-1.2,3.8-3.2,3.8-6v-3H157.3z"/>
</g>
<ellipse id="XMLID_2_" class="st0" cx="12.5" cy="52.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_4_" transform="matrix(0.866 -0.5 0.5 0.866 -24.4087 13.239)" class="st0" cx="12.5" cy="52.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_5_" transform="matrix(0.5 -0.866 0.866 0.5 -38.9277 36.9086)" class="st0" cx="12.5" cy="52.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_6_" class="st0" cx="12.5" cy="52.2" rx="7.2" ry="2.5"/>
<ellipse id="XMLID_7_" transform="matrix(-0.5 -0.866 0.866 -0.5 -26.4277 89.0753)" class="st0" cx="12.5" cy="52.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_8_" transform="matrix(-0.8589 -0.5122 0.5122 -0.8589 -3.4851 103.373)" class="st0" cx="12.5" cy="52.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_38_" class="st0" cx="24.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_37_" transform="matrix(0.866 -0.5 0.5 0.866 -38.801 23.5262)" class="st0" cx="24.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_36_" transform="matrix(0.5 -0.866 0.866 0.5 -60.6405 63.301)" class="st0" cx="24.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_35_" class="st0" cx="24.5" cy="84.2" rx="7.2" ry="2.5"/>
<ellipse id="XMLID_34_" transform="matrix(-0.5 -0.866 0.866 -0.5 -36.1405 147.4676)" class="st0" cx="24.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_33_" transform="matrix(-0.8589 -0.5122 0.5122 -0.8589 2.4301 169.003)" class="st0" cx="24.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_44_" class="st0" cx="74.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_43_" transform="matrix(0.866 -0.5 0.5 0.866 -32.1022 48.5262)" class="st0" cx="74.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_42_" transform="matrix(0.5 -0.866 0.866 0.5 -35.6405 106.6022)" class="st0" cx="74.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_41_" class="st0" cx="74.5" cy="84.2" rx="7.2" ry="2.5"/>
<ellipse id="XMLID_40_" transform="matrix(-0.5 -0.866 0.866 -0.5 38.8595 190.7689)" class="st0" cx="74.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_39_" transform="matrix(-0.8589 -0.5122 0.5122 -0.8589 95.3729 194.614)" class="st0" cx="74.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_50_" class="st0" cx="124.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_49_" transform="matrix(0.866 -0.5 0.5 0.866 -25.4035 73.5262)" class="st0" cx="124.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_48_" transform="matrix(0.5 -0.866 0.866 0.5 -10.6405 149.9035)" class="st0" cx="124.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_47_" class="st0" cx="124.5" cy="84.2" rx="7.2" ry="2.5"/>
<ellipse id="XMLID_46_" transform="matrix(-0.5 -0.866 0.866 -0.5 113.8595 234.0702)" class="st0" cx="124.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_45_" transform="matrix(-0.8589 -0.5122 0.5122 -0.8589 188.3156 220.2249)" class="st0" cx="124.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_56_" class="st0" cx="181.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_55_" transform="matrix(0.866 -0.5 0.5 0.866 -17.7669 102.0262)" class="st0" cx="181.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_54_" transform="matrix(0.5 -0.866 0.866 0.5 17.8595 199.2669)" class="st0" cx="181.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_53_" class="st0" cx="181.5" cy="84.2" rx="7.2" ry="2.5"/>
<ellipse id="XMLID_52_" transform="matrix(-0.5 -0.866 0.866 -0.5 199.3595 283.4336)" class="st0" cx="181.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_51_" transform="matrix(-0.8589 -0.5122 0.5122 -0.8589 294.2703 249.4214)" class="st0" cx="181.5" cy="84.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_32_" class="st0" cx="18.5" cy="17.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_31_" transform="matrix(0.866 -0.5 0.5 0.866 -6.1048 11.5499)" class="st0" cx="18.5" cy="17.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_30_" transform="matrix(0.5 -0.866 0.866 0.5 -5.6168 24.6048)" class="st0" cx="18.5" cy="17.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_29_" class="st0" cx="18.5" cy="17.2" rx="7.2" ry="2.5"/>
<ellipse id="XMLID_28_" transform="matrix(-0.5 -0.866 0.866 -0.5 12.8832 41.7715)" class="st0" cx="18.5" cy="17.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_27_" transform="matrix(-0.8589 -0.5122 0.5122 -0.8589 25.5957 41.3864)" class="st0" cx="18.5" cy="17.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_14_" class="st0" cx="68.5" cy="15.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_13_" transform="matrix(0.866 -0.5 0.5 0.866 1.5939 36.2819)" class="st0" cx="68.5" cy="15.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_12_" transform="matrix(0.5 -0.866 0.866 0.5 21.1153 66.9061)" class="st0" cx="68.5" cy="15.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_11_" class="st0" cx="68.5" cy="15.2" rx="7.2" ry="2.5"/>
<ellipse id="XMLID_10_" transform="matrix(-0.5 -0.866 0.866 -0.5 89.6153 82.0727)" class="st0" cx="68.5" cy="15.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_9_" transform="matrix(-0.8589 -0.5122 0.5122 -0.8589 119.5629 63.2797)" class="st0" cx="68.5" cy="15.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_20_" class="st0" cx="118.5" cy="15.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_19_" transform="matrix(0.866 -0.5 0.5 0.866 8.2927 61.2819)" class="st0" cx="118.5" cy="15.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_18_" transform="matrix(0.5 -0.866 0.866 0.5 46.1153 110.2073)" class="st0" cx="118.5" cy="15.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_17_" class="st0" cx="118.5" cy="15.2" rx="7.2" ry="2.5"/>
<ellipse id="XMLID_16_" transform="matrix(-0.5 -0.866 0.866 -0.5 164.6153 125.374)" class="st0" cx="118.5" cy="15.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_15_" transform="matrix(-0.8589 -0.5122 0.5122 -0.8589 212.5056 88.8906)" class="st0" cx="118.5" cy="15.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_26_" class="st0" cx="168.5" cy="15.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_25_" transform="matrix(0.866 -0.5 0.5 0.866 14.9914 86.2819)" class="st0" cx="168.5" cy="15.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_24_" transform="matrix(0.5 -0.866 0.866 0.5 71.1153 153.5086)" class="st0" cx="168.5" cy="15.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_23_" class="st0" cx="168.5" cy="15.2" rx="7.2" ry="2.5"/>
<ellipse id="XMLID_22_" transform="matrix(-0.5 -0.866 0.866 -0.5 239.6153 168.6753)" class="st0" cx="168.5" cy="15.2" rx="2.5" ry="7.2"/>
<ellipse id="XMLID_21_" transform="matrix(-0.8589 -0.5122 0.5122 -0.8589 305.4483 114.5016)" class="st0" cx="168.5" cy="15.2" rx="2.5" ry="7.2">
</svg>
</body>
</html>效果图如下：
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
