css shapes and animations
A Pen by Marianne Kelly on CodePen.
<div class="container"> | |
<div class="five animated infinite flash"></div> | |
<div class="heart animated infinite pulse"></div> | |
<div class="triContainer"> | |
<div class="topTriangles"> | |
<div class="one animated infinite fadeIn"></div> | |
<div class="two animated infinite fadeIn"></div> | |
<div class="three animated infinite fadeIn"></div> | |
</div> | |
<div class="bottomTriangles"> | |
<div class="four"></div> | |
</div> | |
</div> | |
</div> |
css shapes and animations
A Pen by Marianne Kelly on CodePen.
.container { | |
display: flex; | |
align-items: center; | |
justify-content: space-around; | |
margin-top: 100px; | |
} | |
.five { | |
width: 0; | |
height: 0; | |
border-left: solid 100px transparent; | |
border-right: solid 100px transparent; | |
border-bottom: solid 70px yellow; | |
transform: rotatez(35deg); | |
animation-duration: 7s; | |
} | |
.five:before { | |
position: absolute; | |
display: block; | |
content: ''; | |
width: 0; | |
height: 0; | |
top: -45px; | |
left: -65px; | |
border-left: solid 30px transparent; | |
border-right: solid 30px transparent; | |
border-bottom: solid 80px yellow; | |
transform: rotatez(-35deg); | |
} | |
.five:after { | |
position: absolute; | |
display: block; | |
content: ''; | |
width: 0; | |
height: 0; | |
top: 3px; | |
left: -105px; | |
border-left: solid 100px transparent; | |
border-right: solid 100px transparent; | |
border-bottom: solid 70px yellow; | |
transform: rotatez(-70deg); | |
} | |
.heart { | |
position: relative; | |
margin: 20px; | |
height: 170px; | |
width: 200px; | |
} | |
.heart:before, | |
.heart:after { | |
position: absolute; | |
content: ""; | |
width: 100px; | |
height: 160px; | |
top: 5px; | |
background: red; | |
border-radius: 50px 50px 0 0; | |
} | |
.heart:before { | |
left:100px; | |
-webkit-transform: rotate(-45deg); | |
transform: rotate(-45deg); | |
-webkit-transform-origin:0 100%; | |
transform-origin:0 100%; | |
} | |
.heart:after { | |
left:0; | |
-webkit-transform: rotate(45deg); | |
transform: rotate(45deg); | |
-webkit-transform-origin:100% 100%; | |
transform-origin:100% 100%; | |
} | |
.triContainer{ | |
display: flex; | |
flex-direction: column; | |
/* margin: 0 auto; */ | |
} | |
.topTriangles { | |
display: flex; | |
} | |
.bottomTriangles { | |
display: flex; | |
} | |
.one { | |
width: 0; | |
height: 0; | |
border-right: solid 50px transparent; | |
border-left: solid 50px transparent; | |
border-bottom: solid 75px #64b5f6; | |
animation-duration: 1s; | |
} | |
.two { | |
margin-left: -50px; | |
width: 0; | |
height: 0; | |
border-right: solid 50px transparent; | |
border-left: solid 50px transparent; | |
border-top: solid 75px #2196f3; | |
animation-duration: 1s; | |
animation-delay: .5s; | |
} | |
.three { | |
margin-left: -50px; | |
width: 0; | |
height: 0; | |
border-left: solid 50px transparent; | |
border-right: solid 50px transparent; | |
border-bottom: solid 75px #1976d2; | |
animation-duration: 2s; | |
animation-delay: 1s; | |
} | |
.four { | |
width: 0; | |
height: 0; | |
border-top: solid 100px #2196f3; | |
border-left: solid 100px transparent; | |
border-right: solid 100px transparent; | |
} | |
@keyframes fadeIn { | |
0% { opacity: .9; | |
} | |
100% { opacity: 1; | |
} | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" /> |