Circular Profile

Developer
James Crockford
Size
2,689 Kb
Views
14,168
  1. Circular Profile Previews
  2. Circular Profile HTML Codes
  3. Circular Profile CSS Codes

How do I make an circular profile?

Animated circular profile image. What is a circular profile? How do you make a circular profile? This script and codes were developed by James Crockford on 19 November 2022, Saturday.

Circular Profile Previews
IQ Test

Circular Profile - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Circular Profile</title> <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! */ .avatar { background: #ff0099; width: 250px; height: 250px; margin-top: 20px; border-radius: 125px; animation: avatar__zoom 0.8s ease 0 1 both;
}
.avatar__mask { position: relative; top: -20px; overflow: hidden; width: 250px; height: 270px; border-radius: 0 0 125px 125px;
}
.avatar__image { width: 100%; position: absolute; animation: avatar__popup 0.5s ease 0.8s 1 both;
}
@keyframes avatar__zoom { 0% { transform: scale(0); } 100% { transform: scale(1); }
}
@keyframes avatar__popup { 0% { top: 100%; } 100% { top: 0%; }
}
html, body { display: flex; justify-content: center; align-items: center; height: 100%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <figure class="avatar"> <div class="avatar__mask"> <img class="avatar__image" src="http://www.mcmbuzz.com/wp-content/uploads/2011/08/Chuck-Norris-psd41327.png" /> </div>
</figure>
</body>
</html>

Circular Profile - Script Codes CSS Codes

.avatar { background: #ff0099; width: 250px; height: 250px; margin-top: 20px; border-radius: 125px; animation: avatar__zoom 0.8s ease 0 1 both;
}
.avatar__mask { position: relative; top: -20px; overflow: hidden; width: 250px; height: 270px; border-radius: 0 0 125px 125px;
}
.avatar__image { width: 100%; position: absolute; animation: avatar__popup 0.5s ease 0.8s 1 both;
}
@keyframes avatar__zoom { 0% { transform: scale(0); } 100% { transform: scale(1); }
}
@keyframes avatar__popup { 0% { top: 100%; } 100% { top: 0%; }
}
html, body { display: flex; justify-content: center; align-items: center; height: 100%;
}
Circular Profile - Script Codes
Circular Profile - Script Codes
Home Page Home
Developer James Crockford
Username james_crockford
Uploaded November 19, 2022
Rating 4
Size 2,689 Kb
Views 14,168
Do you need developer help for Circular Profile?

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!

James Crockford (james_crockford) Script Codes
Name
Drips
Keys
Glow loading
Vim logo animated
Hexagon Split
Hexagon switch
A Pen by James Crockford
Move
CSS breakpoints in JS
Parallax background
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!