CSS3实现精美横向滚动菜单按钮
【视觉盛宴,一触即发】:
直接进入主题,让我们欣赏一幅绚丽的图景:
紧接着,精彩的代码呈现:
HTML部分:
接下来,是令人瞩目的CSS魔法:
ul { list-style: none; } / 移除列表前的标记 /
ul li a { / 定义链接样式 /
display: block; / 将链接转换为块级元素 /
width: 40px; / 设置宽度为40像素 /
height: 40px; / 设置高度为40像素 /
background: rgb(208, 165, 37); / 背景颜色 /
margin-top: 10px; / 上边距为10像素 /
text-decoration: none; / 移除文本装饰(如下划线) /
line-height: 40px; / 设置文本行高与按钮高度相同 /
position: relative; / 相对定位 /
}
ul li a span { / 定义文字样式 /
width: 0; / 默认宽度为0 /
height: 40px; / 高度与按钮相同 /
display: block; / 块级元素显示 /
visibility: hidden; / 默认隐藏文字 /
overflow: hidden; / 隐藏超出部分 /
font-weight: bold; / 文字加粗 /
position: absolute; / 绝对定位 /
left: 40px; / 文字初始位置在按钮右侧 /
transition: all 0.3s; / CSS动画过渡效果,持续0.3秒 /
}
/ 为每个链接的span设置背景颜色 /
ul li .a1 span { background: rgb(30, 139, 180); } / Home按钮背景色 /
ul li .a2 span { background: rgb(125, 163, 23); } / Chat按钮背景色 /
ul li .a3 span { background: rgb(175, 30, 131); } / About按钮背景色 /
/ 鼠标悬停时的样式变化 /
ul li a:hover span { visibility: visible; width: auto; padding: 0 20px; } / 文字可见,宽度自适应,左右增加内边距 /
为了更好地呈现代码,我们特别优化了结构,并引入了CSS3动画和元素的隐藏技术。这些优化使得菜单按钮更加生动、吸引人。现在,你可以通过点击“Home”、“Chat”或“About”来这个精美的横向滚动菜单按钮的更多魅力了。