使用css实现简单 流线边框 /显示上下边框
实例图
html:
<div class="box">
<h1>CSS</h1>
</div>
<button class="bt">显示上下边框</button>
css:
//流线边框
.box {
width: 300px;
height: 400px;
background-color: rgba(0, 0, 0);
display: flex;
justify-content: center;
align-items: center;
margin: 200px auto;
position: relative;
overflow: hidden;
border-radius: 20px;
}
.box h1 {
color: #fff;
text-shadow: 1px 2px #fff;
border-radius: 20px;
font-size: 4em;
z-index: 1;
}
.box::before {
content: '';
width: 100px;
height: 120%;
position: absolute;
background: linear-gradient(rgb(0, 157, 255), rgb(202, 18, 162));
opacity: 0;
}
.box::after {
content: '';
position: absolute;
inset: 5px;
background-color: rgb(0, 0, 0);
border-radius: 20px;
// z-index: 999;
}
.box:hover::before {
// animation: name duration timing-function delay iteration-count direction fill-mode;
opacity: 1;
animation: rotate 2s linear infinite;
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}
// 显示上下边框
button {
display: block;
border: none;
background: none;
font-size: 50px;
// font-weight: normal;
}
button::after,
button::before {
content: '';
display: block;
width: 0;
height: 2px;
background: #f70;
transition: 2s;
}
button:hover::after,
button:hover::before {
width: 100%;
}
button::before {
margin-left: auto;
}
总结:
流线边框 : 主要使用inset属性 ,设置距离四边的边框的距离
显示上下边框: 主要使用 margin-left: auto---实现回流