0
\$\begingroup\$

This CSS code creates an animation that describes a random movement using the CSS transition property for box-shadow which properly results in what resembles an ascending effect followed by hovering.

<html><head>
<style>
body { 
    background-color: #fff;
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
    width: 100%;
}
.centered {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}
.whirl { 
    background-color: lightslategray;
    border-radius: 100%;
    cursor: pointer; 
    height: 150px;
    width: 150px;
    transition: box-shadow 1s linear;
}
.whirl .visual { 
    border-radius: 100%;
    height: 100%;
    transition: box-shadow 1s linear;
    width: 100%;
}
.glide .whirl {
    animation-delay: 1s;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-name: careless-glide;
    animation-timing-function: ease-in-out;
}
.light-on { box-shadow: 0px 0px 10px 5px #fff, 0px 0px 20px 5px #777; }
.highlight.whirl .visual { box-shadow: 0px 0px 10px 5px #fff, 0px 0px 40px 20px lightblue; }
@keyframes careless-glide { 
      0% { left:  0px; top:  0px; box-shadow: 0px 0px 10px 5px #fff, 0px 0px 30px 10px #777; } 
     16% { left: -8px; top: -7px; box-shadow: 0px 0px 10px 5px #fff, 6px 5px 15px 5px #777; } 
     32% { left:  0px; top: -11px; } 
     48% { left:  8px; top:  0px; box-shadow: 0px 0px 10px 5px #fff, -3px -7px 10px 5px #777; } 
     64% { left:  0px; top:  11px; box-shadow: 0px 0px 10px 5px #fff, 0px -3px 10px 3px #777; } 
     80% { left:  0px; top:  7px; } 
     96% { left: -8px; top:  0px; box-shadow: 0px 0px 10px 5px #fff, 5px 0px 15px 5px #777; } 
    100% { left:  0px; top:  0px; box-shadow: 0px 0px 10px 5px #fff, 0px 0px 30px 10px #777; } 
}
</style>
<script type="text/javascript">
var highlight = (element) => { 
    var cssHighlight = "highlight", csses = element.classList;
    csses.add(cssHighlight);
    var highlightOffAfterMillis = 1400;
    setTimeout(() => { csses.remove(cssHighlight); }, highlightOffAfterMillis);
};
</script>
</head>
<body >
<div class="whirl centered" onclick="highlight(this)"><div class="visual"></div></div>
<script type="text/javascript">
(function() {
    var onDelayMillis = 1500;
    setTimeout(() => {
        document.querySelector(".whirl").classList.add("light-on");
        document.body.classList.add("glide");
        light.off();
    }, onDelayMillis);
    
    var light = { off: () => { 
        var lightOnMillis = 1000;
        var glideDelayMillis = onDelayMillis + lightOnMillis;
        setTimeout( () => { document.querySelector(".whirl").classList.remove("light-on"); }
                  , glideDelayMillis);
    } };
})();
</script>
</body>
</html>

\$\endgroup\$
0

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.