动态边框样式参考： https://juejin.im/post/5cdbc938f265da034d2a38c1#heading-2
// css
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
animation: Gradient 15s ease infinite;
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
.brick{
margin: 20px auto;
width: 200px;
height: 200px;
background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat;
background-size: 0 2px, 2px 0, 0 2px, 2px 0;
background-position: left top, right top, right bottom, left bottom;
transition: ease-in 0.5s;
}
.brick:hover {
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
}
// html
<body>
<div class="brick"></div>
</body>
1035
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
