前端开发CSS3炫酷绘制发光字

互联网前端开发面试提问 前端开发需要做 前端开发软件前十

主要使用的属性:transition、text-shadow
html 代码

<!DOCTYPE>
<head>
    <title>css3炫酷效果-css3发光字</title>
    <style>
        body {
            background: #000;
            text-align: center;
            margin: 0;
        }
        h1 {
            margin: 0;
            color: #ffffff;
            transition: all .5s;
            font-size: 900%;
        }
        h1:hover {
            letter-spacing: 100px;
            font-size: 1200%;
            color: #ffffff;
            ;
            text-shadow: 0 0 5px #fff,
            0 0 10px #fff,
            0 0 15px #fff,
            0 0 20px #FF9900,
            0 0 35px #FF9900,
            0 0 40px #FF9900,
            0 0 50px #FF9900,
            0 0 75px #FF9900;
        }
        h1 .line {
            margin: 50px auto 0;
            transition: all 1s;
            width: 0;
            height: 8px;
            border-radius: 4px;
            background: #fff;
        }
        h1:hover .line {
            width: 100%;
        }
    </style>
</head>
<body>
    <h1>Hojo
        <div class=”line”></div>
    </h1>
</body>
</html>

前端开发工具基础用哪个好 前端工程开发工具 php前端开发面试题

» 本文来自:前端开发者 » 《前端开发CSS3炫酷绘制发光字》
» 本文链接地址:https://www.rokub.com/5459.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!