最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css实现漂亮的垂直导航样式
时间:2022-06-25 10:03:05 编辑:袖梨 来源:一聚教程网
幻灯片滑动切换的时候,需要做个切换的导航条,甚至很多的页面或者组件都用到导航条,本文结合实例将简单介绍使用CSS实现的垂直幻灯片导航样式效果。
漂亮的垂直导航样式
本文实例中收集了多种不同的导航样式,我们知道,滑动的幻灯片或者其他需要导航引导的组件,它们需要导航指示所在的当前滑块。本文实例中有多种非常有趣和来自不同灵感的导航样式,都是基于垂直幻灯片效果的,当然你也可以修改样式应用到你的项目中去。
这是我们实例中的一小段html结构:
CSS
这是基于所有垂直导航的通用样式。
.nav {
position: relative;
width: 8em;
margin: 0 0 0 3em;
}
.nav__item {
line-height: 1;
position: relative;
display: block;
margin: 0;
padding: 0;
letter-spacing: 0;
color: currentColor;
border: 0;
background: none;
}
.nav__item:focus {
outline: none;
}
为专门的实例添加样式:
/*** Xusni ***/
.nav--xusni .nav__item {
width: 3em;
height: 1.25em;
margin: 0.5em 0;
}
.nav--xusni .nav__item::after {
content: '';
position: absolute;
top: 35%;
left: 0;
width: 100%;
height: 30%;
background: #3c4a9a;
transform-origin: 0 0;
transition: transform 0.5s, background-color 0.5s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.nav--xusni .nav__item:not(.nav__item--current):hover::after,
.nav--xusni .nav__item:not(.nav__item--current):focus::after {
background: #212956;
transition: background-color 0.3s;
}
.nav--xusni .nav__item--current::after {
background: #212956;
transform: scale3d(0.2,1,1);
}
.nav--xusni .nav__item-title {
margin: 0 0 0 1em;
opacity: 0;
display: block;
transform: translate3d(2em,0,0);
transition: opacity 0.5s, transform 0.5s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.nav--xusni .nav__item--current .nav__item-title {
opacity: 1;
transform: translate3d(0,0,0);
transition-delay: 0.1s;
}
xusni风格样式中,为短横线添加:after为元素,当悬停时,短横线变得越来越暗,一旦点击,标题出现,短横线收缩。
更多效果请看demo实例演示,也可以下载源码直接用于您的项目中。
相关文章
- 王者荣耀S38赛季有什么更新 12-25
- 王者荣耀S38赛季有什么更新 王者荣耀S38赛季更新内容介绍 12-25
- 世界之外12.25有什么更新 世界之外12月25日更新内容介绍 12-25
- 光遇12.25红石碎片在哪里 光遇12月25日红石碎片位置攻略 12-25
- 奇迹暖暖绚光引途第二天怎么玩 绚光引途day2庆祝之舞搭配攻略 12-25
- 无限暖暖拍照打卡位置在哪里 无限暖暖世界巡游位置全攻略 12-25