Speaker CSS illustration and animation.

Developer
Jose Sentis
Size
3,690 Kb
Views
89,056
  1. Speaker CSS illustration and animation. Previews
  2. Speaker CSS illustration and animation. HTML Codes
  3. Speaker CSS illustration and animation. CSS Codes
  4. Speaker CSS illustration and animation. JS Codes

How do I make an speaker css illustration and animation.?

Illustration and animation of a silver chromed speakers. Turn them on to feel the beat!. What is a speaker css illustration and animation.? How do you make a speaker css illustration and animation.? This script and codes were developed by Jose Sentis on 08 September 2022, Thursday.

Speaker CSS illustration and animation. Previews
IQ Test

Speaker CSS illustration and animation. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Speaker CSS illustration and animation.</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<div class="speaker">	<div class="metal1">	<span class="screw"></span>	<span class="screw"></span>	<span class="screw"></span>	<span class="screw"></span>	<div class="rubber">	<div class="metal2">	<div class="center">	</div>	</div>	</div>	</div>	</div>	<div class="buttonset">	<div class="hole">	<div class="button">	<div class="play"></div>	</div>	</div> </div>	<p id="signature">Made with &#9825; by <a href="http://www.josesentis.com" target="_blank">Jose Sentis</a></p> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Speaker CSS illustration and animation. - Script Codes CSS Codes

html, body{ width: 100%; margin: 0; padding: 0; background: -webkit-linear-gradient(90deg, #A09F9F, #d0d0d2,#A09F9F); background: -o-linear-gradient(90deg, #A09F9F, #d0d0d2,#A09F9F); background: -moz-linear-gradient(90deg, #A09F9F, #d0d0d2,#A09F9F); background: linear-gradient(90deg, #A09F9F, #d0d0d2,#A09F9F);
}
.container{ padding-top: 1px; box-sizing: border-box;
}
.speaker{ width:405px; height:405px; border-radius: 100%; background: -webkit-linear-gradient(70deg, #777777, #d0d0d2,#777777); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(70deg, #777777, #d0d0d2,#777777); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(70deg, #777777, #d0d0d2,#777777);/* For Firefox 3.6 to 15 */ background: linear-gradient(70deg, #777777, #d0d0d2,#777777); /* Standard syntax */ -webkit-box-shadow: 0px 0px 30px rgba(0,0,0,0.8); -o-box-shadow: 0px 0px 30px rgba(0,0,0,0.8); -moz-box-shadow: 0px 0px 30px rgba(0,0,0,0.8); box-shadow: 0px 0px 30px rgba(0,0,0,0.8); position: relative; margin: 30px auto;
}
.metal1{ width: 384px; height: 384px; margin: 10px; border-radius: 100%; background: -webkit-linear-gradient(70deg, #828387, #f0f0f2,#828387); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(70deg, #828387, #f0f0f2,#828387); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(70deg, #828387, #f0f0f2,#828387);/* For Firefox 3.6 to 15 */ background: linear-gradient(70deg, #828387, #f0f0f2,#828387); /* Standard syntax */ position: absolute;
}
.screw{ width: 10px; height: 10px; position: absolute; border-radius: 100%; -webkit-box-shadow: inset 0px -3px 4px #7d7d7d, inset 0px 4px 2px rgba(255,255,255,0.7); -o-box-shadow: inset 0px -3px 4px #7d7d7d, inset 0px 4px 2px rgba(255,255,255,0.7); -moz-box-shadow: inset 0px -3px 4px #7d7d7d, inset 0px 4px 2px rgba(255,255,255,0.7); box-shadow: inset 0px -3px 4px #7d7d7d, inset 0px 4px 2px rgba(255,255,255,0.7); border: 3px solid #7d7d7d;
} .screw:nth-child(1){ top: 61px; left: 51px; } .screw:nth-child(2){ top: 61px; right: 51px; } .screw:nth-child(3){ bottom: 61px; right: 51px; } .screw:nth-child(4){ bottom: 61px; left: 51px; }
.rubber{ width: 324px; height: 324px; margin: 22px; border-radius: 100%; border: 8px solid #7d7d7d; background-color: #444; position: absolute; box-shadow: inset 0px 0px 80px rgba(0,0,0,1);
}
.metal2{ width: 276px; height: 276px; margin: 24px; background-color: #7d7d7d; position:absolute; border-radius: 100%;
}
.metal2.clicked{ -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); cursor: pointer; animation:vibrate 0.35s linear 0s infinite ; -moz-animation: vibrate 0.35s linear 0s infinite ; -webkit-animation: vibrate 0.35s linear 0s infinite ; -o-animation: vibrate 0.35s linear 0s infinite ;
}
.metal2:after{ content: ''; width: 254px; height: 254px; margin: 3px; border-radius: 100%; border: 8px solid #444; position: absolute; background: -webkit-linear-gradient(transparent 80%, #444 20%), -webkit-linear-gradient(90deg, transparent 80%, #444 20%), -webkit-linear-gradient(70deg, #444, #dbdbdd,#444); /* Standard syntax */ background: -o-linear-gradient(transparent 80%, #444 20%), -o-linear-gradient(90deg, transparent 80%, #444 20%), -o-linear-gradient(70deg, #444, #dbdbdd,#444); /* Standard syntax */ background: -moz-linear-gradient(transparent 80%, #444 20%), -moz-linear-gradient(90deg, transparent 80%, #444 20%), -moz-linear-gradient(70deg, #444, #dbdbdd,#444); /* Standard syntax */ background: linear-gradient(transparent 80%, #444 20%), linear-gradient(90deg, transparent 80%, #444 20%), linear-gradient(70deg, #444, #dbdbdd,#444); /* Standard syntax */ background-size: 4px 4px, 4px 4px, 254px 254px; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -o-transform: rotate(-35deg); -ms-transform: rotate(-35deg); transform: rotate(-35deg); }
.center{ width: 104px; height: 104px; margin: 86px; position: absolute; border-radius: 100%; background: -webkit-linear-gradient(-40deg, #999a9e, #f0f0f2,#999a9e); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(-40deg, #999a9e, #f0f0f2,#999a9e); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(-40deg, #999a9e, #f0f0f2,#999a9e);/* For Firefox 3.6 to 15 */ background: linear-gradient(-40deg, #999a9e, #f0f0f2,#999a9e); /* Standard syntax */ z-index: 500; -webkit-box-shadow: -4px 10px 10px rgba(0,0,0,0.4); -o-box-shadow: -4px 10px 10px rgba(0,0,0,0.4); -moz-box-shadow: -4px 10px 10px rgba(0,0,0,0.4); box-shadow: -4px 10px 10px rgba(0,0,0,0.4);
} .center:after{ content: ''; width: 83px; height: 83px; margin: 11px; border-radius: 100%; position: absolute; background: -webkit-radial-gradient(#F4F4F4 0%, rgba(125, 125, 125, 0.6) 60%, #7d7d7d); /* For Safari 5.1 to 6.0 */ background: -o-radial-gradient(#F4F4F4 0%, rgba(125, 125, 125, 0.6) 60%, #7d7d7d); /* For Opera 11.1 to 12.0 */ background: -moz-radial-gradient(#F4F4F4 0%, rgba(125, 125, 125, 0.6) 60%, #7d7d7d);/* For Firefox 3.6 to 15 */ background: radial-gradient(#F4F4F4 0%, rgba(125, 125, 125, 0.6) 60%, #7d7d7d); /* Standard syntax */ -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4), inset 0px -14px 29px #727272; -o-box-shadow: 0px 0px 5px rgba(0,0,0,0.4), inset 0px -14px 29px #727272; -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4), inset 0px -14px 29px #727272; box-shadow: 0px 0px 5px rgba(0,0,0,0.4), inset 0px -14px 29px #727272; } .metal2.clicked .center{ -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); cursor: pointer; animation:still 0.35s linear 0s infinite ; -moz-animation: still 0.35s linear 0s infinite ; -webkit-animation: still 0.35s linear 0s infinite ; -o-animation: still 0.35s linear 0s infinite ; }
.buttonset{ width: 110px; height: 110px; background: -webkit-linear-gradient(70deg, #828387, #f0f0f2,#828387); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(70deg, #828387, #f0f0f2,#828387); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(70deg, #828387, #f0f0f2,#828387);/* For Firefox 3.6 to 15 */ background: linear-gradient(70deg, #828387, #f0f0f2,#828387); /* Standard syntax */ -webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.8); -o-box-shadow: 3px 3px 10px rgba(0,0,0,0.8); -moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.8); box-shadow: 3px 3px 10px rgba(0,0,0,0.8); position: relative; margin: 40px auto;
}
.hole{ width: 94px; height: 94px; background-color: #313131; border-radius: 100%; margin: 8px; display:inline-block; position:relative;
}
.button{ width: 74px; height: 74px; border-radius: 100%; top: 8px; left:8px; position:absolute; border:2px solid #000; cursor: pointer;
}
.button:before{ content: ''; width: 100%; height: 100%; border-radius: 100%; position: absolute; top: 0; left: 0; background-color: #666; -webkit-box-shadow: 2px 5px 4px #000; -o-box-shadow: 2px 5px 4px #000; -moz-box-shadow: 2px 5px 4px #000; box-shadow: 2px 5px 4px #000; -webkit-transition: box-shadow 0.1s ease-out; -moz-transition: box-shadow 0.1s ease-out; -o-transition: box-shadow 0.1s ease-out; -ms-transition: box-shadow 0.1s ease-out; transition: box-shadow 0.1s ease-out;
}
.button:after{ content: ''; width: 100%; height: 100%; border-radius: 100%; position:absolute; top: -5%; left: 0; display:inline-block; position:absolute; background: -webkit-linear-gradient(70deg, #828387, #f0f0f2,#828387); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(70deg, #828387, #f0f0f2,#828387); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(70deg, #828387, #f0f0f2,#828387);/* For Firefox 3.6 to 15 */ background: linear-gradient(70deg, #828387, #f0f0f2,#828387); /* Standard syntax */ -webkit-transition: top 0.1s ease-out; -moz-transition: top 0.1s ease-out; -o-transition: top 0.1s ease-out; -ms-transition: top 0.1s ease-out; transition: top 0.1s ease-out;
} .button.clicked:after{ top: 0; } .button.clicked:before{ box-shadow: none; }
.play{ border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 35px solid #C32A2A; position: absolute; z-index: 500; top: 13px; left: 25px; -webkit-transition: top .2s ease, border .2s ease; -moz-transition: top .2s ease, border .2s ease; -o-transition: top .2s ease, border .2s ease; -ms-transition: top .2s ease, border .2s ease; transition: top .2s ease, border .2s ease;
} .play.clicked{ top: 17px; border-left-color: #0FD1F7 !important; } .button:hover .play{ border-left-color: #2A80C3; } .play:before{ content: ''; width: 1px; height: 37px; background-color: transparent; position: absolute; top: -29px; right: 17px; -webkit-box-shadow: -1px 0px 2px #000; -o-box-shadow: -1px 0px 2px #000; -moz-box-shadow: -1px 0px 2px #000; box-shadow: -1px 0px 2px #000; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -o-transform: rotate(-60deg); -ms-transform: rotate(-60deg); transform: rotate(-60deg); } .play:after{ content: ''; width: 1px; height: 37px; background-color: transparent; position: absolute; top: -8px; right: 17px; -webkit-box-shadow: -1px 1px 3px #fff; -o-box-shadow: -1px 1px 3px #fff; -moz-box-shadow: -1px 1px 3px #fff; box-shadow: -1px 1px 3px #fff; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); }
@keyframes vibrate
{ 1% {transform: scale(1, 1);} 15% {transform: scale(1.1,1.1);} 30% {transform: scale(1, 1);} 45% {transform: scale(0.9, 0.9);} 60% {transform: scale(1, 1);} 100% {transform: scale(1, 1);}
}
@-moz-keyframes vibrate
{ 1% {transform: scale(1, 1);} 15% {transform: scale(1.1,1.1);} 30% {transform: scale(1, 1);} 45% {transform: scale(0.9, 0.9);} 60% {transform: scale(1, 1);} 100% {transform: scale(1, 1);}
}
@-webkit-keyframes vibrate
{ 1% {transform: scale(1, 1);} 15% {transform: scale(1.1,1.1);} 30% {transform: scale(1, 1);} 45% {transform: scale(0.9, 0.9);} 60% {transform: scale(1, 1);} 100% {transform: scale(1, 1);}
}
@-o-keyframes vibrate
{ 1% {transform: scale(1, 1);} 15% {transform: scale(1.1,1.1);} 30% {transform: scale(1, 1);} 45% {transform: scale(0.9, 0.9);} 60% {transform: scale(1, 1);} 100% {transform: scale(1, 1);}
}
@keyframes still
{ 1% {transform: scale(1, 1);} 15% {transform: scale(0.9,0.9);} 30% {transform: scale(1, 1);} 45% {transform: scale(1.1, 1.1);} 60% {transform: scale(1, 1);} 100% {transform: scale(1, 1);}
}
@-moz-keyframes still
{ 1% {transform: scale(1, 1);} 15% {transform: scale(0.9,0.9);} 30% {transform: scale(1, 1);} 45% {transform: scale(1.1, 1.1);} 60% {transform: scale(1, 1);} 100% {transform: scale(1, 1);}
}
@-webkit-keyframes still
{ 1% {transform: scale(1, 1);} 15% {transform: scale(0.9,0.9);} 30% {transform: scale(1, 1);} 45% {transform: scale(1.1, 1.1);} 60% {transform: scale(1, 1);} 100% {transform: scale(1, 1);}
}
@-o-keyframes still
{ 1% {transform: scale(1, 1);} 15% {transform: scale(0.9,0.9);} 30% {transform: scale(1, 1);} 45% {transform: scale(1.1, 1.1);} 60% {transform: scale(1, 1);} 100% {transform: scale(1, 1);}
}
#signature{ font-family: monospace; font-size: 18px; color: #000; font-weight: normal; text-align: right; margin: 10px 30px;
}
#signature a{	text-decoration: none;	color: rgb(37,33,142);	font-weight: bold;
}
#signature a:hover{	text-decoration: underline;
}

Speaker CSS illustration and animation. - Script Codes JS Codes

 $('.button').click(function(){ $(this).toggleClass('clicked'); $(".play").toggleClass('clicked'); $(".metal2").toggleClass('clicked'); });
Speaker CSS illustration and animation. - Script Codes
Speaker CSS illustration and animation. - Script Codes
Home Page Home
Developer Jose Sentis
Username j0zelito
Uploaded September 08, 2022
Rating 3
Size 3,690 Kb
Views 89,056
Do you need developer help for Speaker CSS illustration and 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!

Jose Sentis (j0zelito) Script Codes
Name
CSS Summer vibes
Shoe Box CSS illustrated
TweetBox with React JS
Old Cassette CSS illustration
Burger CSS Illustration
GameBoy CSS Illustration
Refreshing CSS summer popsicles
Create amazing video scripts 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!