css实现霓虹灯效果-html代码-BFW代码库

css实现霓虹灯效果

代码语言：html

所属分类：其他

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Neon text effect</title>
    <style>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
        body {
            background: #000;
        }

        .neon {
            text-align: left;
            margin: 60px;
            font-family: Roboto,sans-serif;
            display: inline-block;
            position: relative;
            font-size: 10em;
            text-transform: uppercase;
            color: #fff;
            text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px rgba(255, 255, 255, 0.4), 0 0 70px rgba(255, 255, 255, 0.4), 0 0 80px rgba(255, 255, 255, 0.4), 0 0 100px rgba(255, 255, 255, 0.4), 0 0 150px rgba(255, 255, 255, 0.4);
        }

        .neon--pink {
            text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
        }

        .neon--blue {
            text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px.........完整代码请登录后点击上方下载按钮下载查看