纯css实现直线穿透文字动画特效
代码语言:html
所属分类:视觉差异
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Chilanka&display=swap" rel="stylesheet"> <style> body { display: grid; place-content: center; overflow: hidden; margin: 0; height: 100vh; background: url(http://repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png) 50%/cover; } h1 { display: flex; position: relative; padding: 0 0.0625em; transform-style: preserve-3d; font: 900 10vw chilanka, segoe script, purisa, comic sans ms, cursive; } h1::after { position: absolute; top: calc(50% - .5*0.125em); right: 0; width: calc(50% + 50vw); height: 0.125em; border-radius: 0 0.125em 0.125em 0; background: crimson; animation: slide 2s ease-out; content: ""; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0