炫酷纯CSS3元素边框线条动画特效 - JQuery/js插件 - 科蚁网
请选择 进入手机版 | 继续访问电脑版

炫酷纯CSS3元素边框线条动画特效

[复制链接]
科蚁网小编 发表于 2015-7-3 13:10:34 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
JQuery/js插件信息(点击图片可以放大)
科蚁网发布的资源,版权归原作者所有,仅供学习交流,请勿用于商业用途。

应用终端: 传统PC 

资源级别: 免费资源

素材来源: 网络收集

推荐等级: ★★★★★

兼容浏览器: IE9 IE10 IE11 谷歌 火狐 欧朋 Safari 360 搜狗 

 

科蚁网温馨提示 1、本版块发布的JQuery/js插件均来自互联网,版权归原作者所有,科蚁网仅为存储空间。
2、科蚁网资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
3、如有侵犯您的版权,请及时联系2054226023#qq.com(#换@),我们将尽快做删除处理。
4、如果您发现科蚁网资源无法下载或链接失效或其他关于科蚁网站的问题,请到 站务中心区 发帖,我们将及时处理。

马上注册成为科蚁网会员,即可免费下载和分享手机建站资源!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

文件名:炫酷纯CSS3元素边框线条动画特效 
下载次数:1    下载所需积分:5 枚资源币
下载权限: 新手上路  [如何获取资源币]   [科蚁币]  可 [兑换资源币]  


代码:
  1. <style>
  2.                 .bb, .bb::before, .bb::after {
  3.                   position: absolute;
  4.                   top: 0;
  5.                   bottom: 0;
  6.                   left: 0;
  7.                   right: 0;
  8.                 }

  9.                 .bb {
  10.                   width: 200px;
  11.                   height: 200px;
  12.                   margin: auto;
  13.                   background: url("img/Button-White-Large.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1);
  14.                   color: #69ca62;
  15.                   box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
  16.                 }
  17.                 .bb::before, .bb::after {
  18.                   content: '';
  19.                   z-index: -1;
  20.                   margin: -5%;
  21.                   box-shadow: inset 0 0 0 2px;
  22.                   animation: clipMe 8s linear infinite;
  23.                 }
  24.                 .bb::before {
  25.                   animation-delay: -4s;
  26.                 }
  27.                 .bb:hover::after, .bb:hover::before {
  28.                   background-color: rgba(255, 0, 0, 0.3);
  29.                 }

  30.                 @keyframes clipMe {
  31.                   0%, 100% {
  32.                     clip: rect(0px, 220.0px, 2px, 0px);
  33.                   }
  34.                   25% {
  35.                     clip: rect(0px, 2px, 220.0px, 0px);
  36.                   }
  37.                   50% {
  38.                     clip: rect(218.0px, 220.0px, 220.0px, 0px);
  39.                   }
  40.                   75% {
  41.                     clip: rect(0px, 220.0px, 220.0px, 218.0px);
  42.                   }
  43.                 }
  44.                 html,
  45.                 body {
  46.                   height: 100%;
  47.                 }

  48.                 body {
  49.                   position: relative;
  50.                   background-color: #0f222b;
  51.                 }

  52.                 *,
  53.                 *::before,
  54.                 *::after {
  55.                   box-sizing: border-box;
  56.                 }
  57.                 </style>
  58.         <!--[if IE]>
  59.                 <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
  60.         <![endif]-->
  61. </head>
  62. <body>
  63.         <div class="htmleaf-container">
  64.                 <header class="htmleaf-header">
  65.                         <h1>纯CSS3炫酷元素边框线条动画特效 <span>A CSS3 border animation effect</span></h1>
  66.                         <div class="htmleaf-links">
  67.                                 <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.ke01.com/" title="科蚁网" target="_blank"><span> 科蚁网</span></a>
  68.                                 <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.ke01.com/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
  69.                         </div>
  70.                 </header>
  71.                 <div class="bb"></div>
  72.         </div>
  73.        
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则