css实现液晶字体效果

最新推荐文章于 2025-02-24 15:24:04 发布

1°叁柒

最新推荐文章于 2025-02-24 15:24:04 发布

阅读量785

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/zhu_nana/article/details/116977958

版权

<!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: 350px;
                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;

最低0.47元/天解锁文章