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

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

238353 618 查看评论 (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立体式动画百叶窗切换效果

超简单自定义粒子背景动画插件(原创)

这是一个可以自定义粒子背景的插件，可实现全屏，鼠标跟随，自定义坐标三种方式的动画控制，同时也可以使用不同颜色或者不同的图片实现粒子的个性化

动画效果

33582 309

jQuery钱飘落效果

jQuery页面撒钱效果,代码很简单修改方便，想要别的效果可以替换图片比如落叶

动画效果

28198 323

2013圣诞快乐礼盒破裂HTML5特效

圣诞节快乐，盒子破裂弹出。

动画效果

40263 482

css3河流时间轴效果

不依赖任何框架，纯css3写成，简单，实用

动画效果

34080 338

讨论这个项目（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);
    }
}