CSS3实现PS中的蚁行线动画以及画布的马赛克背景图

话不多说，先看例子，外链

效果截图如下：

蚁行线

马赛克背景

代码：

蚁行线代码如下：

/*

<!-- 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%;

  }

}

马赛克代码：

/*

<!-- 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%;

  height: 200%;

  transform: rotate(45deg);

  background-size: 15px 15px;

  background-image:

    /* 前两个渐变是为了防止 rotate 之后的分割线 */

    linear-gradient( 0deg, var(--color) var(--lineStart), transparent var(--lineStart), transparent var(--lineEnd), var(--color) var(--lineEnd) ),

    linear-gradient( -90deg, var(--color) var(--lineStart), transparent var(--lineStart), transparent var(--lineEnd), var(--color) var(--lineEnd) ),

    linear-gradient( 45deg, var(--color) var(--bgStart), transparent var(--bgStart), transparent var(--bgEnd), var(--color) var(--bgEnd) ),

    linear-gradient( -45deg, var(--color) var(--bgStart), transparent var(--bgStart), transparent var(--bgEnd), var(--color) var(--bgEnd) );

}

代码主要运用css3中的线性渐变属性linear-gradient，相关文章可以查看MDN