我的部落格--群星閃爍地球旋轉動畫特效
1、chang.html 檔案內容：
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="author" content="Ken Collins">
<meta name="google-site-verification" content="W3DG-CkoWHypH24OfrGmGbMezvhC6AyLql4jLI7hXhI">
<meta name="description" content="The personal blog of Ken Collins aka MetaSkills">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<body youdao="bind">
<section class="ms-Page is-Page">
<header class="ms-Page-header">
<section class="ms-Page-header-bg">
<object class="ms-Page-header-bg-svg" data="chang.svg" type="image/svg+xml"></object>
</section>
</header>
</section>
</body></html>
2、chang.svg 檔案內容：
<svg
id="page-svg"
version="1.1"
width="300px"
height="700px"
viewBox="0 0 300 700"
preserveAspectRatio="xMidYMax slice"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="star" d="M2.395,0.409 C2.026,0.973 1.744,1.285 1.370,1.835 C0.997,2.385 0.428,3.258 0.961,4.330 C1.494,5.402 2.083,6.024 2.395,6.421 C2.706,6.819 3.298,8.543 4.607,8.226 C5.916,7.909 7.818,7.104 7.693,5.389 C7.569,3.673 8.052,2.750 7.030,1.944
C6.008,1.137 5.871,0.105 4.712,0.392 C3.552,0.679 2.764,-0.154 2.395,0.409 Z"></path>
<path id="burst" d="M6.092,4.816 L1.661,3.4 L5.261,6.658 L0,7.933 L5.123,9.208 L2.215,11.9 L6.092,11.05 L4.846,14.875 L8.169,12.75 L9.553,17 L10.523,12.325 L13.430,16.291 L12.046,11.616 L16.753,13.033 L13.292,9.633 L18.276,9.35 L13.153,8.075 L16.2,4.675
L12.323,6.091 C12.323,6.091 13.846,1.416 13.430,1.558 C13.153,1.841 11.215,4.958 11.215,4.958 L9.692,0 L8.861,4.391 L6.369,0.708 L6.092,4.816 L6.092,4.816 Z"></path>
<path id="steeler" d="M3.231,6.211 L0,5.830 L3.394,5.448 C4.477,5.327 5.637,4.371 5.985,3.314 L7.077,0 L6.747,3.314 C6.642,4.371 7.393,5.327 8.424,5.448 L11.655,5.830 L8.261,6.211 C7.178,6.332 6.017,7.288 5.669,8.345 L4.578,11.660 L4.907,8.345 C5.012,7.288
4.262,6.332 3.231,6.211 Z"></path>
</defs>
<style type="text/css"><![CDATA[
@-webkit-keyframes star{0%{opacity:1.0}20%{opacity:0.2}50%{opacity:0.7}70%{opacity:0.1}100%{opacity:1.0}}@-moz-keyframes star{0%{opacity:1.0}20%{opacity:0.2}50%{opacity:0.7}70%{opacity:0.1}100%{opacity:1.0}}@keyframes star{0%{opacity:1.0}20%{opacity:0.2}50%{opacity:0.7}70%{opacity:0.1}100%{opacity:1.0}}@-webkit-keyframes
burst{0%{opacity:1.0;fill:#e4522a;-webkit-transform:scale(1);-webkit-transform-origin:center center}50%{opacity:0.9;fill:#c14625;-webkit-transform:scale(0.7);-webkit-transform-origin:center center}60%{opacity:0.9;fill:#ed9025;-webkit-transform:scale(1.1);-webkit-transform-origin:center
center}70%{opacity:0.9;fill:#c14625;-webkit-transform:scale(0.9);-webkit-transform-origin:center center}100%{opacity:1.0;fill:#e4522a;-webkit-transform:scale(1);-webkit-transform-origin:center center}}@-moz-keyframes burst{0%{opacity:1.0;fill:#e4522a;-moz-transform:scale(1);-moz-transform-origin:center
center}50%{opacity:0.9;fill:#c14625;-moz-transform:scale(0.7);-moz-transform-origin:center center}60%{opacity:0.9;fill:#ed9025;-moz-transform:scale(1.1);-moz-transform-origin:center center}70%{opacity:0.9;fill:#c14625;-moz-transform:scale(0.9);-moz-transform-origin:center
center}100%{opacity:1.0;fill:#e4522a;-moz-transform:scale(1);-moz-transform-origin:center center}}@keyframes burst{0%{opacity:1.0;fill:#e4522a;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transform-origin:center
center;-moz-transform-origin:center center;-ms-transform-origin:center center;-o-transform-origin:center center;transform-origin:center center}50%{opacity:0.9;fill:#c14625;-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-ms-transform:scale(0.7);-o-transform:scale(0.7);transform:scale(0.7);-webkit-transform-origin:center
center;-moz-transform-origin:center center;-ms-transform-origin:center center;-o-transform-origin:center center;transform-origin:center center}60%{opacity:0.9;fill:#ed9025;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);-webkit-transform-origin:center
center;-moz-transform-origin:center center;-ms-transform-origin:center center;-o-transform-origin:center center;transform-origin:center center}70%{opacity:0.9;fill:#c14625;-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);-o-transform:scale(0.9);transform:scale(0.9);-webkit-transform-origin:center
center;-moz-transform-origin:center center;-ms-transform-origin:center center;-o-transform-origin:center center;transform-origin:center center}100%{opacity:1.0;fill:#e4522a;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transform-origin:center
center;-moz-transform-origin:center center;-ms-transform-origin:center center;-o-transform-origin:center center;transform-origin:center center}}@-webkit-keyframes steeler{0%{opacity:1.0;fill:#36525f;-webkit-transform:scale(1);-webkit-transform-origin:center
center}40%{opacity:0.9;fill:#95a8b1;-webkit-transform:scale(0.7);-webkit-transform-origin:center center}70%{opacity:0.9;fill:#36525f;-webkit-transform:scale(1.1);-webkit-transform-origin:center center}100%{opacity:1.0;fill:#dfe4e7;-webkit-transform:scale(0.9);-webkit-transform-origin:center
center}}@-moz-keyframes steeler{0%{opacity:1.0;fill:#36525f;-moz-transform:scale(1);-moz-transform-origin:center center}40%{opacity:0.9;fill:#95a8b1;-moz-transform:scale(0.7);-moz-transform-origin:center center}70%{opacity:0.9;fill:#36525f;-moz-transform:scale(1.1);-moz-transform-origin:center
center}100%{opacity:1.0;fill:#dfe4e7;-moz-transform:scale(0.9);-moz-transform-origin:center center}}@keyframes steeler{0%{opacity:1.0;fill:#36525f;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transform-origin:center
center;-moz-transform-origin:center center;-ms-transform-origin:center center;-o-transform-origin:center center;transform-origin:center center}40%{opacity:0.9;fill:#95a8b1;-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-ms-transform:scale(0.7);-o-transform:scale(0.7);transform:scale(0.7);-webkit-transform-origin:center
center;-moz-transform-origin:center center;-ms-transform-origin:center center;-o-transform-origin:center center;transform-origin:center center}70%{opacity:0.9;fill:#36525f;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);-webkit-transform-origin:center
center;-moz-transform-origin:center center;-ms-transform-origin:center center;-o-transform-origin:center center;transform-origin:center center}100%{opacity:1.0;fill:#dfe4e7;-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);-o-transform:scale(0.9);transform:scale(0.9);-webkit-transform-origin:center
center;-moz-transform-origin:center center;-ms-transform-origin:center center;-o-transform-origin:center center;transform-origin:center center}}.star{fill:#95a8b1;-webkit-animation:star 5s linear infinite;-moz-animation:star 5s linear infinite;animation:star
5s linear infinite}.burst{fill:#e4522a;-webkit-animation:burst 1s linear infinite;-moz-animation:burst 1s linear infinite;animation:burst 1s linear infinite}.steeler{fill:#36525f;-webkit-animation:steeler 2s linear infinite;-moz-animation:steeler 2s linear
infinite;animation:steeler 2s linear infinite}.ad-1{-webkit-animation-delay:0.1s;-moz-animation-delay:0.1s;animation-delay:0.1s}.ad-2{-webkit-animation-delay:0.2s;-moz-animation-delay:0.2s;animation-delay:0.2s}.ad-3{-webkit-animation-delay:0.3s;-moz-animation-delay:0.3s;animation-delay:0.3s}.ad-4{-webkit-animation-delay:0.4s;-moz-animation-delay:0.4s;animation-delay:0.4s}.ad-5{-webkit-animation-delay:0.5s;-moz-animation-delay:0.5s;animation-delay:0.5s}.ad-6{-webkit-animation-delay:0.6s;-moz-animation-delay:0.6s;animation-delay:0.6s}.ad-7{-webkit-animation-delay:0.7s;-moz-animation-delay:0.7s;animation-delay:0.7s}.ad-8{-webkit-animation-delay:0.8s;-moz-animation-delay:0.8s;animation-delay:0.8s}.ad-9{-webkit-animation-delay:0.9s;-moz-animation-delay:0.9s;animation-delay:0.9s}.ad-10{-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s}.ad-11{-webkit-animation-delay:1.1s;-moz-animation-delay:1.1s;animation-delay:1.1s}.ad-12{-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;animation-delay:1.2s}.ad-13{-webkit-animation-delay:1.3s;-moz-animation-delay:1.3s;animation-delay:1.3s}.ad-14{-webkit-animation-delay:1.4s;-moz-animation-delay:1.4s;animation-delay:1.4s}.ad-15{-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;animation-delay:1.5s}.ad-16{-webkit-animation-delay:1.6s;-moz-animation-delay:1.6s;animation-delay:1.6s}.ad-17{-webkit-animation-delay:1.7s;-moz-animation-delay:1.7s;animation-delay:1.7s}.ad-18{-webkit-animation-delay:1.8s;-moz-animation-delay:1.8s;animation-delay:1.8s}.ad-19{-webkit-animation-delay:1.9s;-moz-animation-delay:1.9s;animation-delay:1.9s}@-webkit-keyframes
planet{0%{-webkit-transform:translate(100px, 800px) scale(6) rotate(0deg)}100%{-webkit-transform:translate(100px, 800px) scale(6) rotate(100deg)}}@-moz-keyframes planet{0%{-moz-transform:translate(100px, 800px) scale(6) rotate(0deg)}100%{-moz-transform:translate(100px,
800px) scale(6) rotate(100deg)}}@keyframes planet{0%{-webkit-transform:translate(100px, 800px) scale(6) rotate(0deg);-moz-transform:translate(100px, 800px) scale(6) rotate(0deg);-ms-transform:translate(100px, 800px) scale(6) rotate(0deg);-o-transform:translate(100px,
800px) scale(6) rotate(0deg);transform:translate(100px, 800px) scale(6) rotate(0deg)}100%{-webkit-transform:translate(100px, 800px) scale(6) rotate(100deg);-moz-transform:translate(100px, 800px) scale(6) rotate(100deg);-ms-transform:translate(100px, 800px)
scale(6) rotate(100deg);-o-transform:translate(100px, 800px) scale(6) rotate(100deg);transform:translate(100px, 800px) scale(6) rotate(100deg)}}#planet{-webkit-animation:planet 60s linear infinite;-moz-animation:planet 60s linear infinite;animation:planet
60s linear infinite}#planet,#planet-bg{-webkit-transform:translate(100px, 800px) scale(6);-moz-transform:translate(100px, 800px) scale(6);-ms-transform:translate(100px, 800px) scale(6);-o-transform:translate(100px, 800px) scale(6);transform:translate(100px,
800px) scale(6);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:center center;-moz-transform-origin:center center;-ms-transform-origin:center
center;-o-transform-origin:center center;transform-origin:center center}
]]></style>
<g id="stars"></g>
<g id="bursts"></g>
<g id="steelers"></g>
<path fill="#052838" id="planet-bg" d="M49.957,0 C22.348,0 0,22.420 0,50.034 C0,77.576 22.348,100 49.957,100 C77.566,100 99.916,77.576 99.916,50.034 C99.916,22.420 77.566,0 49.957,0 L49.957,0 Z"></path>
<path fill-opacity="0.1" fill="#95a8b1" id="planet" d="M49.957,0 C22.348,0 0,22.420 0,50.034 C0,77.576 22.348,100 49.957,100 C77.566,100 99.916,77.576 99.916,50.034 C99.916,22.420 77.566,0 49.957,0 L49.957,0 Z M49.957,99.098 C22.833,99.098 0.897,77.091 0.897,50.034
C0.897,22.905 22.833,0.899 49.957,0.899 C77.083,0.899 99.017,22.905 99.017,50.034 C99.017,77.091 77.083,99.098 49.957,99.098 L49.957,99.098 Z M23.594,39.514 C19.927,36.192 19.373,32.247 16.743,31.833 C15.844,31.833 14.461,33.425 12.869,35.292 C10.792,37.715
8.786,39.237 7.472,39.237 C5.880,39.237 5.604,36.745 5.604,35.707 C5.604,34.670 5.741,33.632 5.948,32.801 C6.226,31.762 6.294,31.072 6.294,30.726 C6.294,30.448 6.226,30.380 6.158,30.380 C5.811,30.380 5.049,31.833 4.773,32.525 C4.773,32.594 4.705,32.732 4.634,32.871
C4.012,34.461 2.143,39.583 1.867,44.705 C1.867,45.326 1.797,45.811 1.797,46.226 C1.797,49.341 2.767,46.711 4.081,51.141 C4.634,53.008 4.634,56.331 7.333,59.653 C9.893,62.698 12.455,65.397 15.151,65.397 C15.914,65.397 16.814,65.258 16.814,64.634 C16.814,63.388
13.491,60.690 12.591,55.916 C12.384,54.878 12.316,53.839 12.316,52.940 C12.316,48.510 14.322,45.604 15.222,44.705 C15.982,44.012 17.367,42.974 18.75,42.974 C19.581,42.974 20.341,43.320 21.034,44.290 C21.448,44.912 22.072,45.190 22.694,45.190 C23.940,45.190
25.254,44.151 25.254,42.628 C25.254,41.728 24.839,40.621 23.594,39.514 L23.594,39.514 Z M32.314,24.980 C31.690,22.628 28.506,21.382 26.846,21.382 L25.809,21.382 C24.564,21.314 23.040,21.036 23.040,19.722 C23.040,18.061 25.324,15.570 27.192,15.570 C27.399,15.570
27.606,15.638 27.816,15.707 C29.130,16.123 34.596,17.023 37.918,17.023 C39.508,17.023 40.617,16.816 40.617,16.262 C40.617,16.053 40.547,15.916 40.271,15.638 C38.401,13.632 40.271,10.448 38.055,10.448 C37.779,10.448 37.433,10.517 37.087,10.587 C34.457,11.348
31.068,13.632 28.784,13.632 C27.606,13.632 27.470,12.455 27.470,12.455 C27.470,12.455 25.878,12.940 23.871,12.940 L23.179,12.940 C21.794,12.801 21.448,12.179 21.448,11.626 C21.448,11.072 21.726,10.587 21.726,10.587 C16.397,13.147 9.824,23.113 9.824,23.113
C9.824,23.113 7.818,25.811 7.611,27.75 C7.611,27.75 10.792,23.666 13.076,22.489 C13.491,22.282 13.769,22.213 14.044,22.213 C15.429,22.213 15.844,24.151 15.844,25.465 L15.844,26.504 C15.844,27.057 15.914,27.264 16.329,27.472 C16.397,27.542 16.536,27.542 16.675,27.542
C17.228,27.542 18.059,26.989 18.888,25.743 C19.303,25.119 20.134,24.773 20.895,24.773 C22.002,24.773 23.040,25.465 23.247,27.196 C23.525,29.963 24.010,30.655 25.254,35.707 C25.739,37.715 27.331,38.476 28.852,38.476 C30.722,38.476 32.521,37.369 32.521,36.192
C32.521,35.846 32.382,35.570 32.104,35.224 C31.482,34.532 31.275,33.632 31.275,32.662 C31.275,30.380 32.382,27.611 32.382,25.811 C32.382,25.536 32.382,25.190 32.314,24.980 L32.314,24.980 Z M42.899,18.337 C42.138,18.269 41.032,18.198 39.854,18.198 C37.019,18.198
33.835,18.544 33.835,20.136 C33.835,20.482 33.974,20.967 34.388,21.452 C34.666,21.799 34.803,22.835 34.803,24.012 C34.803,25.673 34.596,27.542 34.596,27.542 C34.596,27.75 34.527,27.957 34.527,28.164 C34.527,28.717 34.666,29.202 34.942,29.202 C35.081,29.202
35.356,28.995 35.566,28.510 C36.395,26.918 38.679,24.980 40.961,24.980 C42.070,24.980 43.245,25.465 44.145,26.779 C46.636,30.241 47.051,27.957 47.051,31.555 C47.051,32.386 47.675,32.801 48.435,32.801 C49.474,32.801 50.720,31.972 50.720,30.380 C50.720,29.756
50.510,28.995 50.027,28.096 C49.335,26.850 49.128,25.880 49.128,25.119 C49.128,22.905 51.202,22.145 51.202,21.036 C51.202,19.514 46.083,18.544 42.899,18.337 L42.899,18.337 Z M53.694,5.326 C51.688,4.705 49.403,3.944 48.297,3.113 C48.158,2.974 48.089,2.905 48.089,2.767
C48.089,2.145 50.096,1.382 50.164,1.314 C43.106,1.314 37.848,3.113 37.848,3.113 C40.064,3.113 40.685,3.735 40.685,4.497 C40.685,5.119 40.339,5.743 39.854,6.365 C39.717,6.572 39.647,6.779 39.647,6.989 C39.647,7.888 41.032,8.788 42.416,8.788 C42.970,8.788 43.452,8.649
43.938,8.371 C44.630,8.025 45.529,7.818 46.429,7.818 C48.228,7.818 49.888,8.581 49.888,10.309 L49.888,10.587 C49.75,11.901 49.403,13.493 49.403,14.532 C49.403,15.153 49.542,15.638 50.027,15.638 C50.442,15.638 51.134,15.224 52.241,14.254 C55.978,11.002 56.739,10.587
59.645,10.587 L61.237,10.587 C62.690,10.587 63.311,10.380 63.311,10.034 C63.311,8.856 56.600,6.158 53.694,5.326 L53.694,5.326 Z M18.474,44.773 C16.121,44.773 13.698,47.818 13.698,51.833 C13.698,54.532 13.976,59.237 17.367,59.653 C21.173,59.376 22.418,54.393
22.418,51.487 C22.418,47.888 20.826,44.912 18.474,44.773 L18.474,44.773 Z M13.145,31.833 C14.252,29.480 14.876,27.335 14.876,25.743 C14.876,24.705 14.598,23.944 14.044,23.666 C13.908,23.598 13.769,23.598 13.630,23.598 C12.245,23.598 9.893,26.019 8.303,29.480
C7.194,31.833 6.572,34.117 6.572,35.707 C6.572,36.677 6.848,37.715 7.818,37.715 C9.271,37.715 11.485,35.292 13.145,31.833 L13.145,31.833 Z M31.621,9.480 C35.910,7.542 39.094,5.326 39.094,4.290 C39.094,3.805 38.333,3.735 38.055,3.735 C36.534,3.735 33.489,4.705
30.098,6.226 C25.878,8.164 22.626,10.448 22.626,11.487 C22.626,11.833 22.972,11.972 23.594,11.972 C25.185,11.972 28.506,11.002 31.621,9.480 L31.621,9.480 Z M37.502,27.75 C36.534,28.717 36.049,29.963 36.049,31.072 C36.049,31.901 36.326,32.594 36.880,33.147
C37.365,33.632 38.055,33.908 38.818,33.908 C39.925,33.908 41.239,33.354 42.207,32.316 C43.177,31.279 43.730,30.034 43.730,28.925 C43.730,28.164 43.452,27.403 42.899,26.918 C42.346,26.435 41.653,26.158 40.893,26.158 C39.786,26.158 38.472,26.711 37.502,27.75
L37.502,27.75 Z M19.927,31.555 C20.965,31.555 22.072,30.587 22.487,29.134 C22.626,28.717 22.694,28.235 22.694,27.818 C22.694,26.711 22.072,25.465 20.965,25.465 C19.166,25.465 18.196,27.75 18.196,29.202 C18.196,30.309 18.820,31.555 19.927,31.555 L19.927,31.555
Z M19.720,46.711 C16.606,46.711 15.429,51.972 15.429,54.185 C15.429,55.846 15.844,57.299 16.397,58.408 C15.083,57.438 14.252,55.224 14.252,51.762 C14.252,48.164 16.467,45.397 18.542,45.397 C19.649,45.465 20.412,46.158 21.034,47.126 C20.688,46.918 20.273,46.779
19.720,46.711 L19.720,46.711 Z M2.074,49.688 C1.728,49.756 1.589,50.655 1.589,52.179 C1.589,53.217 1.660,54.600 1.867,56.053 C2.282,59.514 3.042,62.213 3.596,62.145 C3.942,62.074 4.081,61.175 4.081,59.722 C4.081,58.615 4.012,57.230 3.805,55.777 C3.388,52.386
2.559,49.617 2.074,49.688 L2.074,49.688 Z M48.711,10.380 C48.574,9.341 47.675,8.925 46.775,8.925 C45.113,8.925 42.831,10.102 42.831,11.833 C42.831,13.008 44.076,13.354 44.837,13.354 C46.429,13.354 48.711,12.040 48.711,10.380 L48.711,10.380 Z M49.681,2.559
C49.611,3.181 51.963,3.873 55.008,4.220 C55.908,4.290 56.807,4.358 57.570,4.358 C59.367,4.358 60.544,4.151 60.613,3.735 C60.683,3.113 58.260,2.352 55.286,2.074 C54.316,1.935 53.348,1.935 52.519,1.935 C50.856,1.935 49.681,2.145 49.681,2.559 L49.681,2.559 Z
M8.579,29.549 C10.100,26.297 12.245,24.081 13.561,24.081 C13.698,24.081 13.837,24.081 13.976,24.151 C14.183,24.220 14.322,24.358 14.391,24.566 C13.076,24.566 11,26.850 9.410,30.102 C8.371,32.247 7.886,34.324 7.886,35.777 C7.886,36.399 7.957,36.884 8.164,37.230
C7.126,37.230 6.987,35.846 6.987,35.224 C6.987,33.771 7.540,31.694 8.579,29.549 L8.579,29.549 Z M23.940,19.307 C24.010,20 24.425,20.344 25.047,20.344 C26.570,20.344 28.369,18.822 28.369,17.369 C28.369,16.677 27.816,16.331 27.262,16.331 C25.739,16.331 23.940,17.852
23.940,19.307 L23.940,19.307 Z M38.886,29.341 C38.055,30.170 37.641,31.141 37.641,32.040 C37.641,32.247 37.641,32.525 37.709,32.732 L37.433,32.525 C36.948,32.108 36.741,31.487 36.741,30.863 C36.741,29.963 37.155,28.925 37.987,28.096 C38.818,27.196 39.854,26.779
40.754,26.779 C41.378,26.779 42,26.989 42.416,27.403 C42.692,27.681 42.831,28.025 42.970,28.371 C42.623,28.164 42.138,28.025 41.653,28.025 C40.754,28.025 39.717,28.442 38.886,29.341 L38.886,29.341 Z M30.168,6.435 C33.282,5.051 36.119,4.151 37.572,4.151 C37.918,4.151
38.540,4.290 38.608,4.634 C38.540,4.566 38.401,4.497 38.194,4.497 C36.948,4.497 33.282,5.397 30.997,6.435 C27.331,8.025 24.700,10.034 24.700,11.072 C24.700,11.141 24.771,11.416 24.978,11.555 C24.771,11.626 24.425,11.694 24.079,11.694 C23.664,11.694 23.247,11.626
23.247,11.348 C23.247,9.617 28.784,7.057 30.168,6.435 L30.168,6.435 Z M20.895,26.019 C21.726,26.019 22.211,26.572 22.348,27.196 C22.002,26.989 21.865,26.918 21.519,26.918 C20.688,26.918 19.720,27.75 19.303,28.995 C19.166,29.410 19.166,29.826 19.166,30.170
C19.166,30.448 19.166,30.726 19.235,31.002 C18.820,30.655 18.542,29.963 18.542,29.202 C18.542,27.818 19.512,26.019 20.895,26.019 L20.895,26.019 Z M2.835,58.198 C2.905,59.168 3.113,60.068 3.252,60.829 C2.835,60.136 2.420,58.337 2.143,56.192 C2.006,55.017 1.935,53.908
1.935,53.008 C1.935,51.833 2.074,51.072 2.282,51.072 C2.696,51.072 2.974,51.972 3.320,53.354 C3.181,53.147 3.042,53.079 2.974,53.079 C2.696,53.147 2.559,53.839 2.559,54.946 C2.559,55.846 2.628,56.952 2.835,58.198 L2.835,58.198 Z M46.497,9.271 C46.912,9.271
47.329,9.410 47.604,9.549 C47.190,9.549 46.705,9.688 46.222,9.895 C45.183,10.380 44.491,11.209 44.491,11.972 C44.491,12.455 44.769,12.732 45.044,12.940 C44.215,12.940 43.316,12.594 43.316,11.762 C43.316,10.309 45.252,9.271 46.497,9.271 L46.497,9.271 Z M58.538,3.181
C56.878,2.698 55.079,2.489 53.348,2.489 C52.034,2.489 51.134,2.698 51.064,2.974 C51.064,3.113 51.134,3.181 51.341,3.320 C50.649,3.113 50.235,2.835 50.235,2.628 C50.303,2.352 51.202,2.145 52.519,2.145 C54.594,2.145 57.570,2.489 58.538,3.181 L58.538,3.181 Z
M25.047,19.098 C25.047,19.583 25.324,19.861 25.670,20 C25.532,20.068 25.324,20.068 25.185,20.068 C24.632,20.068 24.286,19.583 24.286,19.168 C24.286,18.615 24.700,17.852 25.393,17.299 C25.946,16.816 26.638,16.538 27.192,16.538 C27.331,16.538 27.399,16.608 27.470,16.608
C26.292,17.023 25.047,17.923 25.047,19.098 L25.047,19.098 Z"></path>
<script type="text/ecmascript"><![CDATA[
var xmlns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink";
var width = 300,
height = 700;
var stars = document.getElementById("stars"),
bursts = document.getElementById("bursts"),
steelers = document.getElementById("steelers");
function randomBase(min, max) { return Math.random() * (max - min) + min; }
function randomPos(max) { return Math.floor(randomBase(-50,max+50)); }
function randomAnimationDelay(max) { return Math.floor(randomBase(1,20)); }
function randomScale(min, max) { return parseFloat(randomBase(min, max).toFixed(2)); }
function randomScaleNamed(name) {
var scale;
switch(name) {
case 'star': scale = randomScale(0.3, 0.8); break;
case 'burst': scale = randomScale(0.4, 0.9); break;
case 'steeler': scale = randomScale(1.1, 2.0); break;
default: scale = 1.0; }
return scale;
}
function addElement(name) {
var p = eval(name + 's');
g = document.createElementNS(xmlns, "g"),
use = document.createElementNS(xmlns, "use"),
gt = 'translate(' + randomPos(width) + ',' + randomPos(height) + ') ' +
'scale(' + randomScaleNamed(name) + ')';
uc = name + ' ad-' + randomAnimationDelay();
use.setAttributeNS(null, "class", uc);
use.setAttributeNS(xlinkns, "xlink:href", "#" + name);
g.setAttributeNS(null, "transform", gt);
g.appendChild(use);
p.appendChild(g);
}
function addElements(name, count) {
while (count -= 1) { addElement(name); }
}
function init() {
addElements('steeler', 15);
addElements('burst', 15);
addElements('star', 50);
}
init();
]]></script>
</svg>
2、使用方法：
相關文章
- 實現閃爍燈星星動畫動畫
- HTML5-canvas動畫閃爍分析HTMLCanvas動畫
- css3實現動畫閃爍效果CSSS3動畫
- canvas簡單動畫案例（圓圈閃爍漸變動畫）Canvas動畫
- 【部落格】無旋式Treap
- Flash遮罩做地球旋轉效果遮罩
- jQuery夜晚天空滿天星星閃爍動畫程式碼jQuery動畫
- css地球月亮太陽環繞旋轉CSS
- 教你如何用WPF實現文字粒子閃爍動畫效果動畫
- SVG矩形旋轉動畫SVG動畫
- js閃爍效果JS
- 簡單CSS實現閃爍動畫（+1白話講解）CSS動畫
- vuejs在解析時出現閃爍的原因及防止閃爍的方法VueJS
- 我的部落格搭建筆記筆記
- 分享我的個人部落格
- canvas實現太陽、地球和月亮旋轉效果Canvas
- three.js實現的地球3D旋轉效果JS3D
- 部落格園皮膚-我的部落格園皮膚設定教程
- 我對部落格的理解和看法
- 我的個人部落格搭建之旅
- CSS3動畫（360度旋轉、旋轉放大、放大、移動）CSSS3動畫
- Flutter——實現閃爍效果Flutter
- 仿餓了麼加入購物車旋轉控制元件 – 自帶閃轉騰挪動畫 的按鈕控制元件動畫
- 仿餓了麼加入購物車旋轉控制元件 - 自帶閃轉騰挪動畫 的按鈕控制元件動畫
- TweenMax動畫庫學習-陳亞部落格動畫
- CSS動畫之旋轉魔方輪播CSS動畫
- 我的新部落格: http://cuiz.meHTTPUI
- 批量匯出 CSDN 部落格並轉為 hexo 部落格風格Hexo
- 復活吧，我滴部落格！
- Canvas繪製星光閃爍的生日祝福Canvas
- 【Windows 10 IoT - 2】LED閃爍及動畫繪製（樹莓派 Pi2）Windows動畫樹莓派
- vue頁面渲染是閃爍{{}}Vue
- ios UIButton一直旋轉動畫iOSUI動畫
- 【Android動畫】之Tween動畫 (漸變、縮放、位移、旋轉)Android動畫
- 分享一個我的 Django 部落格專案Django
- 將我的部落格遷移到亞馬遜雲端(1)亞馬遜
- 將我的部落格遷移到亞馬遜雲端（2）亞馬遜
- 我的部落格園第一天