                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /CSS3扁平化博客之文章页及常用组件

怎么做那个导航栏首页文章页，border-bottom 的向左向右消失，显示的过渡效果呢

慕粉3128060

2016-07-04

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

关注问题我要回答

984

操作

收起

2 回答

西风潇潇
2016-07-14

直接上代码吧：

HTML:

                <div id="banner">
			<div class="inner">
				<h1 class="banner-title">西风博客
				<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;
}