javascript - 请问用css3如何实现如下效果-PHP中文网问答

javascript - 请问用css3如何实现如下效果

PHP中文网 2017-04-11 11:49:15

[JavaScript讨论组]

314

PHP中文网

认证0级讲师

全部回复(2)

PHP中文网2017-04-11 11:51:15 2楼

挖了一下源碼沒看見 clipMe ，參考網路上的資料，自己實現了下，效果是一樣的：

實現在這


.square, .square::before, .square::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.square {
  width: 200px;
  height: 200px;
  margin: auto;
  background: #f75151;
}

.square:before, .square:after {
  content: '';
  z-index: -1;
  margin: -5%;
  box-shadow: inset 0 0 0 2px;
  animation: line 8s linear infinite;
}

.square::before {
  animation-delay: -4s;
}

@keyframes line {
  0%, 100% {
    clip: rect(0px, 220px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 220px, 0px);
  } 
  50% {
    clip: rect(218px, 220px, 220px, 0px);
  }
  75% {
    clip: rect(0px, 220px, 220px, 218px);
  }
}

@-webkit-keyframes line {
  0%, 100% {
    clip: rect(0px, 220px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 220px, 0px);
  } 
  50% {
    clip: rect(218px, 220px, 220px, 0px);
  }
  75% {
    clip: rect(0px, 220px, 220px, 218px);
  }
}

赞 +0

添加回复

PHP中文网2017-04-11 11:51:15 1楼

f12查看源码

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>