html 用css画出斑马线,使用CSS3 border-image-*属性实现的斑马线边界

CSS

语言：

CSSSCSS

确定

:root {

min-height: 100vh;

background-color: #999;

}

body {

width: 100vw;

height: 100vh;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

.box {

width: 40vmin;

height: 11vmin;

border: 11vmin solid transparent;

border-image-source: repeating-linear-gradient(45deg, #000000 0, #000000 20px, #ffff00 20px, #ffff00 40px);

border-image-repeat: center;

border-image-slice: 70;

-webkit-animation: width 2s infinite alternate, height 4s infinite alternate, bw 6s infinite alternate;

animation: width 2s infinite alternate, height 4s infinite alternate, bw 6s infinite alternate;

box-shadow: 0 1vmin 3vmin rgba(0, 0, 0, 0.5), inset 0 1vmin 3vmin rgba(0, 0, 0, 0.5);

}

@-webkit-keyframes bw {

0% {

border-width: 1vmin;

border-image-slice: 2;

}

100% {

border-width: 11vmin;

border-image-slice: 70;

}

}

@keyframes bw {

0% {

border-width: 1vmin;

border-image-slice: 2;

}

100% {

border-width: 11vmin;

border-image-slice: 70;

}

}

@-webkit-keyframes height {

0% {

height: 5vmin;

}

100% {

height: 40vmin;

}

}

@keyframes height {

0% {

height: 5vmin;

}

100% {

height: 40vmin;

}

}

@-webkit-keyframes width {

0% {

width: 5vmin;

}

100% {

width: 40vmin;

}

}

@keyframes width {

0% {

width: 5vmin;

}

100% {

width: 40vmin;

}

}