使用CSS给页面关键词加条彩虹线

使用CSS给页面关键词加条彩虹线

给页面页面关键词下方加上一个彩虹颜色的装饰线条，更能吸引人注意力，这里来动手实现看看效果

效果

css

.txt-title  {
  width: 600px;
	text-align: center;
	padding: 10px 0;
	margin-bottom: 15px;	
} 
.txt-title p, {
	font-size: 16px;
	padding: 10px 0;
}

.line {
	background: linear-gradient(to left, #efefef, #b6b6b6, #efefef);
	height: 2px;
	margin: 0;
}

/*彩虹线*/
.rainbowline {
  width: 600px; 
  height: 2px;
  margin: 0 1%;
  border-radius:1px ; 
  background: linear-gradient(to left,   #efefef, #efefef, red,orange,yellow,green,blue,indigo,violet,#efefef ,#efefef  );
  background-size: 100% 100%;
  animation: rainbow 5s ease-in-out infinite;   
}
@keyframes rainbow {
	0% {
	 background-position: left 10 right 0;
	} 	
	100% {	  
	 background-position: 600px 0;  
	}
}

html

 <div  class="txt-title">
  <h2>高科技产品</h2>
  <p>稳定</p>				 
 <div class="line"></div>
 </div>

 <div  class="txt-title">
  <h2>新品</h2>
  <p>更快</p>				 
  <div class="rainbowline"></div>
 </div>	

放大看看效果