这个东西只是一个思路，大部分的效果都是通过js实现的，但是这里通过css3实现，其实效果要好得多，而且我建议很多效果如果可以通过css实现，要比js实现的效果要好。
预览地址我放在了GitHub里
https://musclemen.github.io/website-update/demo.html
1 <!doctype html> 2 3 <html> 4 5 <head> 6 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 7 8 <meta charset="utf-8"> 9 <title>文创汇升级提示</title> 10 11 <style> 12 html, 13 body { 14 height: 100%; 15 max-width: 100%; 16 margin: 0; 17 overflow: hidden; 18 font-family: "microsoft-yahei"; 19 } 20 21 #space { 22 width: 100% 23 } 24 25 #warp { 26 position: absolute; 27 height: 635px; 28 z-index: 9; 29 overflow: auto; 30 margin: auto; 31 top: 0; 32 bottom: 0; 33 left: 0; 34 right: 0; 35 color: #fff; 36 padding: 10px; 37 width: 800px; 38 font-size: 14px; 39 line-height: 45px; 40 } 41 42 /*倒计时css*/ 43 44 ul#countdown { 45 text-align: center; 46 margin: 2em 0 2em; 47 48 } 49 50 ul#countdown li { 51 display: inline-block; 52 margin-right: 28px; 53 width: 85px; 54 height: 85px; 55 text-align: center; 56 padding: 12px; 57 border: 1px solid #2be0f0; 58 border-radius:50%; 59 -webkit-border-radius:50%; 60 -moz-border-radius:50%; 61 position: relative; 62 } 63 64 ul#countdown li span{ 65 font-size: 45px; 66 color: #fff; 67 font-weight: 100; 68 padding-top: 10px; 69 display: block; 70 } 71 72 ul#countdown li p.timeRefDays, 73 ul#countdown li p.timeRefHours, 74 ul#countdown li p.timeRefMinutes, 75 ul#countdown li p.timeRefSeconds { 76 color: #2be0f0; 77 font-size: 17px; 78 font-weight: 100; 79 font-style: "microsoft-yahei"; 80 line-height: 0px; 81 font-style: italic; 82 } 83 84 /*倒计时加上圆圈*/ 85 86 ul#countdown li i{ 87 88 width: 85px; 89 height: 85px; 90 position: absolute; 91 display: block; 92 /*旋转动画*/ 93 animation:circleRoate 5s infinite linear ; 94 95 } 96 .dotdot{ 97 position: absolute; 98 left:-2px; 99 width: 10px; 100 height: 10px; 101 border-radius: 50%; 102 background:#ff6200; 103 } 104 @keyframes circleRoate{ 105 from{transform: rotate(0deg);} 106 to{transform: rotate(360deg);} 107 } 108 </style> 109 110 <link rel="shortcut icon" type="image/x-icon" href="https://www.p2pcq.com/res/favicon.ico"> 111 <script type="text/javascript" src="https://www.p2pcq.com/res/js/base/jquery-1.8.3.min.js"></script> 112 113 </head> 114 115 <body> 116 117 <canvas id="space"></canvas> 118 119 <div id="warp"> 120 <p style="font-size:28px;text-align: center;font-weight:bold">网站升级通知</p> 121 <p style="font-size:18px;text-indent: 2rem;"> 122 为了给您提供更加安全、快捷、优质的服务体验，文创汇将于<span style="font-size:20px;color: #ff6200">2017年6月21日22:00——6月22日6:00</span>进行系统升级维护，在此期间<span style="font-size:20px;color: #ff6200">官方网站、微信订阅号</span>等页面将无法正常访问。还请广大客户避开此时间段操作，并提前做好资金规划。 123 </p> 124 <p style="text-align: right;font-size:18px;padding-right:30px;">文创汇团队</p> 125 <p style="text-align: right;font-size:18px;padding-right:30px;">2017.12.20</p> 126 <p style="border-top:1px solid #2be0f0;font-size:25px;text-align: center;font-weight: 100;padding-top: 25px;">升级完成倒计时</p> 127 <!-- 加入倒计时 --> 128 129 <ul id="countdown"> 130 <li> 131 <span class="days"></span> 132 <p class="timeRefDays">days</p> 133 </li> 134 <li> 135 <span class="hours"></span> 136 <p class="timeRefHours">hours</p> 137 </li> 138 <li> 139 <span class="minutes"></span> 140 <p class="timeRefMinutes">minutes</p> 141 </li> 142 <li> 143 <i><b class="dotdot"></b></i> 144 <span class="seconds"></span> 145 <p class="timeRefSeconds">seconds</p> 146 </li> 147 <div class="clear"></div> 148 </ul> 149 150 </div> 151 152 <script> 153 window.requestAnimFrame = (function() { 154 return window.requestAnimationFrame 155 })(); 156 var canvas = document.getElementById("space"); 157 var c = canvas.getContext("2d"); 158 var numStars =2000; //星星总数量 159 var radius = '0.' + Math.floor(Math.random() * 9) + 1; 160 var focalLength = canvas.width * 2; 161 var warp = 0; 162 var centerX, centerY; 163 164 var stars = [], 165 star; 166 var i; 167 168 var animate = true; 169 170 initializeStars();//初始化单颗星星 171 172 function executeFrame() { 173 174 if (animate) 175 requestAnimFrame(executeFrame); 176 moveStars(); 177 drawStars(); 178 } 179 180 function initializeStars() { 181 centerX = canvas.width / 2; 182 centerY = canvas.height / 2; 183 184 stars = []; 185 for (i = 0; i < numStars; i++) { 186 star = { 187 x: Math.random() * canvas.width, 188 y: Math.random() * canvas.height, 189 z: Math.random() * canvas.width, 190 o: '0.' + Math.floor(Math.random() * 99) + 1 191 }; 192 stars.push(star); 193 } 194 } 195 196 function moveStars() { 197 for (i = 0; i < numStars; i++) { 198 star = stars[i]; 199 star.z--; 200 201 if (star.z <= 0) { 202 star.z = canvas.width; 203 } 204 } 205 } 206 207 function drawStars() { 208 var pixelX, pixelY, pixelRadius; 209 210 // 适应屏幕 永远都是全屏 211 if (canvas.width != window.innerWidth || canvas.width != window.innerWidth) { 212 canvas.width = window.innerWidth; 213 canvas.height = window.innerHeight; 214 initializeStars(); 215 } 216 if (warp == 0) { 217 c.fillStyle = "rgba(0,10,20,1)"; //黑蓝色的夜空很美丽 218 c.fillRect(0, 0, canvas.width, canvas.height); 219 } 220 221 222 //定义星星的颜色，从文创汇3原色中随机选一个 223 224 // var wch_color,star_color,stars_color; 225 // wch_color = ["#ff6200","#5CBFE4","#5983B7"]; 226 // star_color = Math.floor((Math.random()*wch_color.length)); 227 // stars_colors = wch_color[star_color]; 228 229 c.fillStyle = "rgba(251, 251, 251, " + radius + ")"; 230 for (i = 0; i < numStars; i++) { 231 star = stars[i]; 232 233 pixelX = (star.x - centerX) * (focalLength / star.z); 234 pixelX += centerX; 235 pixelY = (star.y - centerY) * (focalLength / star.z); 236 pixelY += centerY; 237 pixelRadius = 1 * (focalLength / star.z); 238 239 c.fillRect(pixelX, pixelY, pixelRadius, pixelRadius); 240 c.fillStyle = "rgba(251, 251, 251, " + star.o + ")"; 241 //c.fill(); 242 } 243 } 244 245 executeFrame(); 246 247 248 249 250 // 增加完成升级倒计时提示 251 252 $(function() { 253 254 show_time(); 255 256 }); 257 258 function show_time() { 259 var time_start = new Date().getTime(); //获取现在的时间 260 261 var time_end = new Date("2018/12/05 15:51:00").getTime(); //设定未来时间 262 263 //计算时间差 264 var time_distance = time_end - time_start; 265 if (time_distance > 0) { 266 // 天时分秒换算 267 var int_day = Math.floor(time_distance / 86400000) 268 time_distance -= int_day * 86400000; 269 270 var int_hour = Math.floor(time_distance / 3600000) 271 time_distance -= int_hour * 3600000; 272 273 var int_minute = Math.floor(time_distance / 60000) 274 time_distance -= int_minute * 60000; 275 276 var int_second = Math.floor(time_distance / 1000) 277 // 时分秒为单数时、前面加零 278 if (int_day < 10) { 279 int_day = "0" + int_day; 280 } 281 if (int_hour < 10) { 282 int_hour = "0" + int_hour; 283 } 284 if (int_minute < 10) { 285 int_minute = "0" + int_minute; 286 } 287 if (int_second < 10) { 288 int_second = "0" + int_second; 289 } 290 // 显示时间 291 $(".days").html(int_day); 292 $(".hours").html(int_hour); 293 $(".minutes").html(int_minute); 294 $(".seconds").html(int_second); 295 296 setTimeout("show_time()", 1000); 297 298 } else { 299 $(".days").html('00'); 300 $(".hours").html('00'); 301 $(".minutes").html('00'); 302 $(".seconds").html('00'); 303 304 } 305 } 306 </script> 307 308 </body> 309 310 </html>
6728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
