代码改变世界

纯CSS实现液晶字体效果

2020-11-28 14:54  猎手家园  阅读(1280)  评论(0)  编辑  收藏  举报

这个比较简单，直接贴代码了：

<!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>

效果：