Sass random color animation

Developer
João Victor
Size
4,827 Kb
Views
10,120
  1. Sass random color animation Previews
  2. Sass random color animation HTML Codes
  3. Sass random color animation CSS Codes

How do I make an sass random color animation?

I have no idea how it would be the name of this.. What is a sass random color animation? How do you make a sass random color animation? This script and codes were developed by João Victor on 06 November 2022, Sunday.

Sass random color animation Previews
IQ Test

Sass random color animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sass random color animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16670/bg.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .wtf { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100px; height: 100px; overflow: hidden;
}
.wtf:before { content: ''; position: absolute; width: 20px; height: 20px; background: black; box-shadow: 0px 0px 0 #026f5d, 20px 0px 0 #0bea38, 40px 0px 0 #d6cb88, 60px 0px 0 #be6147, 80px 0px 0 #eedb96, 0px 20px 0 #309b37, 20px 20px 0 #b04509, 40px 20px 0 #90aa7c, 60px 20px 0 #c3c830, 80px 20px 0 #d8f2ad, 0px 40px 0 #1b5b5e, 20px 40px 0 #2754a7, 40px 40px 0 #b25a5a, 60px 40px 0 #386ad7, 80px 40px 0 #508dfa, 0px 60px 0 #f91ae1, 20px 60px 0 #fcdb7f, 40px 60px 0 #d54348, 60px 60px 0 #b11e2b, 80px 60px 0 #253fec, 0px 80px 0 #783d19, 20px 80px 0 #54ccd6, 40px 80px 0 #6fc5c3, 60px 80px 0 #73b782, 80px 80px 0 #f468f6; animation: foo 5s linear alternate infinite, bar 4s steps(1) alternate infinite;
}
.wtf:hover { border-radius: 50%;
}
@keyframes bar { 20% { border-top-left-radius: 70%; border-top-right-radius: 0; border-bottom-right-radius: 70%; border-bottom-left-radius: 0; } 40% { border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-right-radius: 0; border-bottom-left-radius: 50%; } 60% { border-top-left-radius: 0; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; } 80% { border-top-left-radius: 0; border-top-right-radius: 70%; border-bottom-right-radius: 0; border-bottom-left-radius: 70%; }
}
@keyframes foo { 20% { background: #59e0b7; box-shadow: 0px 0px 0 #37ca99, 20px 0px 0 #663fa7, 40px 0px 0 #df2e06, 60px 0px 0 #1f4435, 80px 0px 0 #e1dfd3, 0px 20px 0 #388e40, 20px 20px 0 #73f32c, 40px 20px 0 #662317, 60px 20px 0 #ba9420, 80px 20px 0 #74300b, 0px 40px 0 #de0b5f, 20px 40px 0 #c59167, 40px 40px 0 #e99b60, 60px 40px 0 #95541b, 80px 40px 0 #4bb08a, 0px 60px 0 #27d23d, 20px 60px 0 #23fd98, 40px 60px 0 #1a8205, 60px 60px 0 #c1995a, 80px 60px 0 #c766b2, 0px 80px 0 #60fd5b, 20px 80px 0 #c975bc, 40px 80px 0 #38772d, 60px 80px 0 #2bdb1e, 80px 80px 0 #21187b; } 40% { background: #89ac5e; box-shadow: 0px 0px 0 #1d713e, 20px 0px 0 #383605, 40px 0px 0 #1bd6e0, 60px 0px 0 #22554f, 80px 0px 0 #a8be0c, 0px 20px 0 #d8bc11, 20px 20px 0 #86f3c5, 40px 20px 0 #4eb6f8, 60px 20px 0 #b0be70, 80px 20px 0 #17e85d, 0px 40px 0 #2e0449, 20px 40px 0 #25dcb0, 40px 40px 0 #544979, 60px 40px 0 #459833, 80px 40px 0 #d7f14d, 0px 60px 0 #3fdaa2, 20px 60px 0 #524006, 40px 60px 0 #934e5c, 60px 60px 0 #daf65e, 80px 60px 0 #27ed87, 0px 80px 0 #4671fe, 20px 80px 0 #eee6e4, 40px 80px 0 #1a9309, 60px 80px 0 #432fa3, 80px 80px 0 #99acaa; } 60% { background: #f7b560; box-shadow: 0px 0px 0 #add645, 20px 0px 0 #bad177, 40px 0px 0 #6fd3e2, 60px 0px 0 #210a6c, 80px 0px 0 #3dd1e1, 0px 20px 0 #20b729, 20px 20px 0 #c94f8b, 40px 20px 0 #1883db, 60px 20px 0 #2c9e2e, 80px 20px 0 #c2709c, 0px 40px 0 #65bbe8, 20px 40px 0 #bf6a87, 40px 40px 0 #26d2d9, 60px 40px 0 #1bd6f4, 80px 40px 0 #0f5553, 0px 60px 0 #0b351c, 20px 60px 0 #912545, 40px 60px 0 #7fa829, 60px 60px 0 #586778, 80px 60px 0 #eb5da2, 0px 80px 0 #0b6271, 20px 80px 0 #81ea28, 40px 80px 0 #7c2c66, 60px 80px 0 #5a50f0, 80px 80px 0 #1269d0; } 80% { background: #f6f66f; box-shadow: 0px 0px 0 #fdffcf, 20px 0px 0 #51b2e8, 40px 0px 0 #770b27, 60px 0px 0 #2cf727, 80px 0px 0 #f16e8c, 0px 20px 0 #71a76c, 20px 20px 0 #d3f416, 40px 20px 0 #26ce4c, 60px 20px 0 #296141, 80px 20px 0 #8fd54d, 0px 40px 0 #a85ae1, 20px 40px 0 #7c1148, 40px 40px 0 #e1e84d, 60px 40px 0 #804e8d, 80px 40px 0 #49b555, 0px 60px 0 #347233, 20px 60px 0 #f7a56a, 40px 60px 0 #7a0b95, 60px 60px 0 #29d390, 80px 60px 0 #a8e9e4, 0px 80px 0 #601bc2, 20px 80px 0 #d3c0be, 40px 80px 0 #6477f1, 60px 80px 0 #f58238, 80px 80px 0 #a040b7; } 100% { background: #667ff8; box-shadow: 0px 0px 0 #b7211c, 20px 0px 0 #051304, 40px 0px 0 #87d29f, 60px 0px 0 #e4ad41, 80px 0px 0 #f6e35e, 0px 20px 0 #375871, 20px 20px 0 #1f7f98, 40px 20px 0 #8511bf, 60px 20px 0 #7ea692, 80px 20px 0 #e11965, 0px 40px 0 #c29219, 20px 40px 0 #39c566, 40px 40px 0 #3de664, 60px 40px 0 #2143d3, 80px 40px 0 #9c724b, 0px 60px 0 #b51e6e, 20px 60px 0 #e4c58e, 40px 60px 0 #963dc8, 60px 60px 0 #beb9ec, 80px 60px 0 #40f787, 0px 80px 0 #e2c262, 20px 80px 0 #9b05ba, 40px 80px 0 #2f5cd9, 60px 80px 0 #405135, 80px 80px 0 #5e4202; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wtf"></div>
</body>
</html>

Sass random color animation - Script Codes CSS Codes

.wtf { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100px; height: 100px; overflow: hidden;
}
.wtf:before { content: ''; position: absolute; width: 20px; height: 20px; background: black; box-shadow: 0px 0px 0 #026f5d, 20px 0px 0 #0bea38, 40px 0px 0 #d6cb88, 60px 0px 0 #be6147, 80px 0px 0 #eedb96, 0px 20px 0 #309b37, 20px 20px 0 #b04509, 40px 20px 0 #90aa7c, 60px 20px 0 #c3c830, 80px 20px 0 #d8f2ad, 0px 40px 0 #1b5b5e, 20px 40px 0 #2754a7, 40px 40px 0 #b25a5a, 60px 40px 0 #386ad7, 80px 40px 0 #508dfa, 0px 60px 0 #f91ae1, 20px 60px 0 #fcdb7f, 40px 60px 0 #d54348, 60px 60px 0 #b11e2b, 80px 60px 0 #253fec, 0px 80px 0 #783d19, 20px 80px 0 #54ccd6, 40px 80px 0 #6fc5c3, 60px 80px 0 #73b782, 80px 80px 0 #f468f6; animation: foo 5s linear alternate infinite, bar 4s steps(1) alternate infinite;
}
.wtf:hover { border-radius: 50%;
}
@keyframes bar { 20% { border-top-left-radius: 70%; border-top-right-radius: 0; border-bottom-right-radius: 70%; border-bottom-left-radius: 0; } 40% { border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-right-radius: 0; border-bottom-left-radius: 50%; } 60% { border-top-left-radius: 0; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; } 80% { border-top-left-radius: 0; border-top-right-radius: 70%; border-bottom-right-radius: 0; border-bottom-left-radius: 70%; }
}
@keyframes foo { 20% { background: #59e0b7; box-shadow: 0px 0px 0 #37ca99, 20px 0px 0 #663fa7, 40px 0px 0 #df2e06, 60px 0px 0 #1f4435, 80px 0px 0 #e1dfd3, 0px 20px 0 #388e40, 20px 20px 0 #73f32c, 40px 20px 0 #662317, 60px 20px 0 #ba9420, 80px 20px 0 #74300b, 0px 40px 0 #de0b5f, 20px 40px 0 #c59167, 40px 40px 0 #e99b60, 60px 40px 0 #95541b, 80px 40px 0 #4bb08a, 0px 60px 0 #27d23d, 20px 60px 0 #23fd98, 40px 60px 0 #1a8205, 60px 60px 0 #c1995a, 80px 60px 0 #c766b2, 0px 80px 0 #60fd5b, 20px 80px 0 #c975bc, 40px 80px 0 #38772d, 60px 80px 0 #2bdb1e, 80px 80px 0 #21187b; } 40% { background: #89ac5e; box-shadow: 0px 0px 0 #1d713e, 20px 0px 0 #383605, 40px 0px 0 #1bd6e0, 60px 0px 0 #22554f, 80px 0px 0 #a8be0c, 0px 20px 0 #d8bc11, 20px 20px 0 #86f3c5, 40px 20px 0 #4eb6f8, 60px 20px 0 #b0be70, 80px 20px 0 #17e85d, 0px 40px 0 #2e0449, 20px 40px 0 #25dcb0, 40px 40px 0 #544979, 60px 40px 0 #459833, 80px 40px 0 #d7f14d, 0px 60px 0 #3fdaa2, 20px 60px 0 #524006, 40px 60px 0 #934e5c, 60px 60px 0 #daf65e, 80px 60px 0 #27ed87, 0px 80px 0 #4671fe, 20px 80px 0 #eee6e4, 40px 80px 0 #1a9309, 60px 80px 0 #432fa3, 80px 80px 0 #99acaa; } 60% { background: #f7b560; box-shadow: 0px 0px 0 #add645, 20px 0px 0 #bad177, 40px 0px 0 #6fd3e2, 60px 0px 0 #210a6c, 80px 0px 0 #3dd1e1, 0px 20px 0 #20b729, 20px 20px 0 #c94f8b, 40px 20px 0 #1883db, 60px 20px 0 #2c9e2e, 80px 20px 0 #c2709c, 0px 40px 0 #65bbe8, 20px 40px 0 #bf6a87, 40px 40px 0 #26d2d9, 60px 40px 0 #1bd6f4, 80px 40px 0 #0f5553, 0px 60px 0 #0b351c, 20px 60px 0 #912545, 40px 60px 0 #7fa829, 60px 60px 0 #586778, 80px 60px 0 #eb5da2, 0px 80px 0 #0b6271, 20px 80px 0 #81ea28, 40px 80px 0 #7c2c66, 60px 80px 0 #5a50f0, 80px 80px 0 #1269d0; } 80% { background: #f6f66f; box-shadow: 0px 0px 0 #fdffcf, 20px 0px 0 #51b2e8, 40px 0px 0 #770b27, 60px 0px 0 #2cf727, 80px 0px 0 #f16e8c, 0px 20px 0 #71a76c, 20px 20px 0 #d3f416, 40px 20px 0 #26ce4c, 60px 20px 0 #296141, 80px 20px 0 #8fd54d, 0px 40px 0 #a85ae1, 20px 40px 0 #7c1148, 40px 40px 0 #e1e84d, 60px 40px 0 #804e8d, 80px 40px 0 #49b555, 0px 60px 0 #347233, 20px 60px 0 #f7a56a, 40px 60px 0 #7a0b95, 60px 60px 0 #29d390, 80px 60px 0 #a8e9e4, 0px 80px 0 #601bc2, 20px 80px 0 #d3c0be, 40px 80px 0 #6477f1, 60px 80px 0 #f58238, 80px 80px 0 #a040b7; } 100% { background: #667ff8; box-shadow: 0px 0px 0 #b7211c, 20px 0px 0 #051304, 40px 0px 0 #87d29f, 60px 0px 0 #e4ad41, 80px 0px 0 #f6e35e, 0px 20px 0 #375871, 20px 20px 0 #1f7f98, 40px 20px 0 #8511bf, 60px 20px 0 #7ea692, 80px 20px 0 #e11965, 0px 40px 0 #c29219, 20px 40px 0 #39c566, 40px 40px 0 #3de664, 60px 40px 0 #2143d3, 80px 40px 0 #9c724b, 0px 60px 0 #b51e6e, 20px 60px 0 #e4c58e, 40px 60px 0 #963dc8, 60px 60px 0 #beb9ec, 80px 60px 0 #40f787, 0px 80px 0 #e2c262, 20px 80px 0 #9b05ba, 40px 80px 0 #2f5cd9, 60px 80px 0 #405135, 80px 80px 0 #5e4202; }
}
Sass random color animation - Script Codes
Sass random color animation - Script Codes
Home Page Home
Developer João Victor
Username jotavejv
Uploaded November 06, 2022
Rating 3.5
Size 4,827 Kb
Views 10,120
Do you need developer help for Sass random color animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

João Victor (jotavejv) Script Codes
Name
Sweet loader
Slider looping CSS
Palette-js
Typeset a Poem - Rodeo 005
Loader random animated
Vue.js Logo Animated
React logo CSS
Logo MDN CSS
Web Platform logo CSS - only one div
Days counter
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!