CSS3 Pseudo Sound Bars

Developer
Jack Rugile
Size
2,400 Kb
Views
36,432
  1. CSS3 Pseudo Sound Bars Previews
  2. CSS3 Pseudo Sound Bars HTML Codes
  3. CSS3 Pseudo Sound Bars CSS Codes

How do I make an css3 pseudo sound bars?

What is a css3 pseudo sound bars? How do you make a css3 pseudo sound bars? This script and codes were developed by Jack Rugile on 11 August 2022, Thursday.

CSS3 Pseudo Sound Bars Previews
IQ Test

CSS3 Pseudo Sound Bars - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Pseudo Sound Bars</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ h1 { color: #555; font: bold 12px 'helvetica neue', helvetica, arial, sans-serif; left: 0; margin: 20px 0 0 0; position: absolute; top: 50%; text-align: center; width: 100%;
}
#bars { height: 30px; left: 50%; margin: -30px 0 0 -20px; position: absolute; top: 50%; width: 40px;
}
.bar { background: #666; bottom: 1px; height: 3px; position: absolute; width: 3px; animation: sound 0ms -800ms linear infinite alternate;
}
@keyframes sound { 0% { opacity: .35; height: 3px; } 100% { opacity: 1; height: 28px; }
}
.bar:nth-child(1) { left: 1px; animation-duration: 474ms; }
.bar:nth-child(2) { left: 5px; animation-duration: 433ms; }
.bar:nth-child(3) { left: 9px; animation-duration: 407ms; }
.bar:nth-child(4) { left: 13px; animation-duration: 458ms; }
.bar:nth-child(5) { left: 17px; animation-duration: 400ms; }
.bar:nth-child(6) { left: 21px; animation-duration: 427ms; }
.bar:nth-child(7) { left: 25px; animation-duration: 441ms; }
.bar:nth-child(8) { left: 29px; animation-duration: 419ms; }
.bar:nth-child(9) { left: 33px; animation-duration: 487ms; }
.bar:nth-child(10) { left: 37px; animation-duration: 442ms; }​ </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>CSS3 Pseudo Sound Bars</h1>
<div id="bars"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

CSS3 Pseudo Sound Bars - Script Codes CSS Codes

h1 { color: #555; font: bold 12px 'helvetica neue', helvetica, arial, sans-serif; left: 0; margin: 20px 0 0 0; position: absolute; top: 50%; text-align: center; width: 100%;
}
#bars { height: 30px; left: 50%; margin: -30px 0 0 -20px; position: absolute; top: 50%; width: 40px;
}
.bar { background: #666; bottom: 1px; height: 3px; position: absolute; width: 3px; animation: sound 0ms -800ms linear infinite alternate;
}
@keyframes sound { 0% { opacity: .35; height: 3px; } 100% { opacity: 1; height: 28px; }
}
.bar:nth-child(1) { left: 1px; animation-duration: 474ms; }
.bar:nth-child(2) { left: 5px; animation-duration: 433ms; }
.bar:nth-child(3) { left: 9px; animation-duration: 407ms; }
.bar:nth-child(4) { left: 13px; animation-duration: 458ms; }
.bar:nth-child(5) { left: 17px; animation-duration: 400ms; }
.bar:nth-child(6) { left: 21px; animation-duration: 427ms; }
.bar:nth-child(7) { left: 25px; animation-duration: 441ms; }
.bar:nth-child(8) { left: 29px; animation-duration: 419ms; }
.bar:nth-child(9) { left: 33px; animation-duration: 487ms; }
.bar:nth-child(10) { left: 37px; animation-duration: 442ms; }​
CSS3 Pseudo Sound Bars - Script Codes
CSS3 Pseudo Sound Bars - Script Codes
Home Page Home
Developer Jack Rugile
Username jackrugile
Uploaded August 11, 2022
Rating 4.5
Size 2,400 Kb
Views 36,432
Do you need developer help for CSS3 Pseudo Sound Bars?

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!

Jack Rugile (jackrugile) Script Codes
Name
SpacePi js13k
Canvas Fireworks
Canvas Orbital Trails
Develop Denver Logo
In View Detector
CSS Vinyl Record
Canvas Color Smoke
Canvas Waterfall
Snake Game - CSS Renderer
Bubble Sketch.js Test
Create amazing captions 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!