Senoidal curve with SASS + HAML. Pure CSS(3).
Available on CodePen
Senoidal curve with SASS + HAML. Pure CSS(3).
Available on CodePen
%link{:type => "text/css", :rel => "stylesheet", :href => "http://fonts.googleapis.com/css?family=Allerta"} | |
%h1 CSS3 SINE WAVES | |
%h2 [linear && alternate movement] | |
%section.curve.linear | |
- (1..10).each do | |
.increase | |
.peak | |
.decrease | |
.valley | |
%h2 [static] | |
%section.curve | |
- (1..6).each do | |
.increase | |
.peak | |
.decrease | |
.valley | |
%h2 [wave perspective] | |
%section.curve.perspective | |
- (1..15).each do | |
.increase | |
.peak | |
.decrease | |
.valley | |
%h2 [showing the wave] | |
%section.curve | |
.showing | |
- (1..10).each do | |
.increase | |
.peak | |
.decrease | |
.valley |
@import "compass" | |
// visual variables | |
$bodybg: #1E1717 | |
$wavecolor: darken($bodybg, 7%) | |
$showingtime: 4s // 2s is fun, try :D | |
$titlecolor: #753222 | |
// relevant variables | |
$angle: 38.43deg | |
$increasemargin: -89.75px | |
$thick: 5.7px | |
// relevant | |
div | |
display: inline-block | |
.curve | |
margin-bottom: 110px | |
.linear | |
animation: linearmov 8s linear infinite alternate | |
.perspective | |
transform: perspective(600px) rotateY(26deg) | |
.showing | |
.increase, .decrease | |
height: 5.4px | |
background: $wavecolor | |
width: 150px | |
margin-left: $increasemargin | |
position: relative | |
z-index: 1 | |
.increase | |
transform: rotate(-$angle) | |
.decrease | |
transform: rotate($angle) | |
margin-left: $increasemargin + 1.5 | |
.peak, .valley | |
border: $thick solid $bodybg | |
border-top: $thick solid $wavecolor | |
border-radius: 50% | |
width: 106px | |
height: 105px | |
.peak | |
transform: translate(-44px, 51.8px) | |
.valley | |
transform: rotate(180deg) translate(45px, -58px) | |
// page + movements + extra transforms | |
body | |
background: $bodybg | |
white-space: nowrap | |
overflow-x: hidden | |
font-family: 'Allerta' | |
text-align: center | |
h1, h2 | |
color: $titlecolor | |
margin-bottom: 0 | |
h2 | |
font-weight: normal | |
margin: 0 | |
.showing | |
float: right | |
background: $bodybg | |
width: 100% | |
height: 200px | |
animation: showing $showingtime linear infinite alternate | |
position: relative | |
z-index: 2 | |
@keyframes linearmov | |
from | |
transform: translateX(0) | |
perspective: 300px | |
to | |
transform: translateX(-1030px) | |
@keyframes showing | |
from | |
transform: translateX(0%) | |
to | |
transform: translateX(105%) |