css实现文字菜单悬浮横线分割动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现文字菜单悬浮横线分割动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --bgcolor: rgb(2, 0, 36); } * { margin: 0; padding: 0; font-family: sans-serif; } body { min-height: 100vh; display: grid; place-items: center; background: var(--bgcolor); color: white; } ul { list-style: none; } h1 { font-size: 5rem; position: relative; text-transform: uppercase; transition: all 300ms ease; width: fit-content; cursor: pointer; } h1:hover { transform: skew(10deg); } h1::before { content: attr(data-name); position: absolute; top: 0; left: -20px; background: var(--bgcolor); height: 3rem; overflow: hidden; transition: all 300ms ease; padding-left: 20px; } h1:hover::before { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0