zoukankan      html  css  js  c++  java
  • svg实现放大效果

    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{
    		 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>
    
    效果图如下:

  • 相关阅读:
    leetcode 131. Palindrome Partitioning
    leetcode 526. Beautiful Arrangement
    poj 1852 Ants
    leetcode 1219. Path with Maximum Gold
    leetcode 66. Plus One
    leetcode 43. Multiply Strings
    pytorch中torch.narrow()函数
    pytorch中的torch.repeat()函数与numpy.tile()
    leetcode 1051. Height Checker
    leetcode 561. Array Partition I
  • 原文地址:https://www.cnblogs.com/WWWrs/p/7099333.html
Copyright © 2011-2022 走看看