$body: #0e020a;
$border: #350725;
// loop time, adjust speed here
$time: 2s;
body {
width: 50vmin;
height: 90vmin;
margin: auto;
position: relative;
top: 1vmin;
left: 0;
right: 0;
background: linear-gradient(rgba(#FEFEDA,.5),rgba(#184D77,.25) 30%, rgba(#184D77,.9) 40%,#430141 90%,rgba(#0e020a,1)), #768C96;
&:before {
content: '';
//these are the pixels - try adding a border-radius here or changing the height and width
height: 1.1vmin;
width: 1.1vmin;
position: absolute;
left: 0;
top: 0;
animation: back $time steps(1, end) infinite;
}
&:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
box-shadow: inset 0 0 0 1vmin rgba($border,.25), inset 0 0 5vmin $border, inset 0 0 0 .5vmin rgba($body,.25), 0 0 0 100vmax $body;
border-radius: 3vmin;
z-index: 1;
}
}
// Unfortunately my box-shadows exceed the Codepen size limit so I have to link to it externally :(
@import "https://tinydesign.co.uk/css-pixels/css-pixels/css-pixel-box-shadows.css";
View Compiled
// No HTML!
// No Javascript!
// No Images!
// Pure 100% unadulterated CSS!!
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.