CSS3 implemented in the PS ant row line animation and background canvas mosaic

Ado, look at the examples, the chain

Effects shots are as follows:

Ant line line

Mosaic background

Code:

Ant row line code is as follows:

/*
<!-- HTML代码 -->
<div class="ant"></div>
*/
/* 蚁行线动画 */
.ant {
  width: 200px;
  height: 200px;
  margin: 40px auto;
  border: 1px solid transparent;
  background: linear-gradient(white, white) padding-box,
    repeating-linear-gradient(-45deg, black 0, black, 25%, transparent 0, transparent 50%) 0% 0%;
  background-size: 6px 6px;
  background-position: 0% 0%;
  animation: ants 10s linear infinite;
}
@keyframes ants {
  to {
    background-position: 100% 100%;
  }
}

 

Mosaic Code:

/*
<!-- HTML代码 -->
<div class="mosaic"></div>
*/

/* 马赛克背景 */
.mosaic {
  height: 285px;
  width: 495px;
  margin: 40px auto;
  box-shadow: 1px 1px 8px grey;
  position: relative;
  overflow: hidden;
}
.mosaic:after {
  --lineStart: 4%;
  --lineEnd: 96%;
  --bgStart: 25% ; 
  --bgEnd : 75% ; 
  --color : #ddd ; 
  Content : '' ; 
  position : Absolute ; 
  left : -50% ; 
  Top : -50% ; 
  width : 200 is% ; 
  height : 200 is% ; 
  Transform : rotate (45deg) ; 
  background-size : 15px 15px ; 
  background-Image : 
     / * the first two gradients is to prevent dividing line after rotate* / 
    Linear gradient (0deg, where (- color) was (- line starting), was transparent (- line starting), was transparent (- lineEnd), where (- color) was (- lineEnd)) , 
    linear gradient (-90deg, where (- color) was (- line starting), was transparent (- line starting), was transparent (- lineEnd), where (- color) was (- lineEnd)) , 
    linear gradient (45deg, where (- color) was (- bgStart), was transparent (- bgStart), was transparent (- bgEnd), where (- color) was (- bgEnd)), 
    linear gradient (-45deg, where (- color) was (- bgStart), was transparent (- bgStart), was transparent (- bgEnd), where (- color) was (- bgEnd)) ; 
}

 

Css3 code is mainly used in linear gradient attributes linear-gradient, you can view the related articles MDN