**
话不多说,直接上代码:
**
html:
<div class="rect1">1、四角边框</div>
<div class="rect2"> 2、双边框</div>
<div class="rect3"> 3、运动虚线边框</div>
<div class="rect4"> 4、渐变运动边框</div>
<div class="rect5"> 5、蛇形运动边框1</div>
<div class="rect6"> 6、蛇形运动边框2</div>
<div class="rect7">
<div>7、背景斜切</div>
</div>
<div class="rect8"> 8、会动的图片边框 </div>
最重要的css样式代码(备注详细,一共工作用到过的八个效果)
* {
margin:0;
padding:0;
box-sizing:border-box;
}
html,body {
height:100%;
font-size:14px;
background:#333;
color:#fff;
}
body {
display:flex;
flex-wrap:wrap;
}
body > div {
margin:40px;
text-align:center;
padding:10px;
box-sizing:border-box;
cursor:pointer;
}
:root {
--borderColor:#03A9F3;
}
/* 第一个*/
.rect1:hover {
border:1px dashed var(--borderColor);
}
.rect1 {
width:200px;
height:100px;
background:linear-gradient(to left,var(--borderColor),var(--borderColor)) left top no-repeat,linear-gradient(to bottom,var(--borderColor),var(--borderColor)) left top no-repeat,linear-gradient(to left,var(--borderColor),var(--borderColor)) right top no-repeat,linear-gradient(to bottom,var(--borderColor),var(--borderColor)) right top no-repeat,linear-gradient(to left,var(--borderColor),var(--borderColor)) left bottom no-repeat,linear-gradient(to bottom,var(--borderColor),var(--borderColor)) left bottom no-repeat,linear-gradient(to left,var(--borderColor),var(--borderColor)) right bottom no-repeat,linear-gradient(to left,var(--borderColor),var(--borderColor)) right bottom no-repeat;
background-size:2px 20px,20px 2px,2px 20px,20px 2px;
transition:all .4s ease;
border:1px solid transparent;
}
/*第2个*/
.rect2 {
width:200px;
height:100px;
position:relative;
border:2px solid #03A9F3;
}
.rect2::before,.rect2::after {
content:"";
position:absolute;
width:20px;
height:20px;
transition:all 0.4s ease;
}
.rect2::before {
top:-7px;
left:-7px;
border-top:2px solid var(--borderColor);
border-left:2px solid var(--borderColor);
}
.rect2::after {
right:-7px;
bottom:-7px;
border-bottom:2px solid var(--borderColor);
border-right:2px solid var(--borderColor);
}
.rect2:hover::before,.rect2:hover::after {
width:calc(100% + 12px);
height:calc(100% + 12px);
}
/* 第3个*/
.rect3 {
width:200px;
height:100px;
background:linear-gradient(90deg,var(--borderColor) 50%,transparent 0) repeat-x,linear-gradient(90deg,var(--borderColor) 50%,transparent 0) repeat-x,linear-gradient(0deg,var(--borderColor) 50%,transparent 0) repeat-y,linear-gradient(0deg,var(--borderColor) 50%,transparent 0) repeat-y;
background-size:4px 2px,4px 2px,2px 4px,2px 4px;
background-position:0 0,0 100%,0 0,100% 0;
}
.rect3:hover {
animation:linearGradientMove .3s infinite linear;
}
@keyframes linearGradientMove {
100% {
background-position:4px 0,-4px 100%,0 -4px,100% 4px;
}
}/* 第4个 */
.rect4 {
position:relative;
z-index:0;
width:200px;
height:100px;
border-radius:10px;
overflow:hidden;
padding:2rem;
}
@keyframes rotate {
100% {
transform:rotate(1turn);
}
}/*top是根据原始高度计算的百分比 100px*150%=150px */
.rect4::before {
content:'';
position:absolute;
z-index:-2;
left:-50%;
top:-150%;
width:200%;
height:400%;
/*background-color:#399953;
*/
background-color:#1a232a;
background-repeat:no-repeat;
background-size:50% 50%,50% 50%;
background-position:0 0,100% 0,100% 100%,0 100%;
/*background-image:linear-gradient(#399953,#399953),linear-gradient(#fbb300,#fbb300),linear-gradient(#d53e33,#d53e33),linear-gradient(#377af5,#377af5);
*/
background-image:linear-gradient(var(--borderColor),var(--borderColor)),linear-gradient(#333,#333),linear-gradient(#333,#333),linear-gradient(#333,#333);
/*background-image:conic-gradient(transparent,rgba(168,239,255,1),transparent 30%);
*/
animation:rotate 4s linear infinite;
}
/*把中间背景色遮住*/
.rect4::after {
content:'';
position:absolute;
z-index:-1;
left:6px;
top:6px;
width:calc(100% - 12px);
height:calc(100% - 12px);
background:#333;
border-radius:4px;
animation:opacityChange 3s infinite alternate;
}
@keyframes opacityChange {
50% {
opacity:1;
}
100% {
opacity:.5;
}
}/* 第5种 */
.rect5 {
position:relative;
width:200px;
height:100px;
}
.rect5::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border:2px solid var(--borderColor);
transition:all .5s;
animation:clippath 3s infinite linear;
}
@keyframes clippath {
0%,100% {
clip-path:inset(0 0 95% 0);
}
25% {
clip-path:inset(0 95% 0 0);
}
50% {
clip-path:inset(95% 0 0 0);
}
75% {
clip-path:inset(0 0 0 95%);
}
}/* 第6种 */
.rect6 {
position:relative;
width:200px;
height:100px;
text-align:center;
color:#fff;
/*border:2px solid var(--borderColor);
*/
border-radius:10px;
background:var(--borderColor);
transition:all .3s;
cursor:pointer;
}
.rect6:hover {
filter:contrast(1.1);
}
.rect6:active {
filter:contrast(0.9);
}
.rect6::before,.rect6::after {
content:"";
position:absolute;
top:-10px;
left:-10px;
right:-10px;
bottom:-10px;
border:2px solid var(--borderColor);
transition:all .5s;
animation:clippath 3s infinite linear;
border-radius:10px;
}
.rect6::after {
animation:clippath 3s infinite -1.5s linear;
}
@keyframes clippath {
0%,100% {
clip-path:inset(0 0 98% 0);
}
25% {
clip-path:inset(0 98% 0 0);
}
50% {
clip-path:inset(98% 0 0 0);
}
75% {
clip-path:inset(0 0 0 98%);
}
}/* 第7种 */
.rect7 {
position:relative;
width:200px;
height:100px;
overflow:hidden;
}
.rect7::after {
content:"";
position:absolute;
top:4px;
bottom:4px;
right:4px;
left:4px;
background:#333;
border:2px solid var(--borderColor);
cursor:pointer;
}
.rect7::before {
content:"";
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
background:#fff;
transform:rotateZ(-90deg) translate(-100%,-100%);
transform-origin:top left;
transition:transform .3s;
transition-timing-function:linear;
}
.rect7:hover {
filter:contrast(1.2);
}
.rect7:hover::before {
transform:rotateZ(0deg) translate(0%,-0%);
}
.rect7 div {
position:absolute;
left:4px;
top:4px;
width:calc(100% - 8px);
height:calc(100% - 8px);
padding:10px;
z-index:999;
}
/* 第8种 */
.rect8 {
width:200px;
height:100px;
border:4px solid;
border-image:linear-gradient(45deg,var(--borderColor),#89f7ff) 1;
clip-path:inset(0px round 10px);
animation:huerotate 6s infinite linear;
filter:hue-rotate(360deg);
}
@keyframes huerotate {
0% {
filter:hue-rotate(0deg);
}
100% {
filter:hue-rorate(360deg);
}
}
**
效果图
**
若帮到您,麻烦点个赞哦!