css怎么让分割线变色,CSS3 彩虹虚线分隔线

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Lato:100);

.hr {

width: 100%;

height: 1px;

display: block;

position: relative;

}

.hr:after,

.hr:before {

content: "";

position: absolute;

width: 100%;

height: 1px;

bottom: 0;

left: 0;

}

.hr:before {

background: -webkit-linear-gradient(0deg, #10111f 0%, #10111f 50%, transparent 50%, transparent 100%);

background: linear-gradient(90deg, #10111f 0%, #10111f 50%, transparent 50%, transparent 100%);

background-size: 15px;

background-position: center;

z-index: 1;

}

.hr:after {

-webkit-transition: opacity 0.3s ease, animation 0.3s ease;

transition: opacity 0.3s ease, animation 0.3s ease;

background: -webkit-linear-gradient(left, #62efab 5%, #f2ea7d 15%, #f2ea7d 25%, #ff8797 35%, #ff8797 45%, #e1a4f4 55%, #e1a4f4 65%, #82fff4 75%, #82fff4 85%, #62efab 95%);

background: linear-gradient(to right, #62efab 5%, #f2ea7d 15%, #f2ea7d 25%, #ff8797 35%, #ff8797 45%, #e1a4f4 55%, #e1a4f4 65%, #82fff4 75%, #82fff4 85%, #62efab 95%);

background-size: 200%;

background-position: 0%;

-webkit-animation: bar 15s linear infinite;

animation: bar 15s linear infinite;

}

@-webkit-keyframes bar {

0% {

background-position: 0%;

}

100% {

background-position: 200%;

}

}

@keyframes bar {

0% {

background-position: 0%;

}

100% {

background-position: 200%;

}

}

body {

background: #10111f;

padding: 4em;

font-family: Lato;

font-weight: 100;

color: #696b89;

text-indent: 1em;

line-height: 2;

}