我的博客--群星闪烁地球旋转动画特效

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、使用方法：

两个文件放在同一目录下，可实现群星闪烁与地球一直旋转特效。用起来非常好用，至于其中原理，现在还不知道。我的博客使用此特效。

时间： 2024-10-19 06:21:45

我的博客--群星闪烁地球旋转动画特效的相关文章

博客园添加鼠标点击特效：字符表情包

在博客园的设置中可以看到「页首Html代码」这一项. 首先要申请 JS 权限,理由就是想要美化博客.设置鼠标点击特效等,自己补充. 「页首Html代码」处代码如下: <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array(&qu

博客园添加鼠标粒子吸附特效

本文从以下三个方面, 阐述在博客园添加鼠标粒子吸附特效: 一. 效果展示 二. 权限申请 三. 设置步骤 一. 效果展示 在博客园的页面, 出现鼠标粒子吸附的特效, 如图所示: 二. 权限申请 点击博客园的[管理] → [设置]→ 一直往下拉, 找到[博客侧边栏公告(支持HTML代码)(申请JS权限)] 向[email protected] 发送邮件, 为了尽快通过权限申请, 邮件模板如下: 尊敬的博客园管理员: 请问是否可以帮我开通js权限,我需要一些简单的js来解决问题,例如鼠标点击特效.代

JS框架_(coolShow.js)图片旋转动画特效

coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>coolShow.js插件图片旋转动画特效</title> <link href="css/coolShow.css" rel="

博客园第一篇———css hover特效

今天看到了一个比较有趣的css hover效果的开源就试做了一下 演示:http://gudh.github.io/ihover/dist/index.html Github Repo在这里:https://github.com/gudh/ihover 文章地址:http://www.html-js.com/topic/274 这是我仿造的他的第一个效果做的,感觉还可以: Start Go! 你即将进入Alfred的个人博客 以下是源码比较简单(至少比自己去分析开源上的源码要简单)就不一一解析了

用jQuery和css3实现的一个模仿淘宝ued博客左边的菜单切换动画效果

今天看到淘宝ued博客上左边的菜单导航动画效果不错,就用jQuery和css3做了一个简单的例子,主要是实现运用了jQuery 事件和css3 transition属性. 用一个元素来实现鼠标滑动到某个导航的背景效果,文字颜色也运用css3 transition 渐变的效果 当鼠标滑动其他导航的时候,加背景的元素的top值也会随着变化,定位到当前的导航上,同时文字字体颜色也会跟着改变: 主要实现的html代码如下: <div class="menuBox"> <div

给博客增加一个音乐播放器特效

我是直接使用网音乐音乐的 我感觉这样比较快一点 把自己喜欢的音乐放进去 生成相应的代码就可以了 具体步骤: 首先:找到网易云音乐官网登录 然后:找到自己喜欢的音乐 旁边有一个生成外链播放器,直接点击进入就会得到: 把下面生成的代码直接复制粘贴到博客里面的公告栏就可以了 至于位置,需要自己来衡量了 上面也说明了很多博客网站不支持嵌入iframe 这个博客园就是不会支持iframe的嵌入 我们需要把iframe更换为:embed  就可以了 有的小伙伴,可能不会只是添加一首歌(举个栗子,我就是这样的

博客园添加鼠标点击特效

原文:http://www.cnblogs.com/xiaokang01/p/9911501.html 废话少说先看效果: 复制下面代码,点击博客园 管理-->设置 然后 在保存就好了 代码如下 <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var

Web前端：博客美化：二、鼠标特效

1.获取JS权限 因为是js代码所以需要放在 侧边栏公告 里 没开通之前,有一个申请的链接,点击即可,我是第二天才看到过审的 ^-^ 2.Ctrl+C.Ctrl+V 数组里的文字随自己心情啦 另:3000是文字消失的速度,数值越大跑的越慢 <!--鼠标点击特效--> <script type="text/javascript"> var a_idx = 0; jQuery(document).ready(function($) { $("body&qu

博客园自定义鼠标点击特效

需要申请JS权限,JS权限申请通过之后,将如下代码放入侧边栏,页首,页末,都可以 复制如下代码 <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("?Linux?","?Shell?"