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

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

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

制作方法

HTML结构

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

来作为容器。

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

}

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

css3直线运动_用纯CSS3制作的效果非常炫酷的元素边框线条动画特效相关推荐

html 边框立体效果,用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...
html生日快乐爆开烟花,css3+H5炫酷喜庆全屏烟花动画特效
css3+H5炫酷喜庆全屏烟花动画特效 /* basic styles for black background and crosshair cursor */ body { background: ...
html怎么设置出场动画,css3炫酷coming soon分步显示动画特效
这是一款效果十分炫酷的css3 coming soon分步显示动画特效. EXAMPLE 1 第一个demo是一个coming soon分步显示动画特效. html结构:创建一个class为sp-co ...
用html浮雕效果图,纯CSS3炫酷3D浮雕质感文字动画特效
这是一款效果非常酷的纯CSS3 3D浮雕质感文字动画特效.该特效中文字被制作为浮雕文字,就像是从一块石板上将文字雕刻下来的一样.而且文字还会来回的摆动旋转,效果非常好. 制作方法 HTML结构该CS ...
css3鼠标悬停图片边框线条动画特效
css3鼠标经过内容区时,边框线条特效效果制作. html: <div class="strength grWidth hidden"><div class=&q ...
yzmcms图片自适应代码_基于segment.js制作的非常有创意的分段式SVG文字动画特效...
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: 要使用该SVG文字动画特效,要在页面中引入segment.js,它用于动画SVG路径,d3-ease,用于制作ea ...
CSS3实现边框线条动画特效
<div class="box-line"></div> CSS代码 .box-line, .box-line::before, .box-line::af ...
PS制作马赛克效果、炫酷光线
马赛克效果 1.打开人物素材,新建图层,创建一个渐变色 2.混合模式改为叠加,盖印图层Ctrl+shift+Alt+E 3.双击图层,混合模式,取消勾选GB通道 4.Ctrl+J复制图层,然后盖印图层 ...
html的悬停图片圆形,css3炫酷圆形图片鼠标滑过特效
这是一款纯css3炫酷圆形图片鼠标滑过特效插件.在插件中,所有的缩略图都被用css3 border-radius制作成圆形,然后再在其上做各种鼠标滑过特效. HTML 所有demo的html结构都如下 ...

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

css3直线运动_用纯CSS3制作的效果非常炫酷的元素边框线条动画特效相关推荐

最新文章

热门文章