CSS3 Butterfly

Developer
Size
3,430 Kb
Views
18,216

How do I make an css3 butterfly?

Animation experiment. What is a css3 butterfly? How do you make a css3 butterfly? This script and codes were developed by Timo Hausmann on 16 October 2022, Sunday.

CSS3 Butterfly Previews

CSS3 Butterfly - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Butterfly</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! */ html,
body {	height: 100%;
}
body {	background: hsla(160,30%,5%,1);	font-size: 40px; /* play around with this value */	margin: 0; cursor: none;
}
#fly {	position: absolute;	background: rgba(255,255,255,0.2);	top: 60%;	left: 50%;	width: 0.3em;	height: 0.3em;	animation: fly 0.5s infinite alternate ease-in-out;	animation-delay: 0.25s;	transition: 1s ease-out top, 1s ease-out left;
}
@keyframes fly {	0% { transform: rotate(-10deg) translate(0, 10px); }	50% { transform: rotate(0deg) translate(0, -10px); }	100% { transform: rotate(10deg) translate(0, 10px); }
}
#fly:after {	content: '';	position: absolute;	border: 1px dashed rgba(255,255,255,0.5);	border-radius: 0.5em;	width: 1em;	height: 1em;	top: -0.47em;	left: -0.37em;	transform: rotate(10deg) scale(0.75);
}
#fly i {	position: absolute;	width: 1px;	height: 1px;	background: #0cf;
}
#fly i:after {	content: '';	position: absolute;	background: hsla(280, 100%, 40%, 0.25);	border-radius: 0.1em;	width: 1em;	height: 1em;	top: 0;	left: 0;	box-shadow: inset 0 0 15px 1px rgba(50,50,255,0.3);	transform: rotate(10deg) skew(25deg);
}
#fly i:nth-child(2):after,
#fly i:nth-child(4):after {	transform: scale(0.66) rotate(10deg) skew(25deg);
}
#fly i:nth-child(1) {	left: 0;	top: 0;	animation: i1 0.25s infinite alternate ease-in;	}
#fly i:nth-child(2) {	left: 0;	bottom: 0;	animation: i2 0.25s infinite alternate ease-in;	}
#fly i:nth-child(3) {	right: 0;	top: 0;	animation: i3 0.25s infinite alternate ease-in;	}
#fly i:nth-child(4) {	right: 0;	bottom: 0;	animation: i4 0.25s infinite alternate ease-in;	}
@keyframes i1 {	from { transform: rotate(160deg); }	to {	transform: rotate(200deg); }
}
@keyframes i2 {	from { transform: rotate(110deg); }	to {	transform: rotate(70deg); }
}
@keyframes i3 {	from { transform: rotate(290deg); }	to {	transform: rotate(250deg); }
}
@keyframes i4 {	from { transform: rotate(-20deg); }	to {	transform: rotate(20deg); }
}
#cursor {	position: absolute;	width: 1px;	height: 1px;	display: none;	transition: 0.6s ease-out;
}
#cursor i {	position: absolute;	width: 2em;	height: 2em;	top: 0em;	left: 0em;	margin: -1em 0 0 -1em;	border-radius: 1em;	box-shadow: inset 0 0 3px 1px hsla(60, 100%, 100%, 0.3);	opacity: 0;	animation: cursor 1s ease-in infinite;
}
#cursor i:nth-child(2) {	box-shadow: inset 0 0 3px 1px hsla(60, 100%, 40%, 0.5);	animation: cursorInner 1s ease-out infinite;	animation-delay: 0.5s;
}
@keyframes cursor {	0% {	transform: scale(0.8);	opacity: 0;	}	50% {	opacity: 1;	}	100% {	transform: scale(0.2);	opacity: 0;	}
}
@keyframes cursorInner {	0% {	transform: scale(0.2);	opacity: 1;	}	30% {	opacity: 1;	}	100% {	transform: scale(1.5);	opacity: 0;	}
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="fly">	<i></i>	<i></i>	<i></i>	<i></i>
</div>
<div id="cursor">	<i></i>	<i></i>	</div> <script src="js/index.js"></script>
</body>
</html>

CSS3 Butterfly - Script Codes CSS Codes

html,
body {	height: 100%;
}
body {	background: hsla(160,30%,5%,1);	font-size: 40px; /* play around with this value */	margin: 0; cursor: none;
}
#fly {	position: absolute;	background: rgba(255,255,255,0.2);	top: 60%;	left: 50%;	width: 0.3em;	height: 0.3em;	animation: fly 0.5s infinite alternate ease-in-out;	animation-delay: 0.25s;	transition: 1s ease-out top, 1s ease-out left;
}
@keyframes fly {	0% { transform: rotate(-10deg) translate(0, 10px); }	50% { transform: rotate(0deg) translate(0, -10px); }	100% { transform: rotate(10deg) translate(0, 10px); }
}
#fly:after {	content: '';	position: absolute;	border: 1px dashed rgba(255,255,255,0.5);	border-radius: 0.5em;	width: 1em;	height: 1em;	top: -0.47em;	left: -0.37em;	transform: rotate(10deg) scale(0.75);
}
#fly i {	position: absolute;	width: 1px;	height: 1px;	background: #0cf;
}
#fly i:after {	content: '';	position: absolute;	background: hsla(280, 100%, 40%, 0.25);	border-radius: 0.1em;	width: 1em;	height: 1em;	top: 0;	left: 0;	box-shadow: inset 0 0 15px 1px rgba(50,50,255,0.3);	transform: rotate(10deg) skew(25deg);
}
#fly i:nth-child(2):after,
#fly i:nth-child(4):after {	transform: scale(0.66) rotate(10deg) skew(25deg);
}
#fly i:nth-child(1) {	left: 0;	top: 0;	animation: i1 0.25s infinite alternate ease-in;	}
#fly i:nth-child(2) {	left: 0;	bottom: 0;	animation: i2 0.25s infinite alternate ease-in;	}
#fly i:nth-child(3) {	right: 0;	top: 0;	animation: i3 0.25s infinite alternate ease-in;	}
#fly i:nth-child(4) {	right: 0;	bottom: 0;	animation: i4 0.25s infinite alternate ease-in;	}
@keyframes i1 {	from { transform: rotate(160deg); }	to {	transform: rotate(200deg); }
}
@keyframes i2 {	from { transform: rotate(110deg); }	to {	transform: rotate(70deg); }
}
@keyframes i3 {	from { transform: rotate(290deg); }	to {	transform: rotate(250deg); }
}
@keyframes i4 {	from { transform: rotate(-20deg); }	to {	transform: rotate(20deg); }
}
#cursor {	position: absolute;	width: 1px;	height: 1px;	display: none;	transition: 0.6s ease-out;
}
#cursor i {	position: absolute;	width: 2em;	height: 2em;	top: 0em;	left: 0em;	margin: -1em 0 0 -1em;	border-radius: 1em;	box-shadow: inset 0 0 3px 1px hsla(60, 100%, 100%, 0.3);	opacity: 0;	animation: cursor 1s ease-in infinite;
}
#cursor i:nth-child(2) {	box-shadow: inset 0 0 3px 1px hsla(60, 100%, 40%, 0.5);	animation: cursorInner 1s ease-out infinite;	animation-delay: 0.5s;
}
@keyframes cursor {	0% {	transform: scale(0.8);	opacity: 0;	}	50% {	opacity: 1;	}	100% {	transform: scale(0.2);	opacity: 0;	}
}
@keyframes cursorInner {	0% {	transform: scale(0.2);	opacity: 1;	}	30% {	opacity: 1;	}	100% {	transform: scale(1.5);	opacity: 0;	}
}

CSS3 Butterfly - Script Codes JS Codes

var	fly = document.getElementById('fly'),	cursor = document.getElementById('cursor'),	updateFly = new Date(),	updateCursor = new Date();
document.body.addEventListener('mousemove', function(e) {	var thisUpdate = new Date();	if( thisUpdate - updateFly > 500 ) {	fly.style.left = e.pageX + 'px';	fly.style.top = e.pageY + 'px';	updateFly = thisUpdate;	}	if( thisUpdate - updateCursor > 100 ) {	cursor.style.display = 'block';	cursor.style.left = e.pageX + 'px';	cursor.style.top = e.pageY + 'px';	updateCursor = thisUpdate;	}
});
CSS3 Butterfly - Script Codes
CSS3 Butterfly - Script Codes
Home Page Home
Developer Timo Hausmann
Username timohausmann
Uploaded October 16, 2022
Rating 4
Size 3,430 Kb
Views 18,216
Do you need developer help for CSS3 Butterfly?

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!

Timo Hausmann (timohausmann) Script Codes
Create amazing blog posts 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!