使用svg filter实现波浪文字效果代码
代码语言:html
所属分类:布局界面
代码描述:使用svg filter实现波浪文字效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { font-family: "SF Pro"; padding: 0.5em; margin: 0; } div { --color: black; display: flex; align-items: center; justify-content: center; min-height: 80vh; position: relative; } div:before { content: ""; position: absolute; inset: 0.5em; background: var(--color); opacity: 0.1; z-index: -1; } h1 { font-size: 4rem; max-width: 12ch; position: relative; z-index: 1; color: var(--color); } h1:before { content: attr(data-title); position: absolute; top: -10px; left: -10px; z-index: -1; color: transparent; font-size: 105%; -webkit-text-stroke: 0.0333em var(--color); filter: var(--filter); opacity: 0.333; } svg { height: 0; width: 0; } </style> </head> <body > <div style="--color: purple;"><h1>Lorem ipsum dolor set amet</h1></div> <div style="--color: red;"><h1>Lorem ipsum dolor set amet&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0