css3直线运动_纯css3动画--边框线条动画

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

制作方法:

1、HTML结构

该边框线条动画特效的HTML结构使用的是一个空的

来作为容器。

2、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);

}

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

完整代码如下：html>

RunJS

html,body{

margin: 0;padding: 0;

background: #101010;

}

.cont{

width:500px;

margin: 50px auto;

}

.bb{

position: relative;

width: 200px;

height: 200px;

background: #666666;

border: 1px solid #5EF75E;

}

.bb:before,.bb:after{

content: " ";

display: block;

position: absolute;

width:220px;

height:220px;

top: -10px;

left: -10px;

border:2px solid #00FF00;

z-index:10;

box-sizing: border-box;

-webkit-animation: clipAni 4s infinite linear;

}

.bb:before{

-webkit-animation-delay: -2s;

}

@keyframes clipAni{

0%,100%{

clip:rect(0px,220px,220px,217px);

}

25%{

clip:rect(0px,220px,3px,0px);

}

50%{

clip:rect(0px,3px,220px,0px);

}

75%{

clip:rect(217px,220px,220px,0px);

}

css3直线运动_纯css3动画--边框线条动画相关推荐

css3直线运动_纯css3实现曲线运动——贝塞尔曲线(cubic-bezier)
目标--就是纯css实现下面的曲线运动 image.png 这里是我最后实现的效果动画:在线视频实现效果直接看所有的代码: html代码 css代码 html{ background: #ad4e2 ...
天空飘彩带的css3代码_纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单
本文实例讲述了纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单.分享给大家供大家参考.具体如下: 这是一款纯CSS3实现的飘逸洒脱的飞行菜单,三级下拉菜单,多级菜单,可支持三级,会飞行的子菜单,因为使 ...
css3直线运动_css3动画--边框线条动画
网上看到一个css3动画, 最开始思路是,里面一个DIV方块,右上角一个同样大小的div1,向上,向右平移8px,设div1的border-top,border-right值形成,如图所示再用cli ...
css3直线运动_用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...
html 边框立体效果,用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...
css3鼠标悬停图片边框线条动画特效
css3鼠标经过内容区时,边框线条特效效果制作. html: <div class="strength grWidth hidden"><div class=&q ...
css 边缘闪光_纯css3闪烁动画《发光的边框效果》
纯css3闪烁动画 /* 动画闪烁颜色 */ @-webkit-keyframes greenPulse { from { background-color: #749a02; -webkit-box ...
css3蒲公英飘动效果_纯CSS3逼真的气球漂浮动画特效
这是一款使用纯CSS3制作的效果非常逼真的气球漂浮动画特效.这个气球飘动效果主要使用CSS3 animation来制作,通过控制不同气球的位移和旋转角度,来达到气球漂浮的效果. 制作方法 HTML结构 ...
css3蒙版运动,纯CSS3制作逼真的汽车运动动画
简要教程这是一款使用纯CSS3制作的逼真汽车运动动画特效.该特效中,所有元素都是通过CSS渲染得到的,没有使用任何图片.它通过公路斑马线的左右晃动来制作出汽车运动的视觉效果. 使用方法 HTML结构 ...
前端酷炫效果参考_纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

css3直线运动_纯css3动画--边框线条动画

css3直线运动_纯css3动画--边框线条动画相关推荐

最新文章

热门文章