css实现闪烁的霓虹灯文字动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现闪烁的霓虹灯文字动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet"> <style> .text-effect { overflow: hidden; position: relative; filter: contrast(110%) brightness(190%); } .neon { position: relative; background: black; color: transparent; } .neon::before, .neon::after { content: attr(data-text); color: white; 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: linear-gradient(45deg, red, blue); mix-blend-mode: multiply; } .spotlight { -webkit-animation: light 5s infinite linear; animation: light 5s infinite linear; background: radial-gradient(circle, white, transparent 25%) 0 0/25% 25%, radial-gradient(circle, white, black 25%) 50% 50%/12.5% 12.5%; top: -100%; left: -100%; mix-blend-mode: color-dodge; } @-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0