<div class="block"></block>
body {
margin: 0;
padding: 0;
background-color: #000;
}
.block {
position: relative;
margin: 300px auto 0;
width: 500px;
height: 250px;
background: linear-gradient(0deg, #000, #272727);
}
.block:before, .block:after {
content: '';
position: absolute;
left: -2px;
top: -2px;
background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094,
#0000ff, #00ff00,#ffff00, #ff0000);
background-size: 400%;
width: calc(100% + 4px);
height: calc(100% + 4px);
z-index: -1;
animation: steam 20s linear infinite;
}
@keyframes steam {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
.block:after {
filter: blur(50px);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.