gasp文字动态悬浮动画效果
代码语言:html
所属分类:悬停
代码描述:gasp文字动态悬浮动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color: #3d8aff; padding: 1.5rem; line-height: 1.25; } h1 { font-family: "Montserrat", sans-serif; font-size: 2.5rem; color: #ffffff; letter-spacing: 0.25rem; font-weight: 800; } h1 span { display: block; overflow: hidden; } ul { list-style: none; font-family: "Source Sans Pro", sans-serif; color: #ffffff; letter-spacing: 0.1rem; font-size: 0.85rem; font-weight: 600; overflow: hidden; display: flex; padding-left: 0; margin-top: 0; } ul li { padding-bottom: 0.25rem; margin-right: 1.5rem; } ul li::before { content: "\200B"; } a { color: inherit; text-decoration: none; position: relative; transition: all 0.25s ease-out; } a::before { content: ""; position: absolute; bottom: -0.25rem; width: 0; height: 5px; background-color: #ffffff; transition: all 0.25s ease-out; } a:hover { background-color: rgba(255, 255, 255, 0.15); } a:hover::before { width: 100%; } @media screen and (min-width: 414px) { h1 { font-size: 3.5rem; } ul { font-size: 1.25rem; } } @media screen and (min-width: 768px) { body { display: flex; justif.........完整代码请登录后点击上方下载按钮下载查看
网友评论0