Skip to content

Instantly share code, notes, and snippets.

@rssems

rssems/index.html

Created May 25, 2013 10:12
Show Gist options
  • Save rssems/5648590 to your computer and use it in GitHub Desktop.
Save rssems/5648590 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Rıza Selçuk Saydam. Flutterby - This is a single element pure CSS3 butterfly and animation.
Raw
index.html
<div class="minimalsworld">
<span class="flutterby">.</span>
</div>
Raw
script.js
/***
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
***/
Raw
style.css
/* 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment