<body>
<button>边框按钮</button>
</body>
<style>
body{
background-color: #000;
}
button{
display: block;
width: 300px;
height: 100px;
margin: 200px auto;
color: #0ebeff;
font-size: 24px;
background: #000;
border: none;
outline: none;
z-index: 1;
border-radius: 10px;
/* outline: 4px solid #fff; */
position: relative;
overflow: hidden;
}
button::before{
content: '';
position: absolute;
background: #f40;
width: 200%;
height: 200%;
z-index: -2;
left: 50%;
top: 50%;
transform-origin: 0 0;
animation: rotate 3s infinite linear;
}
button::after{
content: '';
position: absolute;
background: #000;
width: calc(100% - 4px);
height: calc(100% - 4px);
left: 2px;
top: 2px;
border-radius: 10px;
z-index: -1;
}
@keyframes rotate {
to {
transform: rotate(1turn);
}
}
</style>
该文章展示了一段CSS代码，用于创建一个黑色背景的按钮，具有白色边框和旋转动画效果。按钮在页面中居中显示，尺寸为300px*100px，使用伪元素`::before`和`::after`实现了动画边框效果。
452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
