用纯CSS3制作的效果非常炫酷的元素边框线条动画特效

所属分类：其他-动画效果

236213 614 查看评论 (22)

分享到微信朋友圈

查看演示立即下载

插件描述：这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效。这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果。

这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效。这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果。

制作方法

HTML结构

该边框线条动画特效的HTML结构使用的是一个空的<div>来作为容器。

<div class="bb"></div>

CSS样式

该边框线条动画特效的两条动画的线条分别使用.bb::before和.bb::after来制作，并使用animation调用clipMe帧动画来完成线条的运动效果。

.bb, .bb::before, .bb::after {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }
         
        .bb {
          width: 200px;
          height: 200px;
          margin: auto;
          background: url("img/Button-White-Large.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1);
          color: #69ca62;
          box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
        }
        .bb::before, .bb::after {
          content: '';
          z-index: -1;
          margin: -5%;
          box-shadow: inset 0 0 0 2px;
          animation: clipMe 8s linear infinite;
        }
        .bb::before {
          animation-delay: -4s;
        }
        .bb:hover::after, .bb:hover::before {
          background-color: rgba(255, 0, 0, 0.3);
        }
         
        @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);
          }
        }

非常简单的几句代码就完成了这个很酷的边框线条动画效果。

jQuery简单的文字跑马灯特效

jquery+css3立体式动画百叶窗切换效果

导航水波纹点击效果外加滑动效果

动画效果

33999 421

支持小数，从零开始的翻牌器

jQuery数字滚动,支持小数，从零开始的翻牌器,

动画效果

19482 242

jQuery canvas实现圣诞下雪效果

canvas实现圣诞下雪效果,这个下雪效果有点炫.

动画效果

37115 383

仿机场的文字切换特效

这是一款模仿机场文字切换的简单的css文字动画效果，一共有六种模式。

动画效果

30755 411

讨论这个项目（22）回答他人问题或分享插件使用方法奖励jQ币评论用户自律公约

?? 0

2021/6/9 17:13:16

西瓜0

2021/6/9 21:37:09

比较麻烦，要修改多个位置，clip:rect中多个值，慢慢调

.bb {
	width:280px;
	height:280px;
	margin:auto;
}
@keyframes clipMe {
	0%,100% {
	clip:rect(0px,320.0px,2px,0px);
}
    25% {
    	clip:rect(0px,2px,320.0px,0px);
    }
    50% {
    	clip:rect(318.0px,320.0px,320.0px,0px);
    }
    75% {
    	clip:rect(0px,320.0px,320.0px,318.0px);
    }
}