CSS speaker

Developer
Paul Sullivan
Size
3,046 Kb
Views
4,048
  1. CSS speaker Previews
  2. CSS speaker HTML Codes
  3. CSS speaker CSS Codes

How do I make an css speaker?

All CSS speaker. :). What is a css speaker? How do you make a css speaker? This script and codes were developed by Paul Sullivan on 26 January 2023, Thursday.

CSS speaker Previews
IQ Test

CSS speaker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS speaker</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="bezel"> <div class="rivet1"></div> <div class="rivet2"></div> <div class="rivet3"></div> <div class="rivet4"></div> <div class="rivet5"></div> <div class="rivet6"></div> <div class="rivet7"></div> <div class="rivet8"></div> <div class="center1"> <div class="center"> </div> </div>
</div>
</body>
</html>

CSS speaker - Script Codes CSS Codes

html { background-color: #bbb;
}
/* Variables */
/* Extenders */
.center, .center1, .bezel { box-sizing: border-box; position: fixed; top: 50%; left: 50%; border-radius: 100%;
}
.rivet1, .rivet2, .rivet3, .rivet4, .rivet5, .rivet6, .rivet7, .rivet8 { position: absolute; height: 8px; width: 8px; background-color: #555; border-radius: 100%; box-shadow: inset 0 0 3px #000, 0 0 2px #000;
}
/* Keyframes */
@-webkit-keyframes vibrate { 0% { -webkit-filter: blur(2px); height: 106px; width: 106px; margin-left: -53px; margin-top: -53px; } 30% { -webkit-filter: blur(0); height: 100px; width: 100px; } 50% { -webkit-filter: blur(2px); height: 106px; width: 106px; margin-left: -53px; margin-top: -53px; } 65% { -webkit-filter: blur(0); height: 100px; width: 100px; } 70% { -webkit-filter: blur(2px); height: 106px; width: 106px; margin-left: -53px; margin-top: -53px; } 80% { -webkit-filter: blur(2px); height: 100px; width: 100px; } 100% { -webkit-filter: blur(2px); height: 106px; width: 106px; margin-left: -53px; margin-top: -53px; }
}
@-webkit-keyframes vibrate1 { 0% { -webkit-filter: blur(1px); border: 15px solid #333; } 30% { -webkit-filter: blur(0); border: 17px solid #333; } 50% { -webkit-filter: blur(1px); border: 15px solid #333; } 65% { -webkit-filter: blur(0); border: 17px solid #333; } 70% { -webkit-filter: blur(1px); border: 15px solid #333; } 80% { -webkit-filter: blur(1px); border: 17px solid #333; } 100% { -webkit-filter: blur(1px); border: 15px solid #333; }
}
.center { height: 100px; width: 100px; margin-left: -50px; margin-top: -50px; background-color: #111; -webkit-filter: blur(1px); background: -webkit-radial-gradient(60% 60%, ellipse cover, #505050 0%, rgba(20, 20, 20, 0.8) 50%, rgba(20, 20, 20, 0.8) 100%); box-shadow: 0 0 10px black; -webkit-animation: vibrate 0.25s linear infinite;
}
.center1 { height: 250px; width: 250px; margin-left: -125px; margin-top: -125px; border: 15px solid #333; box-shadow: -3px -3px 15px rgba(0, 0, 0, 0.4), inset -3px -3px 15px rgba(0, 0, 0, 0.5); background: -webkit-linear-gradient(130deg, #757575 55%, gainsboro 100%); -webkit-animation: vibrate1 0.25s linear infinite;
}
.bezel { margin-left: -142.5px; margin-top: -142.5px; height: 285px; width: 285px; background-color: #A8A8A8; box-shadow: -15px -10px 60px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0px 0px 2px rgba(0, 0, 0, 0.8), inset 0px 0px 30px -5px rgba(0, 0, 0, 0.8);
}
.rivet1 { top: 6px; left: 50%;
}
.rivet2 { bottom: 6px; left: 50%;
}
.rivet3 { top: 50%; left: 6px;
}
.rivet4 { top: 50%; right: 6px;
}
.rivet5 { top: 18%; left: 13.7%;
}
.rivet6 { top: 18%; right: 13.5%;
}
.rivet7 { bottom: 17%; left: 13.5%;
}
.rivet8 { bottom: 17%; right: 13.5%;
}
CSS speaker - Script Codes
CSS speaker - Script Codes
Home Page Home
Developer Paul Sullivan
Username pwsm50
Uploaded January 26, 2023
Rating 3
Size 3,046 Kb
Views 4,048
Do you need developer help for CSS speaker?

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!

Paul Sullivan (pwsm50) Script Codes
Name
Another Simple CSS load animation
Crazed Bacteria
Breathing Load Screen
Asana Style Buttons
A Pen by Paul Sullivan
CSS Particle Box
A Pen by Paul Sullivan
Circular Audio Bars
Dart Scoreboard
CSS Image Glitch
Create amazing Facebook ads 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!