|
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3倒计时警报灯样式代码</title> <style> body {background-color:#112;} .nixcont{margin-left: auto; margin-right: auto; width: fit-content; overflow: hidden;} .nixcont{position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%);} .nixpair{padding:0px 5px; float:left; height:100px;pointer-events:none;} .nixbg{ font-family: 'Josefin Sans', sans-serif; font-size:70px; box-sizing:border-box; position:relative;height:80px;line-height:80px; width:50px; float:left; border-radius: 20px; border-bottom-left-radius:0px; border-bottom-right-radius:0px; padding-top:8px; margin:0px 5px; box-shadow: inset 0px 1px 3px 2px rgba(90, 0, 0, 0.9), inset 0px 2px 2px 3px rgba(230, 220, 0, 1), inset 0px 4px 4px 3px rgba(255, 0, 0, 0.9); background-image:url("img/9fcf8fd2-fe09-45d2-873a-744b12b00065.png"), -webkit-linear-gradient(top, rgba(35, 20, 40, 0.7), rgba(35, 20, 40, 0.5), rgba(35, 20, 110, 0.7)); background-image:url("img/9fcf8fd2-fe09-45d2-873a-744b12b00065.png"), -moz-linear-gradient(top, rgba(35, 20, 40, 0.7), rgba(35, 20, 40, 0.5), rgba(35, 20, 110, 0.7)); background-image:url("img/9fcf8fd2-fe09-45d2-873a-744b12b00065.png"), -ms-linear-gradient(top, rgba(35, 20, 40, 0.7), rgba(35, 20, 40, 0.5), rgba(35, 20, 110, 0.7)); background-image:url("img/9fcf8fd2-fe09-45d2-873a-744b12b00065.png"), -o-linear-gradient(top, rgba(35, 20, 40, 0.7), rgba(35, 20, 40, 0.5), rgba(35, 20, 110, 0.7)); background-image:url("img/9fcf8fd2-fe09-45d2-873a-744b12b00065.png"), linear-gradient(top, rgba(35, 20, 40, 0.7), rgba(35, 20, 40, 0.5), rgba(35, 20, 110, 0.7)); background-repeat:repeat, no-repeat; background-size:12px, 100%; } .nixbg:after{ content:''; display:block; position:absolute;top:100%; left:0; width:100%; height:20%; background-color:gray; border-bottom-left-radius:35%; border-bottom-right-radius:35%; background-image:-webkit-radial-gradient( 40% 100% , #ea4 0%, #f93 15%, #caa 50%, #778 75%, #345 100% ); background-image: -moz-radial-gradient( 40% 100% , #ea4 0%, #f93 15%, #caa 50%, #778 75%, #345 100% ); background-image: -ms-radial-gradient( 40% 100% , #ea4 0%, #f93 15%, #caa 50%, #778 75%, #345 100% ); background-image: -o-radial-gradient( 40% 100% , #ea4 0%, #f93 15%, #caa 50%, #778 75%, #345 100% ); background-image: radial-gradient( 40% 100% , #ea4 0%, #f93 15%, #caa 50%, #778 75%, #345 100% ); } .nixbg .nix{ width:100%; text-align:center; position:absolute; color:rgba(60, 40, 20, 1 ); pointer-events:none; transition:color 0.5s, text-shadow 0.5s; transition-timing-function:ease-out; } .nixbg .nix_open{ transition:color 0.2s, text-shadow 0.2s; transition-timing-function:ease-out; color: transparent; text-shadow: 0 0 1px rgba(254, 252, 124, 1 ), 0 0 3px rgba(255, 217, 54, 0.7 ), 0 0 5px rgba(255, 0, 0, 1 ), 0 0 14px rgba(255, 0, 0, 1 ), 0 0 17px rgba(255, 0, 0, 1 ), 0 0 20px rgba(255, 0, 0, 1 ), 0 5px 25px rgba(0, 0, 255, 0.9 ); font-weight:300; z-index:10; } </style> </head> <body> <link href="https://www./css?family=Josefin+Sans:300" rel="stylesheet"> <script> window.onload = function() { startTime(); }; </script> <div class="nixcont"> <div class="nixpair"> <div class="nixbg"> <div id="nix_h1_0" class="nix">0</div> <div id="nix_h1_1" class="nix">1</div> <div id="nix_h1_2" class="nix">2</div> <div id="nix_h1_3" class="nix">3</div> <div id="nix_h1_4" class="nix">4</div> <div id="nix_h1_5" class="nix">5</div> <div id="nix_h1_6" class="nix">6</div> <div id="nix_h1_7" class="nix">7</div> <div id="nix_h1_8" class="nix">8</div> <div id="nix_h1_9" class="nix">9</div> </div> <div class="nixbg"> <div id="nix_h2_0" class="nix">0</div> <div id="nix_h2_1" class="nix">1</div> <div id="nix_h2_2" class="nix">2</div> <div id="nix_h2_3" class="nix">3</div> <div id="nix_h2_4" class="nix">4</div> <div id="nix_h2_5" class="nix">5</div> <div id="nix_h2_6" class="nix">6</div> <div id="nix_h2_7" class="nix">7</div> <div id="nix_h2_8" class="nix">8</div> <div id="nix_h2_9" class="nix">9</div> </div> </div> <div class="nixpair"> <div class="nixbg"> <div id="nix_m1_0" class="nix">0</div> <div id="nix_m1_1" class="nix">1</div> <div id="nix_m1_2" class="nix">2</div> <div id="nix_m1_3" class="nix">3</div> <div id="nix_m1_4" class="nix">4</div> <div id="nix_m1_5" class="nix">5</div> <div id="nix_m1_6" class="nix">6</div> <div id="nix_m1_7" class="nix">7</div> <div id="nix_m1_8" class="nix">8</div> <div id="nix_m1_9" class="nix">9</div> </div> <div class="nixbg"> <div id="nix_m2_0" class="nix">0</div> <div id="nix_m2_1" class="nix">1</div> <div id="nix_m2_2" class="nix">2</div> <div id="nix_m2_3" class="nix">3</div> <div id="nix_m2_4" class="nix">4</div> <div id="nix_m2_5" class="nix">5</div> <div id="nix_m2_6" class="nix">6</div> <div id="nix_m2_7" class="nix">7</div> <div id="nix_m2_8" class="nix">8</div> <div id="nix_m2_9" class="nix">9</div> </div> </div> <div class="nixpair"> <div class="nixbg"> <div id="nix_s1_0" class="nix">0</div> <div id="nix_s1_1" class="nix">1</div> <div id="nix_s1_2" class="nix">2</div> <div id="nix_s1_3" class="nix">3</div> <div id="nix_s1_4" class="nix">4</div> <div id="nix_s1_5" class="nix">5</div> <div id="nix_s1_6" class="nix">6</div> <div id="nix_s1_7" class="nix">7</div> <div id="nix_s1_8" class="nix">8</div> <div id="nix_s1_9" class="nix">9</div> </div> <div class="nixbg"> <div id="nix_s2_0" class="nix">0</div> <div id="nix_s2_1" class="nix">1</div> <div id="nix_s2_2" class="nix">2</div> <div id="nix_s2_3" class="nix">3</div> <div id="nix_s2_4" class="nix">4</div> <div id="nix_s2_5" class="nix">5</div> <div id="nix_s2_6" class="nix">6</div> <div id="nix_s2_7" class="nix">7</div> <div id="nix_s2_8" class="nix">8</div> <div id="nix_s2_9" class="nix">9</div> </div> </div> </div><script> //These functions help add, remove or toggle css classes function tog_class(id, cl) { var elem = document.getElementById(id); if (elem.classList.contains(cl) === true) { elem.classList.remove(cl); } else { elem.classList.add(cl); } } function add_class(id, cl) { var elem = document.getElementById(id); if (elem.classList.contains(cl) !== true) { elem.classList.add(cl); } } function rem_class(id, cl) { var elem = document.getElementById(id); if (elem.classList.contains(cl) === true) { elem.classList.remove(cl); } } //This function gets the date and does operations using H/M/S function startTime() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); var h1 = (h - h % 10) / 10; var h2 = h % 10; var m1 = (m - m % 10) / 10; var m2 = m % 10; var s1 = (s - s % 10) / 10; var s2 = s % 10; set_nix_class("s1", s1); set_nix_class("s2", s2); set_nix_class("m1", m1); set_nix_class("m2", m2); set_nix_class("h1", h1); set_nix_class("h2", h2); var t = setTimeout(startTime, 500); } //This function calls the appropriate class changes function set_nix_class(target, val) { for (i = 0; i < 10; i++) { if (i != val) { rem_class("nix_" + target + "_" + i, "nix_open"); } } add_class("nix_" + target + "_" + val, "nix_open"); } </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://down./" target="_blank"> </a></p> </div> </body> </html> |
|
|
来自： 昵称48806104 > 《文件夹1》
