一个炫酷的HTML5 网站维护中页面

这个页面只有代码，无需你添加其他文件元素，能快速适应任何单页。通过html5实现，自适应大小，能满足单页要求，并且界面还是很炫酷的！
预览图是网站维护中页面
代码如下
<!DOCTYPE html>
<html>
 
<head>
 
    <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>页面维护中……</title>
 
</head>
 
<body>
 
<!--
Recreating Apple Watch's Utility face <http://www.apple.com/watch/design/> in HTML+CSS+JS
-->
 
<style>
    body {
        background: black;
    }
 
    .clock {
        position: absolute;
        opacity: 1;
    }
 
    .fill .clock {
        left: 50%;
        top: 50%;
    }
 
    .centre {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
    }
 
    .expand {
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
    }
 
    .anchor {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
    }
 
    .element {
        position: absolute;
        top: 0;
        left: 0;
    }
 
    .round {
        border-radius: 296px;
    }
 
    .circle-1 {
        background: white;
        width: 12px;
        height: 12px;
    }
 
    .circle-2 {
        background: #FA9F22;
        width: 8px;
        height: 8px;
    }
 
    .circle-3 {
        background: black;
        width: 4px;
        height: 4px;
    }
 
    .second {
        transform: rotate(180deg);
    }
 
    .minute {
        transform: rotate(54deg);
    }
 
    .second-hand {
        width: 2px;
        height: 164px;
        background: #FA9F22;
        transform: translate(-50%,-100%) translateY(24px);
    }
 
    .hour {
        transform: rotate(304.5deg);
    }
 
    .thin-hand {
        width: 4px;
        height: 50px;
        background: white;
        transform: translate(-50%,-100%);
    }
 
    .fat-hand {
        width: 10px;
        height: 57px;
        border-radius: 10px;
        background: white;
        transform: translate(-50%,-100%) translateY(-18px);
    }
 
    .minute-hand {
        height: 112px;
    }
 
    .hour-text {
        position: absolute;
        font: 40px Hei, Helvetica, Arial, sans-serif;
        color: white;
        transform: translate(-50%,-50%);
    }
 
    .hour-10 {
        padding-left: 0.4ex;
    }
    .hour-11 {
        padding-left: 0.25ex;
    }
 
    .minute-text {
        position: absolute;
        font: 12px Avenir Next, Helvetica, Arial, sans-serif;
        color: white;
        transform: translate(-50%,-50%);
    }
 
    .minute-line {
        background: white;
        width: 1px;
        height: 9px;
        transform: translate(-50%,-100%) translateY(-131px);
        opacity: 0.34;
    }
</style>
<h2 style="color:white">网站维护中，请稍后访问……</h2>
<div class="fill">
    <div class="reference"></div>
    <div class="clock" id="utility-clock">
        <div class="centre">
            <div class="dynamic"></div>
            <div class="expand round circle-1"></div>
            <div class="anchor hour">
                <div class="element thin-hand"></div>
                <div class="element fat-hand"></div>
            </div>
            <div class="anchor minute">
                <div class="element thin-hand"></div>
                <div class="element fat-hand minute-hand"></div>
            </div>
            <div class="anchor second">
                <div class="element second-hand"></div>
            </div>
            <div class="expand round circle-2"></div>
            <div class="expand round circle-3"></div>
        </div>
    </div>
</div>
 
<script>
    var clock = document.querySelector('#utility-clock')
    utilityClock(clock)
 
    if (clock.parentNode.classList.contains('fill')) autoResize(clock, 295 + 32)
 
    function utilityClock(container) {
        var dynamic = container.querySelector('.dynamic')
        var hourElement = container.querySelector('.hour')
        var minuteElement = container.querySelector('.minute')
        var secondElement = container.querySelector('.second')
        var minute = function(n) {
            return n % 5 == 0 ? minuteText(n) : minuteLine(n)
        }
        var minuteText = function(n) {
            var element = document.createElement('div')
            element.className = 'minute-text'
            element.innerHTML = (n < 10 ? '0' : '') + n
            position(element, n / 60, 135)
            dynamic.appendChild(element)
        }
        var minuteLine = function(n) {
            var anchor = document.createElement('div')
            anchor.className = 'anchor'
            var element = document.createElement('div')
            element.className = 'element minute-line'
            rotate(anchor, n)
            anchor.appendChild(element)
            dynamic.appendChild(anchor)
        }
        var hour = function(n) {
            var element = document.createElement('div')
            element.className = 'hour-text hour-' + n
            element.innerHTML = n
            position(element, n / 12, 105)
            dynamic.appendChild(element)
        }
        var position = function(element, phase, r) {
            var theta = phase * 2 * Math.PI
            element.style.top = (-r * Math.cos(theta)).toFixed(1) + 'px'
            element.style.left = (r * Math.sin(theta)).toFixed(1) + 'px'
        }
        var rotate = function(element, second) {
            element.style.transform = element.style.webkitTransform = 'rotate(' + (second * 6) + 'deg)'
        }
        var animate = function() {
            var now = new Date()
            var time = now.getHours() * 3600 +
                    now.getMinutes() * 60 +
                    now.getSeconds() * 1 +
                    now.getMilliseconds() / 1000
            rotate(secondElement, time)
            rotate(minuteElement, time / 60)
            rotate(hourElement, time / 60 / 12)
            requestAnimationFrame(animate)
        }
        for (var i = 1; i <= 60; i ++) minute(i)
        for (var i = 1; i <= 12; i ++) hour(i)
        animate()
    }
 
    function autoResize(element, nativeSize) {
        var update = function() {
            var scale = Math.min(window.innerWidth, window.innerHeight) / nativeSize
            element.style.transform = element.style.webkitTransform = 'scale(' + scale.toFixed(3) + ')'
        }
        update()
        window.addEventListener('resize', update)
    }
</script>
</body>
</html>
文章版权归作者所有，未经允许请勿转载。
THE END
资源分享
喜欢就支持以下吧