我想一旦用户徘徊在其中一个Navbar上的图标。刚刚显示的文字应该具有宽度过渡。我尝试一个人做这个,但我无法完成不破坏其余的设计
html:
<header>
<img src="http://www.websignature.ch/img/logo_nav.png" alt="WebSignature"/>
</header>
<nav>
<ul>
<li><a href="#"><i class="fa fa-cogs"></i><span>Services</span></a></li><!--
--><li><a href="#"><i class="fa fa-th-list"></i><span>Projects</span></a></li><!--
--><li><a href="#"><i class="fa fa-users"></i><span>About</span></a></li><!--
--><li><a href="#"><i class="fa fa-envelope"></i><span>Contact</span></a></li>
</ul>
</nav>
CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
left: 0;
padding: 0.5em;
height: 4em;
width: 100%;
background: #2196F3;
background: -webkit-linear-gradient(left, #2196F3, #1976D2);
background: -o-linear-gradient(right, #2196F3, #1976D2);
background: -moz-linear-gradient(right, #2196F3, #1976D2);
background: linear-gradient(to right, #2196F3, #1976D2);
-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
}
header img {
height: 100%;
width: auto;
}
nav {
position: fixed;
top: 0;
right: 0;
background: #2196F3;
background: -webkit-linear-gradient(left, #2196F3, #1976D2);
background: -o-linear-gradient(right, #2196F3, #1976D2);
background: -moz-linear-gradient(right, #2196F3, #1976D2);
background: linear-gradient(to right, #2196F3, #1976D2);
-webkit-filter:drop-shadow(2px 2px 5px rgba(0,0,0,0.75));
}
nav:before {
content:"";
position: absolute;
top:0;
right:100%;
width: 0;
height: 0;
border-top: 81.78px solid #2196F3;
border-left: 81.78px solid transparent;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 0.7em;
color: #ffffff;
text-decoration: none;
font-size: 2em;
}
nav ul li a span {
display: none;
padding-left: 0.5em;
overflow: hidden;
font-family: 'Poppins', sans-serif;
}
nav ul li a:hover span {
display: inline;
}
jsfiddle:https://jsfiddle.net/yunnigg/gl1ulljs/
射击。基本上,我在这里正在做的是在跨度元素上为文本增添动画。这将指向您正确的方向。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
left: 0;
padding: 0.5em;
height: 4em;
width: 100%;
background: #2196F3;
background: -webkit-linear-gradient(left, #2196F3, #1976D2);
background: -o-linear-gradient(right, #2196F3, #1976D2);
background: -moz-linear-gradient(right, #2196F3, #1976D2);
background: linear-gradient(to right, #2196F3, #1976D2);
-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
}
header img {
height: 100%;
width: auto;
}
nav {
position: fixed;
top: 0;
right: 0;
background: #2196F3;
background: -webkit-linear-gradient(left, #2196F3, #1976D2);
background: -o-linear-gradient(right, #2196F3, #1976D2);
background: -moz-linear-gradient(right, #2196F3, #1976D2);
background: linear-gradient(to right, #2196F3, #1976D2);
-webkit-filter:drop-shadow(2px 2px 5px rgba(0,0,0,0.75));
}
nav:before {
content:"";
position: absolute;
top:0;
right:100%;
width: 0;
height: 0;
border-top: 81.78px solid #2196F3;
border-left: 81.78px solid transparent;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 0.7em;
color: #ffffff;
text-decoration: none;
font-size: 2em;
}
nav ul li a span {
padding-left: 0.5em;
overflow: hidden;
font-family: 'Poppins', sans-serif;
display: inline-block;
text-indent: -160px;
transition: all 200ms;
}
nav ul li a:hover span {
text-indent: 0px;
}
在这里工作小提琴
希望它有帮助。:)
谢谢
Modefied nav
CSS
nav ul{
-webkit-transition:all 0.3s ease;
transition:all 0.3s ease;
}
nav ul li {
display: inline-block;
-webkit-transition:all 0.3s ease;
transition:all 0.3s ease;
}
nav ul li a {
display: block;
width:50px;
padding: 0.7em;
color: #ffffff;
text-decoration: none;
white-space:nowrap;
font-size: 2em;
-webkit-transition:all 0.3s ease;
transition:all 0.3s ease;
position:relative;
}
nav ul li a span {
display: none;
padding-left: 0.5em;
overflow: hidden;
font-family: 'Poppins', sans-serif;
}
nav ul li a:hover span{
display:inline;
}
nav ul li a:hover {
width:250px;
}