<div class="dotted_box"></div>
@keyframes linearGradientMove {
100% {
background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
}
}
.dotted_box {
width: 200px;
height: 100px;
cursor: pointer;
background: linear-gradient(90deg, #333 50%, transparent 50%) 0 0 / 4px 1px repeat-x, linear-gradient(90deg, #333 50%, transparent 50%) 0 100% / 4px 1px repeat-x,
linear-gradient(0, #333 50%, transparent 50%) 0 0 / 1px 4px repeat-y, linear-gradient(0, #333 50%, transparent 50%) 100% 0 / 1px 4px repeat-y;
&:hover {
outline: none;
animation: linearGradientMove 0.1s infinite;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.