/*-----背景-----*/ .box { width:200px; height:100px; background:repeating-linear-gradient(30deg,#79b,#79b 15px,#58a 0,#58a 30px); } /*-----边框-----*/ @keyframes line { to { background-position:100%; } }.box1 { width:200px; height:100px; padding:1em; border:1px solid transparent; background:linear-gradient(white,white) padding-box,repeating-linear-gradient( -45deg,black 0,black 25%,white 0,white 50% ) 0 / .6em .6em; animation:line 12s linear infinite; }
此效果运用css3的渐变效果来实现的