Posted in
2084
3:30 am, March 25, 2023
Fancy Border Radius CSS Generator Tool - spin animation keyframes
Tool to generate custom border radius. you too can create blob like objects.
How to use
Just generate your border radius, and then copy the following code into a new or existing element.
Can i animate them?
Like with all css and html you can animate them, spin them around and duplicate them to make them look even cooler.
Tool Source Link
Fancy Border Radius CSS Generator Tool - spin animation keyframes Demo
View Demo Full Screen View Demo New Tab
Fancy Border Radius CSS Generator Tool - spin animation keyframes Code
HTML
<h3>Border Radius to Element</h3>
<div class='border-rad'></div>
<h3>Tool Demo</h3>
<iframe height="600" width="100%" src="https://9elements.github.io/fancy-border-radius/"></iframe>
CSS
.border-rad {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
background:#FFF;
color:#000;
height:300px;
width:300px;
margin:auto;
animation: spin 2.5s linear infinite;
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
Related Tags
Add Comment
Other Items in CSS Tools
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
HTML Canvas
javascript