Podcast Icon Pure CSS

Developer
Daniel Gonzalez
Size
3,326 Kb
Views
6,072
  1. Podcast Icon Pure CSS Previews
  2. Podcast Icon Pure CSS HTML Codes
  3. Podcast Icon Pure CSS CSS Codes

How do I make an podcast icon pure css?

What is a podcast icon pure css? How do you make a podcast icon pure css? This script and codes were developed by Daniel Gonzalez on 03 January 2023, Tuesday.

Podcast Icon Pure CSS Previews
IQ Test

Podcast Icon Pure CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Podcast Icon Pure CSS </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main-container"> <div class="container"> <div class="icon-container podcast"> <div class="podcast-outerRing"></div> <div class="podcast-innerRing"></div> <div class="podcast-center"></div> <div class="podcast-rectangle"></div> </div> <h2>Podcast</h2> </div>
</div>
</body>
</html>

Podcast Icon Pure CSS - Script Codes CSS Codes

body { padding-top: 40px; background: repeat-y center url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/Heritage_Stripe_Black-iOS-11-GM-iPad-wallpapers.jpg"); font-family: 'Roboto', sans-serif;
}
.main-container { max-width: 885px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 20px auto 50px auto;
}
.container { margin: 0 auto;
}
.icon-container { margin: 20px auto; width: 200px; height: 200px; border-radius: 20%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; background-color: #ececec; position: relative;
}
h1, h2 { color: white; text-align: center; margin: 0; padding: 0; font-weight: 300;
}
.podcast { background: -webkit-linear-gradient(#D46DFB, #842CC2); background: linear-gradient(#D46DFB, #842CC2); position: relative;
}
.podcast-outerRing { border: 10px solid; border-color: white white transparent white; border-radius: 50%; width: 115px; height: 115px; margin: auto; background-color: transparent; -webkit-animation-name: scale, opacity; animation-name: scale, opacity; -webkit-animation-duration: 3s,3s; animation-duration: 3s,3s; -webkit-animation-iteration-count: infinite, infinite; animation-iteration-count: infinite, infinite; opacity: 0;
}
.podcast-innerRing { width: 70px; height: 70px; border-radius: 50%; border: 10px solid; border-color: white white transparent white; position: absolute; top: 55px; -webkit-animation-name: scale, opacity; animation-name: scale, opacity; -webkit-animation-duration: 3s,3s; animation-duration: 3s,3s; -webkit-animation-iteration-count: infinite, infinite; animation-iteration-count: infinite, infinite; -webkit-animation-delay: 0.5s, 0.5s; animation-delay: 0.5s, 0.5s; opacity: 0;
}
.podcast-center { width: 25px; height: 25px; background-color: white; border-radius: 50%; position: absolute; opacity: 0; top: 85px; -webkit-animation-name: scale, opacity; animation-name: scale, opacity; -webkit-animation-duration: 3s,3s; animation-duration: 3s,3s; -webkit-animation-iteration-count: infinite, infinite; animation-iteration-count: infinite, infinite; -webkit-animation-delay: .7s, .7s; animation-delay: .7s, .7s;
}
.podcast-rectangle { width: 25px; height: 60px; background-color: white; border-radius: 20px; position: absolute; top: 120px;
}
@-webkit-keyframes scale { from { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes scale { from { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes opacity { 0% { opacity: 0; } 80% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes opacity { 0% { opacity: 0; } 80% { opacity: 1; } 100% { opacity: 0; }
}
Podcast Icon Pure CSS - Script Codes
Podcast Icon Pure CSS - Script Codes
Home Page Home
Developer Daniel Gonzalez
Username dan10gc
Uploaded January 03, 2023
Rating 3
Size 3,326 Kb
Views 6,072
Do you need developer help for Podcast Icon Pure CSS?

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!

Daniel Gonzalez (dan10gc) Script Codes
Name
HTML Canvas Game Mjolnir Animation
Stacked Layers
Apple Watch Animation
CodePen Profile CSS StyleSheet
Photos Icon Pure CSS Animation
Responsive MIDI Synth
Radiohead Album Cover VueJS
Pure CSS iOS Icons
Hover Button Effect
A Pen by Daniel Gonzalez
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!