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>
效果：
查看全文
相关阅读:
【leetcode】416. Partition Equal Subset Sum
【leetcode】893. Groups of Special-Equivalent Strings
【leetcode】892. Surface Area of 3D Shapes
【leetcode】883. Projection Area of 3D Shapes
【leetcode】140. Word Break II
【leetcode】126. Word Ladder II
【leetcode】44. Wildcard Matching
【leetcode】336. Palindrome Pairs
【leetcode】354. Russian Doll Envelopes
2017.12.22 英语面试手记
原文地址：https://www.cnblogs.com/hunttown/p/14052598.html