div边框动态效果（转）

转自：https://blog.csdn.net/mfkarj/article/details/102564074

/向下流动/
.pipeline_down_arrows {
width: 4px;
height: calc(100% - 2px);
border-left: 1px solid #1AB395;
border-right: 1px solid #1AB395;
border-bottom: 1px solid #1AB395;
border-top: 1px solid #1AB395;
}
/向左流动/
.pipeline_left_arrows {
width: calc(100% - 9px);
height: 4px;
border-top: 1px solid #1AB395;
border-bottom: 1px solid #1AB395;
}

/向上流动/
.pipeline_up_arrows {
width: 4px;
height: calc(100% - 6px);
border-left: 1px solid #1AB395;
border-right: 1px solid #1AB395;
border-top: 1px solid #1AB395;
}
.pipecorner_arrows{
position: relative;
width: 100%;
height: 100%;
}

.pipecorner_arrows .position_left_bottom {
position: absolute;
top: 0px;
left: 0;
}

.pipecorner_arrows .position_bottom_right {
position: absolute;
bottom: 0;
left: 5px;
}
.pipecorner_arrows .position_top_left {
position: absolute;
top: 0px;
left: 5px;
}

.pipecorner_arrows .position_right_top {
position: absolute;
bottom: 5px;
left: 495px;
}

/初始化下箭头/
.arrow_down_arrows {
width: 100%;
height: 100%;
overflow: hidden;
background: linear-gradient(#2196F3, #fdfdfd,#2196F3) repeat-y 0 0;

/*无限循环箭头动画效果*/
animation: down_arrow_square_default 3s infinite linear;
-moz-animation: down_arrow_square_default 3s infinite linear;
-webkit-animation: down_arrow_square_default 3s infinite linear;
-o-animation: down_arrow_square_default 3s infinite linear;

}

/初始化右箭头/
.arrow_right_arrows{
width: 100%;
height: 100%;
overflow: hidden;
background: linear-gradient(to right, #2196F3,#fdfdfd,#2196F3) repeat-x 0 0;

/*无限循环箭头动画效果*/
animation: right_arrow_square_default 3s infinite linear;
-moz-animation: right_arrow_square_default 3s infinite linear;
-webkit-animation: right_arrow_square_default 3s infinite linear;
-o-animation: right_arrow_square_default 3s infinite linear;

}
/初始化上箭头/
.arrow_up_arrows {
width: 100%;
height: 100%;
overflow: hidden;
background: linear-gradient(#2196F3, #fdfdfd,#2196F3) repeat-y 0 0;

/*无限循环箭头动画效果*/
animation: up_arrow_square_default 3s infinite linear;
-moz-animation: up_arrow_square_default 3s infinite linear;
-webkit-animation: up_arrow_square_default 3s infinite linear;
-o-animation: up_arrow_square_default 3s infinite linear;

}

/初始化左箭头/
.arrow_left_arrows{
width: 100%;
height: 100%;
overflow: hidden;
background: linear-gradient(to right, #2196F3,#fdfdfd,#2196F3) repeat-x 0 0;

/*无限循环箭头动画效果*/
animation: left_arrow_square_default 3s infinite linear;
-moz-animation: left_arrow_square_default 3s infinite linear;
-webkit-animation: left_arrow_square_default 3s infinite linear;
-o-animation: left_arrow_square_default 3s infinite linear;

}

@keyframes down_arrow_square_default {
0% {
background: linear-gradient(#2196F3, #fdfdfd,#2196F3) repeat-y 0 0;
}

100% {background: linear-gradient(#2196F3, #fdfdfd,#2196F3) repeat-y 0 500px;
}

}

@keyframes right_arrow_square_default {
0% {
background: linear-gradient(to right, #2196F3,#fdfdfd,#2196F3) repeat-x 0 0;
}
100% {
background: linear-gradient(to right, #2196F3,#fdfdfd,#2196F3) repeat-x 500px 0;
}
}
@keyframes up_arrow_square_default {
0% {
background: linear-gradient(#2196F3, #fdfdfd,#2196F3) repeat-y 0 0;
}

100% {background: linear-gradient(#2196F3, #fdfdfd,#2196F3) repeat-y 0 -500px;
}

}

@keyframes left_arrow_square_default {
0% {
background: linear-gradient(to right, #2196F3,#fdfdfd,#2196F3) repeat-x 0 0;
}
100% {
background: linear-gradient(to right, #2196F3,#fdfdfd,#2196F3) repeat-x -500px 0;
}
}

div边框动态效果（转）相关推荐

html的div双线边框,设置div边框
设置装备摆设div边框border名堂对div设置装备摆设边框CSS5给各人引见三种法子. 首先找到边框CSS单词:border(边框border根抵教程) 一.直接div标签内设置装备摆设边框 1 ...
jsp text边框_CSS设置DIV边框实例
相信大家都听说过CSS了,CSS是一种样式表(stylesheet)的技术.也有的人称之为层叠样式表(Cascading Stylesheet). 在主页制作时采用CSS技术,可以有效地对页面的布局. ...
html div 边框只显示右侧,div 边框原来有这么多种设置方法
在HTML前端斥地中,有数次会对配置边框. 这里给DIV加一个边框方式教程,实现div边框款式.经由CSS border花样属性实现加边框. 如下是各类给DIV加分歧边框实例与才具教程.html代 ...
div html隐藏边框,div 边框原来有这么多种设置方法
在HTML前端开发中,有数次会对配置边框. 这里给DIV加一个边框方式教程,实现div边框花色.通过CSS border花式属性完成加边框. 下列是各类给DIV加差距边框实例和技能花样教程.htm ...
在HTML中让边框变透明,如何用CSS设置DIV边框透明
如何实现用CSS设置DIV边框为透明呢?我们来看一看. 工具/材料电脑操作方法 01 透明一般认为是一种颜色属性,但是并没有这个数值.我们找到了一种让div实现透明的最佳方案,运用RGBA 02 ...
div边框的定义方法
div边框的正确定义方式如下: border:1px solid #3399FF; 要指定边框的宽度.样式和颜色值,边框才能显示出来.只指定边框的宽度,边框是不会显示出来的.如果将这三个值分开定义,边 ...
html语言中边框样式,html设置div边框样式css布局
html组织配置div边框格式教程篇 div设置边框花样所应用CSS款式为边框属性border. div虚线与完成边框款式图一.决定兼容边框线条名堂 border边框兼容各大浏览器线条花样有: 1. ...
html设置div边框的写法,设置div边框
设置装备摆设div边框border技俩对div设置边框CSS5给大家引见三种法子. 首先找到边框CSS单词:border(边框border根本教程) 一.直接div标签内设置边框 1.div边框实例 ...
html 最小边框宽度,div边框粗细
Html 中如何设置 div边框的颜色 DIV里怎么控制表格的边框颜色和粗细? 我想在DIV里嵌套表格,请问怎么通过CSS定义DIV里表格的样式? 感觉上你对DIV的概念不是很明确,你可以应用clas ...

div边框动态效果（转）

div边框动态效果（转）相关推荐

最新文章

热门文章