                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /CSS3扁平化博客之文章頁及常用組件

怎么做那個導(dǎo)航欄首頁文章頁，border-bottom 的向左向右消失，顯示的過渡效果呢

慕粉3128060

2016-07-04

源自：CSS3扁平化博客之文章頁及常用組件 3-1

關(guān)注問題我要回答

973

操作

收起

2 回答

西風(fēng)瀟瀟
2016-07-14

直接上代碼吧：

HTML:

????????????????<div?id="banner">
			<div?class="inner">
				<h1?class="banner-title">西風(fēng)博客
				<span?class="line?line-top"></span>
				<span?class="line?line-bottom"></span>
				</h1>
				<div?class="sub-heading">Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit.?</div>
				<button>了解我</button>
				<div?class="more">
					更多
					<i?class="icon-angle-down?icon-2x"></i>
					<!--?<p><i?class="icon-angle-down?icon-2x"></i></p>?-->
				</div>
				
			</div>
		</div>

CSS:

#banner?.inner{
	max-width:?300px;
	text-align:?center;
	margin:?0?auto;
	position:?relative;
	top:?160px;
	color:#fff;
}

.banner-title{
	position:?relative;
	height:?38px;
	line-height:?38px;
	padding:?10px?0;
	border-top:?2px?solid?#ddd;
	border-bottom:?2px?solid?#ddd;?

}

.banner-title?.line{
	display:?block;
	position:?absolute;
	background:?none;
	background-color:?#fff;
}
@keyframes?left-right{
	0%,30%{
		width:?0;
	left:?-100px;
	}
	100%{
		width:?100%;
		left:0;
	}
}
@keyframes?right-left{
	0%,30%{
		width:?0;
	right:?-100px;
	}
	100%{
		width:?100%;
		right:0;
	}
}
.banner-title?.line-top{
	height:?2px;
	width:?100%;
	top:?-2px;
	animation:left-right?1s?ease;
}?

.banner-title?.line-bottom{
	width:?100%;
	height:?2px;
	bottom:?-2px;
	animation:right-left?1s?ease;
}