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