zoukankan html css js c++ java
纯CSS实现液晶字体效果

这个比较简单，直接贴代码了：
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <title>使用css实现液晶字体效果</title>
        <script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
        <style type="text/css">
            /*  The Digits  */
            .light {
                width: 300px;
                background: #f4f5f7;
                height: 60px;
                text-align: center;
            }

            .digits div {
                text-align: left;
                position: relative;
                width: 28px;
                height: 50px;
                display: inline-block;
                margin: 0 4px;
            }

            .light .digits div span {
                background-color: #272e38;
                border-color: #272e38;
            }

            .digits div span {
                opacity: 0;
                position: absolute;
                -webkit-transition: 0.25s;
                -moz-transition: 0.25s;
                transition: 0.25s;
            }

            .digits div span:before,
            .digits div span:after {
                content: '';
                position: absolute;
                width: 0;
                height: 0;
                border: 5px solid transparent;
            }

            .digits .d1 {
                height: 5px;
                width: 16px;
                top: 0;
                left: 6px;
            }

            .digits .d1:before {
                border-width: 0 5px 5px 0;
                border-right-color: inherit;
                left: -5px;
            }

            .digits .d1:after {
                border-width: 0 0 5px 5px;
                border-left-color: inherit;
                right: -5px;
            }

            .digits .d2 {
                height: 5px;
                width: 16px;
                top: 24px;
                left: 6px;
            }

            .digits .d2:before {
                border-width: 3px 4px 2px;
                border-right-color: inherit;
                left: -8px;
            }

            .digits .d2:after {
                border-width: 3px 4px 2px;
                border-left-color: inherit;
                right: -8px;
            }

            .digits .d3 {
                height: 5px;
                width: 16px;
                top: 48px;
                left: 6px;
            }

            .digits .d3:before {
                border-width: 5px 5px 0 0;
                border-right-color: inherit;
                left: -5px;
            }

            .digits .d3:after {
                border-width: 5px 0 0 5px;
                border-left-color: inherit;
                right: -5px;
            }

            .digits .d4 {
                width: 5px;
                height: 14px;
                top: 7px;
                left: 0;
            }

            .digits .d4:before {
                border-width: 0 5px 5px 0;
                border-bottom-color: inherit;
                top: -5px;
            }

            .digits .d4:after {
                border-width: 0 0 5px 5px;
                border-left-color: inherit;
                bottom: -5px;
            }

            .digits .d5 {
                width: 5px;
                height: 14px;
                top: 7px;
                right: 0;
            }

            .digits .d5:before {
                border-width: 0 0 5px 5px;
                border-bottom-color: inherit;
                top: -5px;
            }

            .digits .d5:after {
                border-width: 5px 0 0 5px;
                border-top-color: inherit;
                bottom: -5px;
            }

            .digits .d6 {
                width: 5px;
                height: 14px;
                top: 32px;
                left: 0;
            }

            .digits .d6:before {
                border-width: 0 5px 5px 0;
                border-bottom-color: inherit;
                top: -5px;
            }

            .digits .d6:after {
                border-width: 0 0 5px 5px;
                border-left-color: inherit;
                bottom: -5px;
            }

            .digits .d7 {
                width: 5px;
                height: 14px;
                top: 32px;
                right: 0;
            }

            .digits .d7:before {
                border-width: 0 0 5px 5px;
                border-bottom-color: inherit;
                top: -5px;
            }

            .digits .d7:after {
                border-width: 5px 0 0 5px;
                border-top-color: inherit;
                bottom: -5px;
            }


            /* 1 */
            .digits div.one .d5,
            .digits div.one .d7 {
                opacity: 1;
            }

            /* 2 */
            .digits div.two .d1,
            .digits div.two .d5,
            .digits div.two .d2,
            .digits div.two .d6,
            .digits div.two .d3 {
                opacity: 1;
            }

            /* 3 */
            .digits div.three .d1,
            .digits div.three .d5,
            .digits div.three .d2,
            .digits div.three .d7,
            .digits div.three .d3 {
                opacity: 1;
            }

            /* 4 */
            .digits div.four .d5,
            .digits div.four .d2,
            .digits div.four .d4,
            .digits div.four .d7 {
                opacity: 1;
            }

            /* 5 */
            .digits div.five .d1,
            .digits div.five .d2,
            .digits div.five .d4,
            .digits div.five .d3,
            .digits div.five .d7 {
                opacity: 1;
            }

            /* 6 */
            .digits div.six .d1,
            .digits div.six .d2,
            .digits div.six .d4,
            .digits div.six .d3,
            .digits div.six .d6,
            .digits div.six .d7 {
                opacity: 1;
            }


            /* 7 */
            .digits div.seven .d1,
            .digits div.seven .d5,
            .digits div.seven .d7 {
                opacity: 1;
            }

            /* 8 */
            .digits div.eight .d1,
            .digits div.eight .d2,
            .digits div.eight .d3,
            .digits div.eight .d4,
            .digits div.eight .d5,
            .digits div.eight .d6,
            .digits div.eight .d7 {
                opacity: 1;
            }

            /* 9 */
            .digits div.nine .d1,
            .digits div.nine .d2,
            .digits div.nine .d3,
            .digits div.nine .d4,
            .digits div.nine .d5,
            .digits div.nine .d7 {
                opacity: 1;
            }

            /* 0 */
            .digits div.zero .d1,
            .digits div.zero .d3,
            .digits div.zero .d4,
            .digits div.zero .d5,
            .digits div.zero .d6,
            .digits div.zero .d7 {
                opacity: 1;
            }

            /* dot */
            .digits div.dot {
                width: 5px;
            }

            .dot:after {
                width: 5px;
                height: 5px;
                content: '';
                position: absolute;
                left: 0;
                bottom: 0px;
                background-color: #272e38;
            }
        </style>
    </head>
    <body>
        <div class="light">
            <div class="digits"></div>
        </div>
    </body>
</html>

<script>
    function clocknum(num) {
        $('.digits').empty();
        var html = '';
        var strarr = num.toString().split('');
        var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');
        for (var i = 0; i < strarr.length; i++) {
            if (strarr[i] == '.') {
                html += '<div class="dot"></div>'
            } else {
                var clasname = digit_to_name[strarr[i]];
                html += '<div class="' + clasname + '">' +
                    '<span class="d1"></span>' +
                    '<span class="d2"></span>' +
                    '<span class="d3"></span>' +
                    '<span class="d4"></span>' +
                    '<span class="d5"></span>' +
                    '<span class="d6"></span>' +
                    '<span class="d7"></span>' +
                    '</div>';
            }
        }
        $('.digits').append(html);
    }
    
    clocknum(520.1314); //执行
</script>
效果：
查看全文
相关阅读:
【模板】Sparse-Table
UVa 11235 Frequent values
【模板】树状数组
 UVa 1428 Ping pong
数学技巧
 UVa 11300 Spreading the Wealth
UVa 11729 Commando War
UVa 11292 Dragon of Loowater
POJ 3627 Bookshelf
POJ 1056 IMMEDIATE DECODABILITY
原文地址：https://www.cnblogs.com/hunttown/p/14052598.html