CSS3霓虹灯文字特效

最新推荐文章于 2024-05-16 09:43:17 发布

lucky芬

最新推荐文章于 2024-05-16 09:43:17 发布

阅读量3.1k

点赞数

分类专栏：练手小案例

练手小案例专栏收录该内容

42 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS3霓虹灯文字特效</title>
		<meta name="keywords" content="canvas动画, 手机微信网站特效, css3动画, html5特效, 网页特效" />
		<style type="text/css">
        .text-effect {
          overflow: hidden;
          position: relative;
          -webkit-filter: contrast(110%) brightness(190%);
                  filter: contrast(110%) brightness(190%);
        }
        .neon {
          position: relative;
          background: black;
          color: transparent;
        }
        .neon::before, .neon::after {
          content: attr(data-text);
          color: white;
          -webkit-filter: blur(0.02em);
                  filter: blur(0.02em);
          position: absolute;
          top: 0;
          left: 0;
          pointer-events: none;
        }
        .neon::after {
          mix-blend-mode: difference;
        }
        .gradient,
        .spotlight {
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          pointer-events: none;
          z-index: 10;
        }
        .gradient {
          background: -webkit-linear-gradient(45deg, red, blue);
          background: linear-gradient(45deg, red, blue);
          mix-blend-mode: multiply;
        }
        .spotlight {
          -webkit-animation: light 5s infinite linear;
                  animation: light 5s infinite linear;
          background: -webkit-radial-gradient(circle, #ffffff, rgba(0, 0, 0, 0) 25%) 0 0/25% 25%, -webkit-radial-gradient(circle, #ffffff, #000000 25%) 50% 50%/12.5% 12.5%;
          background: radial-gradient(circle, #ffffff, rgba(0, 0, 0, 0) 25%) 0 0/25% 25%, radial-gradient(circle, #ffffff, #000000 25%) 50% 50%/12.5% 12.5%;
          top: -100%;
          left: -100%;
          mix-blend-mode: color-dodge;
        }

        @-webkit-keyframes light {
          100% {
            -webkit-transform: translate3d(50%, 50%, 0);
                    transform: translate3d(50%, 50%, 0);
          }
        }
        @keyframes light {
          100% {
            -webkit-transform: translate3d(50%, 50%, 0);
                    transform: translate3d(50%, 50%, 0);
          }
        }
        .neon {
          font: 700 100px 'Lato', sans-serif;
          text-transform: uppercase;
          text-align: center;
          margin: 0;
        }
        .neon:focus {
          outline: none;
          border: 1px dotted white;
        }

        body {
          background: black;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          min-height: 100vh;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -ms-flex-line-pack: center;
              align-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
        }

        </style>
	</head>
	<body>
		<div class="text-effect">
			<h1 class="neon" data-text="SHUWON" contenteditable>SHUWON</h1>
			<div class="gradient"></div>
			<div class="spotlight"></div>
		</div>
	</body>
</html>

lucky芬

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3霓虹灯文字特效

CSS3霓虹灯文字特效 .text-effect { overflow: hidden; position: relative; -webkit-filter: contrast(110%) brightness(190%); filter: contrast(110%) b
复制链接

扫一扫