Skip to content

Instantly share code, notes, and snippets.

@bhargav2785
Created November 3, 2012 09:24
Show Gist options
  • Save bhargav2785/4006733 to your computer and use it in GitHub Desktop.
Save bhargav2785/4006733 to your computer and use it in GitHub Desktop.
Love Flowers
/**
Love Flowers
@author Bhargav Vadher
**/
.flowers{
position: absolute;
width: 50px;
height:50px;
transform: rotate3d(1,1,1,360deg);
transform-origin: 50% 50%;
transition: all 2s linear;
}
.flower1{ margin: 10px 40%; }
.flower2{ margin: 10px 50%; }
.flower3{ margin: 10px 60%; }
.flower4{ margin: 100px 45%; }
.flower5{ margin: 100px 55%; }
.flower6{ margin: 185px 50%; }
.heart{
position: absolute;
width: 100%;
height: 100%;
}
.heart:after, .heart:before{
content: '';
position: absolute;
left: 50%;
bottom: 0%;
width: 50%;
height: 80%;
border-radius: 50px 50px 20px 0;
transform: rotate(45deg);
transform-origin: 50% 25%;
background-image: radial-gradient(0% 0%, ellipse farthest-corner, black 70%, red 100%);
background-image: -moz-radial-gradient(0% 0%, ellipse farthest-corner, black 70%, red 100%);
}
.heart:before{
left: 0%;
border-radius: 50px 50px 0px 20px;
transform: rotate(-45deg);
}
.top{}
.right{ transform: rotate(90deg) translate(50%, -50%); }
.bottom{ transform: rotate(180deg) translate(0%, -100%); }
.left{ transform: rotate(270deg) translate(-50%, -50%); }
<div class='flowers flower1'>
<div class='top heart'></div>
<div class='right heart'></div>
<div class='bottom heart'></div>
<div class='left heart'></div>
</div>
<div class='flowers flower2'>
<div class='top heart'></div>
<div class='right heart'></div>
<div class='bottom heart'></div>
<div class='left heart'></div>
</div>
<div class='flowers flower3'>
<div class='top heart'></div>
<div class='right heart'></div>
<div class='bottom heart'></div>
<div class='left heart'></div>
</div>
<div class='flowers flower4'>
<div class='top heart'></div>
<div class='right heart'></div>
<div class='bottom heart'></div>
<div class='left heart'></div>
</div>
<div class='flowers flower5'>
<div class='top heart'></div>
<div class='right heart'></div>
<div class='bottom heart'></div>
<div class='left heart'></div>
</div>
<div class='flowers flower6'>
<div class='top heart'></div>
<div class='right heart'></div>
<div class='bottom heart'></div>
<div class='left heart'></div>
</div>
{"view":"separate","fontsize":"60","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment