Html
    Css
    Js

    
                        
.header {
	display:flex;
	justify-content:space-between;
}
.left,.center,.right {
	width:30%;
	position:relative;
	height:50px;
	box-sizing:border-box;
	border-bottom:1px solid  #3c78d3;
	text-indent:5px;
	text-align:center;
}
.center {
	width:36%;
}
.left::before {
	content:"";
	position:absolute;
	right:0;
	top:0;
	width:50px;
	height:25px;
	box-sizing:border-box;
	border-bottom:1px solid  #3c78d3;
	transform-origin:bottom center;
	transform:rotateZ(45deg) scale(1.414);
	animation:slash 5s infinite ease;
}
.center::before {
	content:"";
	position:absolute;
	left:-50px;
	top:0;
	width:50px;
	height:25px;
	box-sizing:border-box;
	border-bottom:1px solid #3c78d3;
	transform-origin:bottom center;
	transform:rotateZ(225deg) scale(1.414);
	animation:slash 5s infinite ease;
}
.center::after {
	content:"";
	position:absolute;
	right:-50px;
	top:0;
	width:50px;
	height:25px;
	box-sizing:border-box;
	border-bottom:1px solid #3c78d3;
	transform-origin:bottom center;
	transform:rotateZ(315deg) scale(1.414);
	animation:slash 5s infinite ease;
}
.right::before {
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:50px;
	height:25px;
	box-sizing:border-box;
	border-bottom:1px solid #3c78d3;
	transform-origin:bottom center;
	transform:rotateZ(315deg) scale(1.414);
	animation:slash 5s infinite ease;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

特殊组合按钮css样式实现、画斜线边框(原创)

更新时间:2021-09-01 01:02:53

0