Flutterby
How do I make an flutterby?
This is a single element pure CSS3 butterfly and animation.. What is a flutterby? How do you make a flutterby? This script and codes were developed by Rıza Selçuk Saydam on 02 August 2022, Tuesday.
Flutterby Previews
Flutterby - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flutterby</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ /* Common */
body { min-width: 800px; min-height: 400px;
}
.minimalsworld { width: 354px; height: 354px; background-color: #fff; position: absolute; top: 50%; left: 50%; margin: -177px 0 0 -177px;
}
.minimalsworld:before { content: ""; width: 330px; height: 50px; display: block; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -o-transform: rotate(-4deg); -ms-transform: rotate(-4deg); transform: rotate(-4deg); position: absolute; top: -11.5px; left: 2px; background-color: #f6f6f6; z-index: -2; -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1); box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
}
.minimalsworld:after { content: ""; width: 354px; height: 354px; display: block; position: absolute; top: 0; left: 0; background-color: #fff; z-index: -1; -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .3); box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .3);
}
/* flutterby */
body { background-color: #fecb69;
}
.flutterby { position: absolute; top: 50%; left: 50%; margin-top: -48px; z-index: 10; width: 64px; height: 64px; background-color: #ff9f35; display: inline-block; border-radius: 0 0 32px 0; -webkit-box-reflect: right 8px; color: #fff; font-size: 75px; text-align: right; line-height: 105px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);
}
.flutterby:before,.flutterby:after { content: ""; position: absolute; z-index: -10; height: 20px; width: 20px; border-radius: 64px; background-color: #fff; display: block; border: 22px solid #ff9f35;
}
.flutterby:before { left: -32px; top: 0;
}
.flutterby:after { right: 0; bottom: 32px;
}
.minimalsworld .flutterby:before,
.minimalsworld .flutterby:after { -webkit-animation: color 20s infinite; -moz-animation: color 20s infinite; -ms-animation: color 20s infinite; -o-animation: color 20s infinite; animation: color 20s infinite;
}
.minimalsworld .flutterby { -webkit-animation: colorR 20s infinite; -moz-animation: colorR 20s infinite; -ms-animation: colorR 20s infinite; -o-animation: colorR 20s infinite; animation: colorR 20s infinite;
}
body { -webkit-animation: colorR 20s infinite; -moz-animation: colorR 20s infinite; -ms-animation: colorR 20s infinite; -o-animation: colorR 20s infinite; animation: colorR 20s infinite;
}
@keyframes "color" { 0% { border-color: #ff9f35; background-color: #fff; } 10% { border-color: #bba4cf; } 20% { border-color: #9ad089; } 30% { border-color: #07b3e7; } 40% { border-color: #e3b382; } 50% { border-color: #f385a0; } 60% { border-color: #f26752; } 70% { border-color: #9e6d5c; } 80% { border-color: #3ebfab; } 90% { border-color: #e74c3c; } 100% { border-color: #ff9f35; background-color: #fff; }
}
@-moz-keyframes color { 0% { border-color: #ff9f35; background-color: #fff; } 10% { border-color: #bba4cf; } 20% { border-color: #9ad089; } 30% { border-color: #07b3e7; } 40% { border-color: #e3b382; } 50% { border-color: #f385a0; } 60% { border-color: #f26752; } 70% { border-color: #9e6d5c; } 80% { border-color: #3ebfab; } 90% { border-color: #e74c3c; } 100% { border-color: #ff9f35; background-color: #fff; }
}
@-webkit-keyframes "color" { 0% { border-color: #ff9f35; background-color: #fff; } 10% { border-color: #bba4cf; } 20% { border-color: #9ad089; } 30% { border-color: #07b3e7; } 40% { border-color: #e3b382; } 50% { border-color: #f385a0; } 60% { border-color: #f26752; } 70% { border-color: #9e6d5c; } 80% { border-color: #3ebfab; } 90% { border-color: #e74c3c; } 100% { border-color: #ff9f35; background-color: #fff; }
}
@-ms-keyframes "color" { 0% { border-color: #ff9f35; background-color: #fff; } 10% { border-color: #bba4cf; } 20% { border-color: #9ad089; } 30% { border-color: #07b3e7; } 40% { border-color: #e3b382; } 50% { border-color: #f385a0; } 60% { border-color: #f26752; } 70% { border-color: #9e6d5c; } 80% { border-color: #3ebfab; } 90% { border-color: #e74c3c; } 100% { border-color: #ff9f35; background-color: #fff; }
}
@-o-keyframes "color" { 0% { border-color: #ff9f35; background-color: #fff; } 10% { border-color: #bba4cf; } 20% { border-color: #9ad089; } 30% { border-color: #07b3e7; } 40% { border-color: #e3b382; } 50% { border-color: #f385a0; } 60% { border-color: #f26752; } 70% { border-color: #9e6d5c; } 80% { border-color: #3ebfab; } 90% { border-color: #e74c3c; } 100% { border-color: #ff9f35; background-color: #fff; }
}
@keyframes "colorR" { 0% { background-color: #ff9f35; color: #ff9f35; } 10% { background-color: #bba4cf; color: #bba4cf; } 20% { background-color: #9ad089; color: #9ad089; } 30% { background-color: #07b3e7; color: #07b3e7; } 40% { background-color: #e3b382; color: #e3b382; } 50% { background-color: #f385a0; color: #f385a0; } 60% { background-color: #f26752; color: #f26752; } 70% { background-color: #9e6d5c; color: #9e6d5c; } 80% { background-color: #3ebfab; color: #3ebfab; } 90% { background-color: #e74c3c; color: #e74c3c; } 100% { background-color: #ff9f35; color: #ff9f35; }
}
@-moz-keyframes colorR { 0% { background-color: #ff9f35; color: #ff9f35; } 10% { background-color: #bba4cf; color: #bba4cf; } 20% { background-color: #9ad089; color: #9ad089; } 30% { background-color: #07b3e7; color: #07b3e7; } 40% { background-color: #e3b382; color: #e3b382; } 50% { background-color: #f385a0; color: #f385a0; } 60% { background-color: #f26752; color: #f26752; } 70% { background-color: #9e6d5c; color: #9e6d5c; } 80% { background-color: #3ebfab; color: #3ebfab; } 90% { background-color: #e74c3c; color: #e74c3c; } 100% { background-color: #ff9f35; color: #ff9f35; }
}
@-webkit-keyframes "colorR" { 0% { background-color: #ff9f35; color: #ff9f35; } 10% { background-color: #bba4cf; color: #bba4cf; } 20% { background-color: #9ad089; color: #9ad089; } 30% { background-color: #07b3e7; color: #07b3e7; } 40% { background-color: #e3b382; color: #e3b382; } 50% { background-color: #f385a0; color: #f385a0; } 60% { background-color: #f26752; color: #f26752; } 70% { background-color: #9e6d5c; color: #9e6d5c; } 80% { background-color: #3ebfab; color: #3ebfab; } 90% { background-color: #e74c3c; color: #e74c3c; } 100% { background-color: #ff9f35; color: #ff9f35; }
}
@-ms-keyframes "colorR" { 0% { background-color: #ff9f35; color: #ff9f35; } 10% { background-color: #bba4cf; color: #bba4cf; } 20% { background-color: #9ad089; color: #9ad089; } 30% { background-color: #07b3e7; color: #07b3e7; } 40% { background-color: #e3b382; color: #e3b382; } 50% { background-color: #f385a0; color: #f385a0; } 60% { background-color: #f26752; color: #f26752; } 70% { background-color: #9e6d5c; color: #9e6d5c; } 80% { background-color: #3ebfab; color: #3ebfab; } 90% { background-color: #e74c3c; color: #e74c3c; } 100% { background-color: #ff9f35; color: #ff9f35; }
}
@-o-keyframes "colorR" { 0% { background-color: #ff9f35; color: #ff9f35; } 10% { background-color: #bba4cf; color: #bba4cf; } 20% { background-color: #9ad089; color: #9ad089; } 30% { background-color: #07b3e7; color: #07b3e7; } 40% { background-color: #e3b382; color: #e3b382; } 50% { background-color: #f385a0; color: #f385a0; } 60% { background-color: #f26752; color: #f26752; } 70% { background-color: #9e6d5c; color: #9e6d5c; } 80% { background-color: #3ebfab; color: #3ebfab; } 90% { background-color: #e74c3c; color: #e74c3c; } 100% { background-color: #ff9f35; color: #ff9f35; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="minimalsworld"> <span class="flutterby">.</span>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Flutterby - Script Codes CSS Codes
/* Common */
body { min-width: 800px; min-height: 400px;
}
.minimalsworld { width: 354px; height: 354px; background-color: #fff; position: absolute; top: 50%; left: 50%; margin: -177px 0 0 -177px;
}
.minimalsworld:before { content: ""; width: 330px; height: 50px; display: block; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -o-transform: rotate(-4deg); -ms-transform: rotate(-4deg); transform: rotate(-4deg); position: absolute; top: -11.5px; left: 2px; background-color: #f6f6f6; z-index: -2; -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1); box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
}
.minimalsworld:after { content: ""; width: 354px; height: 354px; display: block; position: absolute; top: 0; left: 0; background-color: #fff; z-index: -1; -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .3); box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .3);
}
/* flutterby */
body { background-color: #fecb69;
}
.flutterby { position: absolute; top: 50%; left: 50%; margin-top: -48px; z-index: 10; width: 64px; height: 64px; background-color: #ff9f35; display: inline-block; border-radius: 0 0 32px 0; -webkit-box-reflect: right 8px; color: #fff; font-size: 75px; text-align: right; line-height: 105px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);
}
.flutterby:before,.flutterby:after { content: ""; position: absolute; z-index: -10; height: 20px; width: 20px; border-radius: 64px; background-color: #fff; display: block; border: 22px solid #ff9f35;
}
.flutterby:before { left: -32px; top: 0;
}
.flutterby:after { right: 0; bottom: 32px;
}
.minimalsworld .flutterby:before,
.minimalsworld .flutterby:after { -webkit-animation: color 20s infinite; -moz-animation: color 20s infinite; -ms-animation: color 20s infinite; -o-animation: color 20s infinite; animation: color 20s infinite;
}
.minimalsworld .flutterby { -webkit-animation: colorR 20s infinite; -moz-animation: colorR 20s infinite; -ms-animation: colorR 20s infinite; -o-animation: colorR 20s infinite; animation: colorR 20s infinite;
}
body { -webkit-animation: colorR 20s infinite; -moz-animation: colorR 20s infinite; -ms-animation: colorR 20s infinite; -o-animation: colorR 20s infinite; animation: colorR 20s infinite;
}
@keyframes "color" { 0% { border-color: #ff9f35; background-color: #fff; } 10% { border-color: #bba4cf; } 20% { border-color: #9ad089; } 30% { border-color: #07b3e7; } 40% { border-color: #e3b382; } 50% { border-color: #f385a0; } 60% { border-color: #f26752; } 70% { border-color: #9e6d5c; } 80% { border-color: #3ebfab; } 90% { border-color: #e74c3c; } 100% { border-color: #ff9f35; background-color: #fff; }
}
@-moz-keyframes color { 0% { border-color: #ff9f35; background-color: #fff; } 10% { border-color: #bba4cf; } 20% { border-color: #9ad089; } 30% { border-color: #07b3e7; } 40% { border-color: #e3b382; } 50% { border-color: #f385a0; } 60% { border-color: #f26752; } 70% { border-color: #9e6d5c; } 80% { border-color: #3ebfab; } 90% { border-color: #e74c3c; } 100% { border-color: #ff9f35; background-color: #fff; }
}
@-webkit-keyframes "color" { 0% { border-color: #ff9f35; background-color: #fff; } 10% { border-color: #bba4cf; } 20% { border-color: #9ad089; } 30% { border-color: #07b3e7; } 40% { border-color: #e3b382; } 50% { border-color: #f385a0; } 60% { border-color: #f26752; } 70% { border-color: #9e6d5c; } 80% { border-color: #3ebfab; } 90% { border-color: #e74c3c; } 100% { border-color: #ff9f35; background-color: #fff; }
}
@-ms-keyframes "color" { 0% { border-color: #ff9f35; background-color: #fff; } 10% { border-color: #bba4cf; } 20% { border-color: #9ad089; } 30% { border-color: #07b3e7; } 40% { border-color: #e3b382; } 50% { border-color: #f385a0; } 60% { border-color: #f26752; } 70% { border-color: #9e6d5c; } 80% { border-color: #3ebfab; } 90% { border-color: #e74c3c; } 100% { border-color: #ff9f35; background-color: #fff; }
}
@-o-keyframes "color" { 0% { border-color: #ff9f35; background-color: #fff; } 10% { border-color: #bba4cf; } 20% { border-color: #9ad089; } 30% { border-color: #07b3e7; } 40% { border-color: #e3b382; } 50% { border-color: #f385a0; } 60% { border-color: #f26752; } 70% { border-color: #9e6d5c; } 80% { border-color: #3ebfab; } 90% { border-color: #e74c3c; } 100% { border-color: #ff9f35; background-color: #fff; }
}
@keyframes "colorR" { 0% { background-color: #ff9f35; color: #ff9f35; } 10% { background-color: #bba4cf; color: #bba4cf; } 20% { background-color: #9ad089; color: #9ad089; } 30% { background-color: #07b3e7; color: #07b3e7; } 40% { background-color: #e3b382; color: #e3b382; } 50% { background-color: #f385a0; color: #f385a0; } 60% { background-color: #f26752; color: #f26752; } 70% { background-color: #9e6d5c; color: #9e6d5c; } 80% { background-color: #3ebfab; color: #3ebfab; } 90% { background-color: #e74c3c; color: #e74c3c; } 100% { background-color: #ff9f35; color: #ff9f35; }
}
@-moz-keyframes colorR { 0% { background-color: #ff9f35; color: #ff9f35; } 10% { background-color: #bba4cf; color: #bba4cf; } 20% { background-color: #9ad089; color: #9ad089; } 30% { background-color: #07b3e7; color: #07b3e7; } 40% { background-color: #e3b382; color: #e3b382; } 50% { background-color: #f385a0; color: #f385a0; } 60% { background-color: #f26752; color: #f26752; } 70% { background-color: #9e6d5c; color: #9e6d5c; } 80% { background-color: #3ebfab; color: #3ebfab; } 90% { background-color: #e74c3c; color: #e74c3c; } 100% { background-color: #ff9f35; color: #ff9f35; }
}
@-webkit-keyframes "colorR" { 0% { background-color: #ff9f35; color: #ff9f35; } 10% { background-color: #bba4cf; color: #bba4cf; } 20% { background-color: #9ad089; color: #9ad089; } 30% { background-color: #07b3e7; color: #07b3e7; } 40% { background-color: #e3b382; color: #e3b382; } 50% { background-color: #f385a0; color: #f385a0; } 60% { background-color: #f26752; color: #f26752; } 70% { background-color: #9e6d5c; color: #9e6d5c; } 80% { background-color: #3ebfab; color: #3ebfab; } 90% { background-color: #e74c3c; color: #e74c3c; } 100% { background-color: #ff9f35; color: #ff9f35; }
}
@-ms-keyframes "colorR" { 0% { background-color: #ff9f35; color: #ff9f35; } 10% { background-color: #bba4cf; color: #bba4cf; } 20% { background-color: #9ad089; color: #9ad089; } 30% { background-color: #07b3e7; color: #07b3e7; } 40% { background-color: #e3b382; color: #e3b382; } 50% { background-color: #f385a0; color: #f385a0; } 60% { background-color: #f26752; color: #f26752; } 70% { background-color: #9e6d5c; color: #9e6d5c; } 80% { background-color: #3ebfab; color: #3ebfab; } 90% { background-color: #e74c3c; color: #e74c3c; } 100% { background-color: #ff9f35; color: #ff9f35; }
}
@-o-keyframes "colorR" { 0% { background-color: #ff9f35; color: #ff9f35; } 10% { background-color: #bba4cf; color: #bba4cf; } 20% { background-color: #9ad089; color: #9ad089; } 30% { background-color: #07b3e7; color: #07b3e7; } 40% { background-color: #e3b382; color: #e3b382; } 50% { background-color: #f385a0; color: #f385a0; } 60% { background-color: #f26752; color: #f26752; } 70% { background-color: #9e6d5c; color: #9e6d5c; } 80% { background-color: #3ebfab; color: #3ebfab; } 90% { background-color: #e74c3c; color: #e74c3c; } 100% { background-color: #ff9f35; color: #ff9f35; }
}Flutterby - Script Codes JS Codes
/***
This is a single element pure CSS3 butterfly and animation.
Design and Copyright: Minimals World http://www.minimalsworld.com/product/flutterby
Front-End: Rıza Selçuk Saydam http:/www.rss-ems.com
***/
| Developer | Rıza Selçuk Saydam |
| Username | rss |
| Uploaded | August 02, 2022 |
| Rating | 3.5 |
| Size | 3,799 Kb |
| Views | 58,696 |
Do you need developer help for Flutterby?
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!
Rıza Selçuk Saydam (rss) Script Codes
| Name | Size |
| Star Wars Toggle Icon Animation | 3,180 Kb |
| SOCIAL BANG | 8,251 Kb |
| Animated Flat Camera Icon | 3,843 Kb |
| Loader Animation | 2,761 Kb |
| Little Boxes on an iPhone | 4,036 Kb |
| Contact Page CSS3 Transation | 6,686 Kb |
| How a Text Gradient is Made | 4,908 Kb |
| CSS3 Loader Animation - Peeek | 3,854 Kb |
| Pokemon Icon | 2,655 Kb |
| Button Switch | 5,239 Kb |
Create amazing love letters 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 |
| Ripples in water | Nobitagit | 2,704 Kb |
| Tic Tac Toe | Volv | 4,862 Kb |
| Birthday Party Starter | Aussieyang | 1,629 Kb |
| Simple personal profile | Miroot | 2,856 Kb |
| Christ the Redeemer | Prashantsani | 2,208 Kb |
| 404 Page | Saransh | 2,666 Kb |
| Formations | Cantelope | 5,731 Kb |
| Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
| Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
| After America | Jonathangarner | 2,686 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!