快捷导航
蚂蚁部落 网站首页 实例代码 CSS实例 查看内容

CSS3边框动态环绕效果

2018-3-23 09:44| 发布者: admin| 查看: 416| 评论: 0|来自: 蚂蚁部落

本章节分享一段代码实例,它实现了部分边框动画环绕效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
@keyframes clipMe {
  0%, 100% {
    clip: rect(0px, 220.0px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 220.0px, 0px);
  }
  50% {
    clip: rect(218.0px, 220.0px, 220.0px, 0px);
  }
  75% {
    clip: rect(0px, 220.0px, 220.0px, 218.0px);
  }
}
@-webkit-keyframes surround {
  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);
  }
}
.antzone:before,.antzone:after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  z-index: -1;
  margin: -5%;
  animation: surround linear infinite 8s;
  box-shadow: inset 0 0 0 2px red;
}
.antzone:before {
  animation-delay: -4s;
}
.antzone {
  border: 1px solid black;
  position: absolute;
  left: 500px;
  top: 200px;
  margin: auto;
  width: 200px;
  height: 200px;
  margin: auto;
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>

以上代码实现了预期效果,更多内容参阅相关阅读。

相关阅读:

(1).@keyframes参阅CSS3 @keyframes一章节。

(2).clip参阅CSS3 clip一章节。

(3).:before参阅CSS E::before 伪元素选择符一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-21 10:08 , Processed in 0.096389 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部