Skip to content

Instantly share code, notes, and snippets.

@thundernixon

thundernixon/Triangle Circle Square Animated Hero Background (responsive).markdown

Created May 6, 2016 15:24
Show Gist options
  • Save thundernixon/e02e7a62eee829eff56a609dad190e9c to your computer and use it in GitHub Desktop.
Save thundernixon/e02e7a62eee829eff56a609dad190e9c to your computer and use it in GitHub Desktop.
Download ZIP
Triangle Circle Square Animated Hero Background (responsive)
Raw
index.html
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<div class="content">
<div class="triangle-container">
<div class="triangle">
<div class="inner-triangle"></div>
</div>
</div>
<div class="square-container">
<div class="square">
</div>
</div>
<div class="circle-container">
<div class="circle">
</div>
</div>
</div>
</html>
Raw
style.css
html {
background: #F1F1F1;
height: 100%;
width: 100%;
overflow:hidden;
}
.content {
position:absolute;
height: 100%;
width: 100%;
overflow:hidden;
top:0;
left:0;
}
.triangle {
width: 0;
height: 0;
border-left: 33.39vh solid transparent;
border-right: 33.39vh solid transparent;
border-bottom: 57.84vh solid #7CC7FF;
}
.inner-triangle {
position: relative;
left: -30vh;
top: 3.9vh;
width: 0;
height: 0;
border-left: 30vh solid transparent;
border-right: 30vh solid transparent;
border-bottom: 51.96vh solid #F1F1F1;
31.005000014
}
.triangle {
animation: clockwise-rotation 120s linear infinite;
}
.triangle-container {
/* background: #ff00ff; */
height: 70vw;
width: 70vw;
position: absolute;
top: 10vh;
left: 40vw;
animation: clockwise-rotation 145s linear infinite;
}
@keyframes clockwise-rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg); }
}
@keyframes counterclockwise-rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(-360deg); }
}
.square {
width: 52.48vh;
height: 52.48vh;
border: 2.1vh solid #FDD600;
animation: counterclockwise-rotation 140s linear infinite;
}
.square-container{
/* background: #0000ff; */
height: 114.50vh;
width: 114.50vh;
position: absolute;
top: -20%;
left: -10%;
animation: counterclockwise-rotation 155s linear infinite;
}
@keyframes circle-self-rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(-360deg); }
}
.circle {
width: 58.48vh;
height: 58.48vh;
border: 2.1vh solid #6EEDD8;
border-radius:100%;
}
.circle-container{
/* background: #ff0000; */
height: 110vh;
width: 110vh;
position: absolute;
top: 30vh;
left: -5vw;
animation: clockwise-rotation 145s linear infinite;
}
Raw
Triangle Circle Square Animated Hero Background (responsive).markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment