devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

跨年、元旦、除夕（前端HTML）_春节前端代码

作者：盐析白兔 | 2024-02-27 02:08:07

赞

踩

春节前端代码

目录

效果展示：

操作：

代码：

效果展示：

操作：

打开记事本粘贴代码

保存后更改后缀为html

双击运行

代码：

  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
  7.     <title>新年快乐</title>
  8.   </head>
  9.   <body>
  10.     <canvas class="canvas"></canvas>
  11.     <div class="overlay">
  12.       <div class="tabs">
  13.         <div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div>
  14.         <div class="tabs-panels">
  15.           <ul class="tabs-panel commands">
  16.             <li class="commands-item"><span class="commands-item-title">Text</span><span class="commands-item-info" data-demo="Hello :)">Type anything</span><span class="commands-item-action">Demo</span></li>
  17.             <li class="commands-item"><span class="commands-item-title">Countdown</span><span class="commands-item-info" data-demo="#countdown 10">#countdown<span class="commands-item-mode">number</span></span><span class="commands-item-action">Demo</span></li>
  18.             <li class="commands-item"><span class="commands-item-title">Icon</span><span class="commands-item-info" data-demo="#icon thumbs-up">#icon<span class="commands-item-mode">name</span>&nbsp;(using <a href="//fortawesome.github.io/Font-Awesome/#icons-new" target="_blank">Font Awesome</a>)</span><span class="commands-item-action">Demo</span></li>
  19.             <li class="commands-item"><span class="commands-item-title">Time</span><span class="commands-item-info" data-demo="#time">#time</span><span class="commands-item-action">Demo</span></li>
  20.             <li class="commands-item"><span class="commands-item-title">Rectangle</span><span class="commands-item-info" data-demo="#rectangle 30x15">#rectangle<span class="commands-item-mode">width x height</span></span><span class="commands-item-action">Demo</span></li>
  21.             <li class="commands-item"><span class="commands-item-title">Circle</span><span class="commands-item-info" data-demo="#circle 25">#circle<span class="commands-item-mode">diameter</span></span><span class="commands-item-action">Demo</span></li>
  22.             <li class="commands-item commands-item--gap"><span class="commands-item-title">Animate</span><span class="commands-item-info" data-demo="The time is|#time|#countdown 3|#icon thumbs-up"><span class="commands-item-mode">command1</span>&nbsp;|<span class="commands-item-mode">command2</span></span><span class="commands-item-action">Demo</span></li>
  23.           </ul>
  24.           <div class="tabs-panel ui-details">
  25.             <div class="ui-details-content">
  26.             </div>
  27.           </div>
  28.         </div>
  29.       </div>
  30.     </div>
  31.     <audio src="http://music.163.com/song/media/outer/url?id=41667067.mp3" autoplay="autoplay"></audio>
  32. <script>
  33.  
  34. var str_text='新年倒计时|五|四|三|二|一|2024|新年快乐！|我会一直在！'
  35.  
  36. var S = {
  37.   init: function () {
  38.     var action = window.location.href,
  39.         i = action.indexOf('?a=');
  40.  
  41.     S.Drawing.init('.canvas');
  42.     S.ShapeBuilder.init();
  43.     S.UI.init();
  44.     document.body.classList.add('body--ready');
  45.  
  46.     if (i !== -1) {
  47.       S.UI.simulate(decodeURI(action).substring(i + 3));
  48.     } else {
  49.       S.UI.simulate(str_text);
  50.     }
  51.  
  52.     S.Drawing.loop(function () {
  53.       S.Shape.render();
  54.     });
  55.   }
  56. };
  57.  
  58.  
  59. window.addEventListener('load', function () {
  60.   S.init();
  61. });
  62.  
  63.  
  64. S.Drawing = (function () {
  65.   var canvas,
  66.       context,
  67.       renderFn,
  68.       requestFrame = window.requestAnimationFrame       ||
  69.                      window.webkitRequestAnimationFrame ||
  70.                      window.mozRequestAnimationFrame    ||
  71.                      window.oRequestAnimationFrame      ||
  72.                      window.msRequestAnimationFrame     ||
  73.                      function (callback) {
  74.                         window.setTimeout(callback, 1000 / 60);
  75.                       };
  76.  
  77.   return {
  78.     init: function (el) {
  79.       canvas = document.querySelector(el);
  80.       context = canvas.getContext('2d');
  81.       this.adjustCanvas();
  82.  
  83.       window.addEventListener('resize', function () {
  84.         S.Drawing.adjustCanvas();
  85.       });
  86.     },
  87.  
  88.     loop: function (fn) {
  89.       renderFn = !renderFn ? fn : renderFn;
  90.       this.clearFrame();
  91.       renderFn();
  92.       requestFrame.call(window, this.loop.bind(this));
  93.     },
  94.  
  95.     adjustCanvas: function () {
  96.       canvas.width = window.innerWidth;
  97.       canvas.height = window.innerHeight;
  98.     },
  99.  
  100.     clearFrame: function () {
  101.       context.clearRect(0, 0, canvas.width, canvas.height);
  102.     },
  103.  
  104.     getArea: function () {
  105.       return { w: canvas.width, h: canvas.height };
  106.     },
  107.  
  108.     drawCircle: function (p, c) {
  109.       context.fillStyle = c.render();
  110.       context.beginPath();
  111.       context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true);
  112.       context.closePath();
  113.       context.fill();
  114.     }
  115.   };
  116. }());
  117.  
  118.  
  119. S.Point = function (args) {
  120.   this.x = args.x;
  121.   this.y = args.y;
  122.   this.z = args.z;
  123.   this.a = args.a;
  124.   this.h = args.h;
  125. };
  126.  
  127.  
  128. S.Color = function (r, g, b, a) {
  129.   this.r = r;
  130.   this.g = g;
  131.   this.b = b;
  132.   this.a = a;
  133. };
  134.  
  135. S.Color.prototype = {
  136.   render: function () {
  137.     return 'rgba(' + this.r + ',' + this.g + ',' + this.b + ',' + this.a + ')';
  138.   }
  139. };
  140.  
  141.  
  142. S.UI = (function () {
  143.   var input = document.querySelector('.ui-input'),
  144.       ui = document.querySelector('.ui'),
  145.       help = document.querySelector('.help'),
  146.       commands = document.querySelector('.commands'),
  147.       overlay = document.querySelector('.overlay'),
  148.       canvas = document.querySelector('.canvas'),
  149.       interval,
  150.       isTouch = ('ontouchstart' in window || navigator.msMaxTouchPoints),
  151.       currentAction,
  152.       resizeTimer,
  153.       time,
  154.       maxShapeSize = 30,
  155.       firstAction = true,
  156.       sequence = [],
  157.       cmd = '#';
  158.  
  159.   function formatTime(date) {
  160.     var h = date.getHours(),
  161.         m = date.getMinutes();
  162.  
  163.     m = m < 10 ? '0' + m : m;
  164.     return h + ':' + m;
  165.   }
  166.  
  167.   function getValue(value) {
  168.     return value && value.split(' ')[1];
  169.   }
  170.  
  171.   function getAction(value) {
  172.     value = value && value.split(' ')[0];
  173.     return value && value[0] === cmd && value.substring(1);
  174.   }
  175.  
  176.   function timedAction(fn, delay, max, reverse) {
  177.     clearInterval(interval);
  178.     currentAction = reverse ? max : 1;
  179.     fn(currentAction);
  180.  
  181.     if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) {
  182.       interval = setInterval(function () {
  183.         currentAction = reverse ? currentAction - 1 : currentAction + 1;
  184.         fn(currentAction);
  185.  
  186.         if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) {
  187.           clearInterval(interval);
  188.         }
  189.       }, delay);
  190.     }
  191.   }
  192.  
  193.   function reset(destroy) {
  194.     clearInterval(interval);
  195.     sequence = [];
  196.     time = null;
  197.  
  198.     if (destroy) {
  199.       S.Shape.switchShape(S.ShapeBuilder.letter(''));
  200.     }
  201.   }
  202.  
  203.   function performAction(value) {
  204.     var action,
  205.         current;
  206.  
  207.     overlay.classList.remove('overlay--visible');
  208.     sequence = typeof(value) === 'object' ? value : sequence.concat(value.split('|'));
  209.  
  210.  
  211.     timedAction(function () {
  212.       current = sequence.shift();
  213.       action = getAction(current);
  214.       value = getValue(current);
  215.  
  216.       switch (action) {
  217.       case 'countdown':
  218.         value = parseInt(value, 10) || 10;
  219.         value = value > 0 ? value : 10;
  220.  
  221.         timedAction(function (index) {
  222.           if (index === 0) {
  223.             if (sequence.length === 0) {
  224.               S.Shape.switchShape(S.ShapeBuilder.letter(''));
  225.             } else {
  226.               performAction(sequence);
  227.             }
  228.           } else {
  229.             S.Shape.switchShape(S.ShapeBuilder.letter(index), true);
  230.           }
  231.         }, 1000, value, true);
  232.         break;
  233.  
  234.       case 'rectangle':
  235.         value = value && value.split('x');
  236.         value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2];
  237.  
  238.         S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0], 10)), Math.min(maxShapeSize, parseInt(value[1], 10))));
  239.         break;
  240.  
  241.       case 'circle':
  242.         value = parseInt(value, 10) || maxShapeSize;
  243.         value = Math.min(value, maxShapeSize);
  244.         S.Shape.switchShape(S.ShapeBuilder.circle(value));
  245.         break;
  246.  
  247.       case 'time':
  248.         var t = formatTime(new Date());
  249.  
  250.         if (sequence.length > 0) {
  251.           S.Shape.switchShape(S.ShapeBuilder.letter(t));
  252.         } else {
  253.           timedAction(function () {
  254.             t = formatTime(new Date());
  255.             if (t !== time) {
  256.               time = t;
  257.               S.Shape.switchShape(S.ShapeBuilder.letter(time));
  258.             }
  259.           }, 1000);
  260.         }
  261.         break;
  262.  
  263.       case 'icon':
  264.         S.ShapeBuilder.imageFile('font-awesome/' + value + '.png', function (obj) {
  265.           S.Shape.switchShape(obj);
  266.         });
  267.         break;
  268.  
  269.       default:
  270.         S.Shape.switchShape(S.ShapeBuilder.letter(current[0] === cmd ? 'What?' : current));
  271.       }
  272.     }, 2500, sequence.length);
  273.   }
  274.  
  275.  
  276.  
  277.  
  278.   return {
  279.     init: function () {
  280.    
  281.  
  282.       if (isTouch) {
  283.         document.body.classList.add('touch');
  284.       }
  285.  
  286.       S.UI.Tabs.init();
  287.     },
  288.  
  289.     simulate: function (action) {
  290.       performAction(action);
  291.     }
  292.   };
  293. }());
  294.  
  295.  
  296. S.UI.Tabs = (function () {
  297.   var labels = document.querySelector('.tabs-labels'),
  298.       triggers = document.querySelectorAll('.tabs-label'),
  299.       panels = document.querySelectorAll('.tabs-panel');
  300.  
  301.   function activate(i) {
  302.     triggers[i].classList.add('tabs-label--active');
  303.     panels[i].classList.add('tabs-panel--active');
  304.   }
  305.  
  306.   function bindEvents() {
  307.     labels.addEventListener('click', function (e) {
  308.       var el = e.target,
  309.           index;
  310.  
  311.       if (el.classList.contains('tabs-label')) {
  312.         for (var t = 0; t < triggers.length; t++) {
  313.           triggers[t].classList.remove('tabs-label--active');
  314.           panels[t].classList.remove('tabs-panel--active');
  315.  
  316.           if (el === triggers[t]) {
  317.             index = t;
  318.           }
  319.         }
  320.  
  321.         activate(index);
  322.       }
  323.     });
  324.   }
  325.  
  326.   return {
  327.     init: function () {
  328.       activate(0);
  329.       bindEvents();
  330.     }
  331.   };
  332. }());
  333.  
  334.  
  335. S.Dot = function (x, y) {
  336.   this.p = new S.Point({
  337.     x: x,
  338.     y: y,
  339.     z: 5,
  340.     a: 1,
  341.     h: 0
  342.   });
  343.  
  344.   this.e = 0.07;
  345.   this.s = true;
  346.  
  347.   this.c = new S.Color(255, 255, 255, this.p.a);
  348.  
  349.   this.t = this.clone();
  350.   this.q = [];
  351. };
  352.  
  353. S.Dot.prototype = {
  354.   clone: function () {
  355.     return new S.Point({
  356.       x: this.x,
  357.       y: this.y,
  358.       z: this.z,
  359.       a: this.a,
  360.       h: this.h
  361.     });
  362.   },
  363.  
  364.   _draw: function () {
  365.     this.c.a = this.p.a;
  366.     S.Drawing.drawCircle(this.p, this.c);
  367.   },
  368.  
  369.   _moveTowards: function (n) {
  370.     var details = this.distanceTo(n, true),
  371.         dx = details[0],
  372.         dy = details[1],
  373.         d = details[2],
  374.         e = this.e * d;
  375.  
  376.     if (this.p.h === -1) {
  377.       this.p.x = n.x;
  378.       this.p.y = n.y;
  379.       return true;
  380.     }
  381.  
  382.     if (d > 1) {
  383.       this.p.x -= ((dx / d) * e);
  384.       this.p.y -= ((dy / d) * e);
  385.     } else {
  386.       if (this.p.h > 0) {
  387.         this.p.h--;
  388.       } else {
  389.         return true;
  390.       }
  391.     }
  392.  
  393.     return false;
  394.   },
  395.  
  396.   _update: function () {
  397.     var p,
  398.         d;
  399.  
  400.     if (this._moveTowards(this.t)) {
  401.       p = this.q.shift();
  402.  
  403.       if (p) {
  404.         this.t.x = p.x || this.p.x;
  405.         this.t.y = p.y || this.p.y;
  406.         this.t.z = p.z || this.p.z;
  407.         this.t.a = p.a || this.p.a;
  408.         this.p.h = p.h || 0;
  409.       } else {
  410.         if (this.s) {
  411.           this.p.x -= Math.sin(Math.random() * 3.142);
  412.           this.p.y -= Math.sin(Math.random() * 3.142);
  413.         } else {
  414.           this.move(new S.Point({
  415.             x: this.p.x + (Math.random() * 50) - 25,
  416.             y: this.p.y + (Math.random() * 50) - 25,
  417.           }));
  418.         }
  419.       }
  420.     }
  421.  
  422.     d = this.p.a - this.t.a;
  423.     this.p.a = Math.max(0.1, this.p.a - (d * 0.05));
  424.     d = this.p.z - this.t.z;
  425.     this.p.z = Math.max(1, this.p.z - (d * 0.05));
  426.   },
  427.  
  428.   distanceTo: function (n, details) {
  429.     var dx = this.p.x - n.x,
  430.         dy = this.p.y - n.y,
  431.         d = Math.sqrt(dx * dx + dy * dy);
  432.  
  433.     return details ? [dx, dy, d] : d;
  434.   },
  435.  
  436.   move: function (p, avoidStatic) {
  437.     if (!avoidStatic || (avoidStatic && this.distanceTo(p) > 1)) {
  438.       this.q.push(p);
  439.     }
  440.   },
  441.  
  442.   render: function () {
  443.     this._update();
  444.     this._draw();
  445.   }
  446. };
  447.  
  448.  
  449. S.ShapeBuilder = (function () {
  450.   var gap = 13,
  451.       shapeCanvas = document.createElement('canvas'),
  452.       shapeContext = shapeCanvas.getContext('2d'),
  453.       fontSize = 500,
  454.       fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';
  455.  
  456.   function fit() {
  457.     shapeCanvas.width = Math.floor(window.innerWidth / gap) * gap;
  458.     shapeCanvas.height = Math.floor(window.innerHeight / gap) * gap;
  459.     shapeContext.fillStyle = 'red';
  460.     shapeContext.textBaseline = 'middle';
  461.     shapeContext.textAlign = 'center';
  462.   }
  463.  
  464.   function processCanvas() {
  465.     var pixels = shapeContext.getImageData(0, 0, shapeCanvas.width, shapeCanvas.height).data,
  466.         dots = [],
  467.         x = 0,
  468.         y = 0,
  469.         fx = shapeCanvas.width,
  470.         fy = shapeCanvas.height,
  471.         w = 0,
  472.         h = 0;
  473.  
  474.     for (var p = 0; p < pixels.length; p += (4 * gap)) {
  475.       if (pixels[p + 3] > 0) {
  476.         dots.push(new S.Point({
  477.           x: x,
  478.           y: y
  479.         }));
  480.  
  481.         w = x > w ? x : w;
  482.         h = y > h ? y : h;
  483.         fx = x < fx ? x : fx;
  484.         fy = y < fy ? y : fy;
  485.       }
  486.  
  487.       x += gap;
  488.  
  489.       if (x >= shapeCanvas.width) {
  490.         x = 0;
  491.         y += gap;
  492.         p += gap * 4 * shapeCanvas.width;
  493.       }
  494.     }
  495.  
  496.     return { dots: dots, w: w + fx, h: h + fy };
  497.   }
  498.  
  499.   function setFontSize(s) {
  500.     shapeContext.font = 'bold ' + s + 'px ' + fontFamily;
  501.   }
  502.  
  503.   function isNumber(n) {
  504.     return !isNaN(parseFloat(n)) && isFinite(n);
  505.   }
  506.  
  507.   return {
  508.     init: function () {
  509.       fit();
  510.       window.addEventListener('resize', fit);
  511.     },
  512.  
  513.     imageFile: function (url, callback) {
  514.       var image = new Image(),
  515.           a = S.Drawing.getArea();
  516.  
  517.       image.onload = function () {
  518.         shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
  519.         shapeContext.drawImage(this, 0, 0, a.h * 0.6, a.h * 0.6);
  520.         callback(processCanvas());
  521.       };
  522.  
  523.       image.onerror = function () {
  524.         callback(S.ShapeBuilder.letter('What?'));
  525.       };
  526.  
  527.       image.src = url;
  528.     },
  529.  
  530.     circle: function (d) {
  531.       var r = Math.max(0, d) / 2;
  532.       shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
  533.       shapeContext.beginPath();
  534.       shapeContext.arc(r * gap, r * gap, r * gap, 0, 2 * Math.PI, false);
  535.       shapeContext.fill();
  536.       shapeContext.closePath();
  537.  
  538.       return processCanvas();
  539.     },
  540.  
  541.     letter: function (l) {
  542.       var s = 0;
  543.  
  544.       setFontSize(fontSize);
  545.       s = Math.min(fontSize,
  546.                   (shapeCanvas.width / shapeContext.measureText(l).width) * 0.8 * fontSize, 
  547.                   (shapeCanvas.height / fontSize) * (isNumber(l) ? 1 : 0.45) * fontSize);
  548.       setFontSize(s);
  549.  
  550.       shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
  551.       shapeContext.fillText(l, shapeCanvas.width / 2, shapeCanvas.height / 2);
  552.  
  553.       return processCanvas();
  554.     },
  555.  
  556.     rectangle: function (w, h) {
  557.       var dots = [],
  558.           width = gap * w,
  559.           height = gap * h;
  560.  
  561.       for (var y = 0; y < height; y += gap) {
  562.         for (var x = 0; x < width; x += gap) {
  563.           dots.push(new S.Point({
  564.             x: x,
  565.             y: y,
  566.           }));
  567.         }
  568.       }
  569.  
  570.       return { dots: dots, w: width, h: height };
  571.     }
  572.   };
  573. }());
  574.  
  575.  
  576. S.Shape = (function () {
  577.   var dots = [],
  578.       width = 0,
  579.       height = 0,
  580.       cx = 0,
  581.       cy = 0;
  582.  
  583.   function compensate() {
  584.     var a = S.Drawing.getArea();
  585.  
  586.     cx = a.w / 2 - width / 2;
  587.     cy = a.h / 2 - height / 2;
  588.   }
  589.  
  590.   return {
  591.     shuffleIdle: function () {
  592.       var a = S.Drawing.getArea();
  593.  
  594.       for (var d = 0; d < dots.length; d++) {
  595.         if (!dots[d].s) {
  596.           dots[d].move({
  597.             x: Math.random() * a.w,
  598.             y: Math.random() * a.h
  599.           });
  600.         }
  601.       }
  602.     },
  603.  
  604.     switchShape: function (n, fast) {
  605.       var size,
  606.           a = S.Drawing.getArea(),
  607.           d = 0,
  608.           i = 0;
  609.  
  610.       width = n.w;
  611.       height = n.h;
  612.  
  613.       compensate();
  614.  
  615.       if (n.dots.length > dots.length) {
  616.         size = n.dots.length - dots.length;
  617.         for (d = 1; d <= size; d++) {
  618.           dots.push(new S.Dot(a.w / 2, a.h / 2));
  619.         }
  620.       }
  621.  
  622.       d = 0;
  623.  
  624.       while (n.dots.length > 0) {
  625.         i = Math.floor(Math.random() * n.dots.length);
  626.         dots[d].e = fast ? 0.25 : (dots[d].s ? 0.14 : 0.11);
  627.  
  628.         if (dots[d].s) {
  629.           dots[d].move(new S.Point({
  630.             z: Math.random() * 20 + 10,
  631.             a: Math.random(),
  632.             h: 18
  633.           }));
  634.         } else {
  635.           dots[d].move(new S.Point({
  636.             z: Math.random() * 5 + 5,
  637.             h: fast ? 18 : 30
  638.           }));
  639.         }
  640.  
  641.         dots[d].s = true;
  642.         dots[d].move(new S.Point({
  643.           x: n.dots[i].x + cx,
  644.           y: n.dots[i].y + cy,
  645.           a: 1,
  646.           z: 5,
  647.           h: 0
  648.         }));
  649.  
  650.         n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1));
  651.         d++;
  652.       }
  653.  
  654.       for (i = d; i < dots.length; i++) {
  655.         if (dots[i].s) {
  656.           dots[i].move(new S.Point({
  657.             z: Math.random() * 20 + 10,
  658.             a: Math.random(),
  659.             h: 20
  660.           }));
  661.  
  662.           dots[i].s = false;
  663.           dots[i].e = 0.04;
  664.           dots[i].move(new S.Point({ 
  665.             x: Math.random() * a.w,
  666.             y: Math.random() * a.h,
  667.             a: 0.3, //.4
  668.             z: Math.random() * 4,
  669.             h: 0
  670.           }));
  671.         }
  672.       }
  673.     },
  674.  
  675.     render: function () {
  676.       for (var d = 0; d < dots.length; d++) {
  677.         dots[d].render();
  678.       }
  679.     }
  680.   };
  681. }());
  682.  
  683.  
  684. </script>
  685.   </body>
  686.   <style>
  687.  
  688.     /*! shape-shifter 2013-08-14 */
  689. /*! normalize.css v2.0.1 | MIT License | git.io/normalize */
  690. article,
  691. aside,
  692. details,
  693. figcaption,
  694. figure,
  695. footer,
  696. header,
  697. hgroup,
  698. nav,
  699. section,
  700. summary {
  701.     display: block
  702. }
  703.  
  704. audio,
  705. canvas,
  706. video {
  707.     display: inline-block
  708. }
  709.  
  710. audio:not([controls]) {
  711.     display: none;
  712.     height: 0
  713. }
  714.  
  715. [hidden] {
  716.     display: none
  717. }
  718.  
  719. html {
  720.     font-family: sans-serif;
  721.     -webkit-text-size-adjust: 100%;
  722.     -ms-text-size-adjust: 100%
  723. }
  724.  
  725. body {
  726.     margin: 0
  727. }
  728.  
  729. a:focus {
  730.     outline: thin dotted
  731. }
  732.  
  733. a:active,
  734. a:hover {
  735.     outline: 0
  736. }
  737.  
  738. h1 {
  739.     font-size: 2em
  740. }
  741.  
  742. abbr[title] {
  743.     border-bottom: 1px dotted
  744. }
  745.  
  746. b,
  747. strong {
  748.     font-weight: 700
  749. }
  750.  
  751. dfn {
  752.     font-style: italic
  753. }
  754.  
  755. mark {
  756.     background: #ff0;
  757.     color: #000
  758. }
  759.  
  760. code,
  761. kbd,
  762. pre,
  763. samp {
  764.     font-family: monospace, serif;
  765.     font-size: 1em
  766. }
  767.  
  768. pre {
  769.     white-space: pre;
  770.     white-space: pre-wrap;
  771.     word-wrap: break-word
  772. }
  773.  
  774. q {
  775.     quotes: "\201C" "\201D" "\2018" "\2019"
  776. }
  777.  
  778. small {
  779.     font-size: 80%
  780. }
  781.  
  782. sub,
  783. sup {
  784.     font-size: 75%;
  785.     line-height: 0;
  786.     position: relative;
  787.     vertical-align: baseline
  788. }
  789.  
  790. sup {
  791.     top: -.5em
  792. }
  793.  
  794. sub {
  795.     bottom: -.25em
  796. }
  797.  
  798. img {
  799.     border: 0
  800. }
  801.  
  802. svg:not(:root) {
  803.     overflow: hidden
  804. }
  805.  
  806. figure {
  807.     margin: 0
  808. }
  809.  
  810. fieldset {
  811.     border: 1px solid silver;
  812.     margin: 0 2px;
  813.     padding: .35em .625em .75em
  814. }
  815.  
  816. legend {
  817.     border: 0;
  818.     padding: 0
  819. }
  820.  
  821. button,
  822. input,
  823. select,
  824. textarea {
  825.     font-family: inherit;
  826.     font-size: 100%;
  827.     margin: 0
  828. }
  829.  
  830. button,
  831. input {
  832.     line-height: normal
  833. }
  834.  
  835. button,
  836. html input[type=button],
  837. input[type=reset],
  838. input[type=submit] {
  839.     -webkit-appearance: button;
  840.     cursor: pointer
  841. }
  842.  
  843. button[disabled],
  844. input[disabled] {
  845.     cursor: default
  846. }
  847.  
  848. input[type=checkbox],
  849. input[type=radio] {
  850.     box-sizing: border-box;
  851.     padding: 0
  852. }
  853.  
  854. input[type=search] {
  855.     -webkit-appearance: textfield;
  856.     -moz-box-sizing: content-box;
  857.     -webkit-box-sizing: content-box;
  858.     box-sizing: content-box
  859. }
  860.  
  861. input[type=search]::-webkit-search-cancel-button,
  862. input[type=search]::-webkit-search-decoration {
  863.     -webkit-appearance: none
  864. }
  865.  
  866. button::-moz-focus-inner,
  867. input::-moz-focus-inner {
  868.     border: 0;
  869.     padding: 0
  870. }
  871.  
  872. textarea {
  873.     overflow: auto;
  874.     vertical-align: top
  875. }
  876.  
  877. table {
  878.     border-collapse: collapse;
  879.     border-spacing: 0
  880. }
  881.  
  882. body {
  883.     font-family: Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  884.     background: #000000;
  885.     color: #666;
  886.     font-size: 16px;
  887.     line-height: 1.5em
  888. }
  889.  
  890. h1 {
  891.     color: #111;
  892.     margin: 0 0 12px;
  893.     font-size: 24px;
  894.     line-height: 1.5em
  895. }
  896.  
  897. p {
  898.     margin: 0 0 10x
  899. }
  900.  
  901. a {
  902.     color: #888;
  903.     text-decoration: none;
  904.     border-bottom: 1px solid #ccc
  905. }
  906.  
  907. a:hover {
  908.     border-bottom-color: #888
  909. }
  910.  
  911. body,
  912. .overlay {
  913.     -webkit-perspective: 1000;
  914.     -webkit-perspective-origin-y: 25%
  915. }
  916.  
  917. .body--ready {
  918.     background: -webkit-linear-gradient(top, #000000 0, #000000 120%);
  919.     background: -moz-linear-gradient(top, #000000 0, #000000 120%);
  920.     background: -o-linear-gradient(top, #000000 0, #000000 120%);
  921.     background: -ms-linear-gradient(top, #000000 0, #000000 120%);
  922.     background: linear-gradient(top, #000000 0, #000000 120%)
  923. }
  924.  
  925. .body--ready .overlay {
  926.     -webkit-transition: -webkit-transform .7s cubic-bezier(0.694, .0482, .335, 1), opacity .7s cubic-bezier(0.694, .0482, .335, 1);
  927.     -moz-transition: -moz-transform .7s cubic-bezier(0.694, .0482, .335, 1), opacity .7s cubic-bezier(0.694, .0482, .335, 1);
  928.     -ms-transition: -ms-transform .7s cubic-bezier(0.694, .0482, .335, 1), opacity .7s cubic-bezier(0.694, .0482, .335, 1);
  929.     -o-transition: -o-transform .7s cubic-bezier(0.694, .0482, .335, 1), opacity .7s cubic-bezier(0.694, .0482, .335, 1);
  930.     transition: transform .7s cubic-bezier(0.694, .0482, .335, 1), opacity .7s cubic-bezier(0.694, .0482, .335, 1)
  931. }
  932.  
  933. .body--ready .ui,
  934. .body--ready .help {
  935.     display: block
  936. }
  937.  
  938. .ui {
  939.     display: none;
  940.     position: absolute;
  941.     left: 50%;
  942.     bottom: 5%;
  943.     width: 300px;
  944.     margin-left: -150px
  945. }
  946.  
  947. .ui-input {
  948.     width: 100%;
  949.     height: 50px;
  950.     background: 0;
  951.     font-size: 24px;
  952.     font-weight: 700;
  953.     color: #fff;
  954.     text-align: center;
  955.     border: 0;
  956.     border-bottom: 2px solid #fff
  957. }
  958.  
  959. .ui-input:focus {
  960.     outline: 0;
  961.     border: 0;
  962.     border-bottom: 2px solid #fff
  963. }
  964.  
  965. .ui-return {
  966.     display: none;
  967.     position: absolute;
  968.     top: 20px;
  969.     right: 0;
  970.     padding: 3px 2px 0;
  971.     font-size: 10px;
  972.     line-height: 10px;
  973.     color: #fff;
  974.     border: 1px solid #fff
  975. }
  976.  
  977. .ui--enter .ui-return {
  978.     display: block
  979. }
  980.  
  981. .ui--wide {
  982.     width: 76%;
  983.     margin-left: 12%;
  984.     left: 0
  985. }
  986.  
  987. .ui--wide .ui-return {
  988.     right: -20px
  989. }
  990.  
  991. .help {
  992.     display: none;
  993.     position: absolute;
  994.     top: 40px;
  995.     right: 40px;
  996.     width: 25px;
  997.     height: 25px;
  998.     text-align: center;
  999.     font-size: 13px;
  1000.     line-height: 27px;
  1001.     font-weight: 700;
  1002.     cursor: pointer;
  1003.     background: #fff;
  1004.     color: #79a8ae;
  1005.     opacity: .9;
  1006.     -webkit-transition: opacity .1s cubic-bezier(0.694, .0482, .335, 1);
  1007.     -moz-transition: opacity .1s cubic-bezier(0.694, .0482, .335, 1);
  1008.     -ms-transition: opacity .1s cubic-bezier(0.694, .0482, .335, 1);
  1009.     -o-transition: opacity .1s cubic-bezier(0.694, .0482, .335, 1);
  1010.     transition: opacity .1s cubic-bezier(0.694, .0482, .335, 1)
  1011. }
  1012.  
  1013. .help:hover {
  1014.     opacity: 1
  1015. }
  1016.  
  1017. .overlay {
  1018.     position: absolute;
  1019.     top: 50%;
  1020.     left: 50%;
  1021.     width: 550px;
  1022.     height: 490px;
  1023.     margin: -260px 0 0 -275px;
  1024.     opacity: 0;
  1025.     -webkit-transform: rotateY(90deg);
  1026.     -moz-transform: rotateY(90deg);
  1027.     -ms-transform: rotateY(90deg);
  1028.     -o-transform: rotateY(90deg);
  1029.     transform: rotateY(90deg)
  1030. }
  1031.  
  1032. .overlay--visible {
  1033.     opacity: 1;
  1034.     -webkit-transform: rotateY(0);
  1035.     -moz-transform: rotateY(0);
  1036.     -ms-transform: rotateY(0);
  1037.     -o-transform: rotateY(0);
  1038.     transform: rotateY(0)
  1039. }
  1040.  
  1041. .ui-share,
  1042. .ui-details {
  1043.     opacity: .9;
  1044.     background: #fff;
  1045.     z-index: 2
  1046. }
  1047.  
  1048. .ui-details-content,
  1049. .ui-share-content {
  1050.     padding: 100px 50px
  1051. }
  1052.  
  1053. .commands {
  1054.     margin: 0;
  1055.     padding: 0;
  1056.     list-style: none;
  1057.     cursor: pointer
  1058. }
  1059.  
  1060. .commands-item {
  1061.     font-size: 12px;
  1062.     line-height: 22px;
  1063.     font-weight: 700;
  1064.     text-transform: uppercase;
  1065.     letter-spacing: 1px;
  1066.     padding: 20px;
  1067.     background: #fff;
  1068.     margin-top: 1px;
  1069.     color: #333;
  1070.     opacity: .9;
  1071.     -webkit-transition: -webkit-transform .7s cubic-bezier(0.694, .0482, .335, 1), opacity .1s cubic-bezier(0.694, .0482, .335, 1);
  1072.     -moz-transition: -moz-transform .1s cubic-bezier(0.694, .0482, .335, 1), opacity .1s cubic-bezier(0.694, .0482, .335, 1);
  1073.     -ms-transition: -ms-transform .1s cubic-bezier(0.694, .0482, .335, 1), opacity .1s cubic-bezier(0.694, .0482, .335, 1);
  1074.     -o-transition: -o-transform .1s cubic-bezier(0.694, .0482, .335, 1), opacity .1s cubic-bezier(0.694, .0482, .335, 1);
  1075.     transition: transform .1s cubic-bezier(0.694, .0482, .335, 1), opacity .1s cubic-bezier(0.694, .0482, .335, 1)
  1076. }
  1077.  
  1078. .commands-item--gap {
  1079.     margin-top: 9px
  1080. }
  1081.  
  1082. .commands-item:hover {
  1083.     opacity: 1
  1084. }
  1085.  
  1086. .commands-item:hover .commands-item-action {
  1087.     background: #333
  1088. }
  1089.  
  1090. .commands-item a {
  1091.     display: inline-block
  1092. }
  1093.  
  1094. .commands-item-mode {
  1095.     display: inline-block;
  1096.     margin-left: 3px;
  1097.     font-style: italic;
  1098.     color: #ccc
  1099. }
  1100.  
  1101. .commands-item-title {
  1102.     display: inline-block;
  1103.     width: 150px
  1104. }
  1105.  
  1106. .commands-item-info {
  1107.     display: inline-block;
  1108.     width: 300px;
  1109.     font-size: 14px;
  1110.     text-transform: none;
  1111.     letter-spacing: 0;
  1112.     font-weight: 400;
  1113.     color: #aaa
  1114. }
  1115.  
  1116. .commands-item-action {
  1117.     display: inline-block;
  1118.     float: right;
  1119.     margin-top: 3px;
  1120.     text-transform: uppercase;
  1121.     font-size: 10px;
  1122.     line-height: 10px;
  1123.     color: #fff;
  1124.     background: #90c9d1;
  1125.     padding: 5px 10px 4px;
  1126.     border-radius: 3px
  1127. }
  1128.  
  1129. .commands-item:first-child {
  1130.     margin-top: 0
  1131. }
  1132.  
  1133. .twitter-share {
  1134.     position: absolute;
  1135.     top: 4px;
  1136.     right: 20px
  1137. }
  1138.  
  1139. .tabs-labels {
  1140.     margin-bottom: 9px
  1141. }
  1142.  
  1143. .tabs-label {
  1144.     display: inline-block;
  1145.     background: #fff;
  1146.     padding: 10px 20px;
  1147.     font-size: 12px;
  1148.     line-height: 22px;
  1149.     font-weight: 700;
  1150.     text-transform: uppercase;
  1151.     letter-spacing: 1px;
  1152.     color: #333;
  1153.     opacity: .5;
  1154.     cursor: pointer;
  1155.     margin-right: 2px;
  1156.     -webkit-transition: opacity .1s cubic-bezier(0.694, .0482, .335, 1);
  1157.     -moz-transition: opacity .1s cubic-bezier(0.694, .0482, .335, 1);
  1158.     -ms-transition: opacity .1s cubic-bezier(0.694, .0482, .335, 1);
  1159.     -o-transition: opacity .1s cubic-bezier(0.694, .0482, .335, 1);
  1160.     transition: opacity .1s cubic-bezier(0.694, .0482, .335, 1)
  1161. }
  1162.  
  1163. .tabs-label:hover {
  1164.     opacity: .9
  1165. }
  1166.  
  1167. .tabs-label--active {
  1168.     opacity: .9
  1169. }
  1170.  
  1171. .tabs-panel {
  1172.     display: none
  1173. }
  1174.  
  1175. .tabs-panel--active {
  1176.     display: block
  1177. }
  1178.  
  1179. .tab-panel {
  1180.     position: absolute;
  1181.     top: 0;
  1182.     left: 0;
  1183.     width: 100%
  1184. }
  1185.  
  1186. .touch .ui-input {
  1187.     display: none
  1188. }
  1189.  
  1190. @media screen and (max-height:600px) {
  1191.     .ui-input {
  1192.         color: #111;
  1193.         border-color: #111
  1194.     }
  1195.  
  1196.     .ui-input:focus {
  1197.         border-color: #111
  1198.     }
  1199. }
  1200.   </style>
  1201. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/149193
推荐阅读