CSS3 Butterfly
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; }
});
| 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
| Name | Size |
| Use your mousewheel | 4,109 Kb |
| Color Wheel. Literally. | 6,392 Kb |
| Valentines Day | 3,118 Kb |
| Triangle Split Plane | 3,263 Kb |
| Vector Based Movement | 2,568 Kb |
| CSS3 3D Particles | 2,859 Kb |
| Simple CSS 3D Cubes | 2,894 Kb |
| Depth First Search Maze | 2,693 Kb |
| Tunnel Quest | 4,379 Kb |
| Stream of Cables | 2,488 Kb |
Create amazing sales emails 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!
Similar Scripts & Codes
| Name | Username | Size |
| Haml Calendar | Katydecorah | 5,643 Kb |
| A Pen by Sooba | Sooba | 2,516 Kb |
| Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
| Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
| Contact | GanNichiHa | 2,514 Kb |
| Popover Example | Seanboom | 2,429 Kb |
| Another brick in the wall | Fivera | 1,955 Kb |
| CSS3 Form Page Design | Rssatnam | 3,613 Kb |
| Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
| Draggables in pure angular | Rlo206 | 5,167 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!