冒泡背景悬浮按钮动画效果
代码语言:html
所属分类:悬停
代码描述:冒泡背景悬浮按钮动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { --c: goldenrod; color: var(--c); font-size: 16px; border: 0.3em solid var(--c); border-radius: 0.5em; width: 12em; height: 3em; text-transform: uppercase; font-weight: bold; font-family: sans-serif; letter-spacing: 0.1em; text-align: center; line-height: 3em; position: relative; overflow: hidden; z-index: 1; transition: 0.5s; margin: 1em; } nav ul li span { position: absolute; width: 25%; height: 100%; background-color: var(--c); transform: translateY(150%); border-radius: 50%; left: calc((var(--n) - 1) * 25%); transition: 0.5s; transition-d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0