<header class="new">
Did you tried to add <a href="https://codepen.io/elrumordelaluz/full/pHKcC?harlem=shake">?harlem=shake</a> at the end of the Pen url?
</header>
<section class="section shamrock">
<h1>CS<span class="shake shake-delay">Shake</span></h1>
<h4>Some CSS classes to <span class="shake">move your DOM!</span></h4>
<ul class="previews">
<li>
<i class="preview-item shake">
Bs
<span class="flip"></span>
</i>
<p class="preview-desc">Basic Shake</p>
</li>
<li>
<i class="preview-item shake shake-slow">
Ss
<span class="flip"></span>
</i>
<p class="preview-desc">Slow Shake</p>
</li>
<li>
<i class="preview-item shake shake-little">
Ls
<span class="flip"></span>
</i>
<p class="preview-desc">Little Shake</p>
</li>
<li>
<i class="preview-item shake shake-hard">
Hs
<span class="flip"></span>
</i>
<p class="preview-desc">Hard Shake</p>
</li>
<li>
<i class="preview-item shake shake-horizontal">
⇄
<span class="flip"></span>
</i>
<p class="preview-desc">Fixed Horizontal</p>
</li>
<li>
<i class="preview-item shake shake-vertical">
⇵
<span class="flip"></span>
</i>
<p class="preview-desc">Fixed Vertical</p>
</li>
<li>
<i class="preview-item shake shake-rotate">
↻
<span class="flip"></span>
</i>
<p class="preview-desc">Fixed Rotation</p>
</li>
<li>
<i class="preview-item shake shake-opacity">
Os
<span class="flip"></span>
</i>
<p class="preview-desc">Opacity Shake</p>
</li>
<li>
<i class="preview-item shake shake-crazy">
✌
<span class="flip"></span>
</i>
<p class="preview-desc">Crazy Shake</p>
</li>
<li>
<i class="preview-item shake shake-constant">
ℇ
<span class="flip"></span>
</i>
<p class="preview-desc">Constant Shake</p>
</li>
</ul>
<footer>Made with <span class="shake shake-slow shake-constant">♥</span> by <a class="shake shake-constant hover-stop" href="https://twitter.com/elrumordelaluz">@elrumordelaluz</a>, using <a href="http://sass-lang.com/">Sass</a><br>Full project page <a href="https://elrumordelaluz.github.io/csshake">elrumordelaluz.github.io/csshake</a> </footer>
</section>
<audio id="track" preload="auto">
<source src="http://elrumordelaluz.com/audio/harlemshake.ogg" type="audio/ogg">
<source src="http://elrumordelaluz.com/audio/harlemshake.mp3" type="audio/mpeg">
</audio>@import "compass/css3";
@import "compass/reset";
// csshake code starts here
@mixin shake($x, $y, $rot, $name, $steps:10, $opacity:false) {
$r:0deg;
$h:0px;
$v:0px;
$interval: $steps;
$step: 0%;
@keyframes #{$name}{
@while $step < 100% {
@if ($rot != 0deg){ $r : random($rot) - $rot/2;}
@else { $r : 0deg; }
@if ($x != 0px){ $h : random($x) - $x/2; }
@else { $h : 0px; }
@if ($y != 0px){ $v : random($y) - $y/2; }
@else { $v : 0px; }
@if($step == 0%){
#{$step} {
transform: translate(0px, 0px) rotate(0deg);
@if($opacity){
opacity: random(10)*.1;
}
}
} @else {
#{$step} {
transform: translate($h, $v) rotate($r);
@if($opacity){
opacity: random(10)*.1;
}
}
}
$step: $step + $interval;
}
}
}
// reset
$duration:100ms;
$base-name:shake-base;
$iteration:infinite;
$timing:ease-in-out;
$delay:0s;
// The animation
@mixin animation($name, $dur: $duration, $iter: $iteration, $tim: $timing, $del: $delay){
animation-name: $name;
animation-duration: $dur;
animation-iteration-count: $iter;
animation-timing-function: $tim;
animation-delay: $del;
}
.shake {
display: inline-block;
transform-origin: center center;
&:hover {
@include animation($base-name);
}
&.freez {
@include animation($base-name);
&.shake-hard { @include animation(shake-hard); }
&.shake-slow { @include animation(shake-slow, 5s); }
&.shake-little { @include animation(shake-little); }
&.shake-horizontal { @include animation(shake-horizontal); }
&.shake-vertical { @include animation(shake-vertical); }
&.shake-rotate { @include animation(shake-rotate); }
&.shake-opacity { @include animation(shake-opacity, 200ms); }
&.shake-crazy { @include animation(shake-crazy); }
animation-play-state: paused;
&:hover {
animation-play-state: running;
}
}
// Specific shakings
&.shake-hard:hover { @include animation(shake-hard); }
&.shake-slow:hover { @include animation(shake-slow, 5s); }
&.shake-little:hover { @include animation(shake-little); }
&.shake-horizontal:hover { @include animation(shake-horizontal); }
&.shake-vertical:hover { @include animation(shake-vertical); }
&.shake-rotate:hover { @include animation(shake-rotate); }
&.shake-opacity:hover { @include animation(shake-opacity, 200ms); }
&.shake-crazy:hover { @include animation(shake-crazy); }
&.shake-constant {
@include animation($base-name);
&.shake-hard { @include animation(shake-hard); }
&.shake-slow { @include animation(shake-slow, 5s); }
&.shake-little { @include animation(shake-little); }
&.shake-horizontal { @include animation(shake-horizontal); }
&.shake-vertical { @include animation(shake-vertical); }
&.shake-rotate { @include animation(shake-rotate); }
&.shake-opacity { @include animation(shake-opacity, 200ms); }
&.shake-crazy { @include animation(shake-crazy); }
&.hover-stop:hover{
animation-play-state: paused;
}
}
&.shake-delay { @include animation($base-name, $duration, $iteration, $timing, 4s); }
}
// The animations: its names and settings to call from animation mixin
@include shake(5px, 5px, 3deg, 'shake-base', 2);
@include shake(2px, 2px, 1deg, 'shake-little', 2);
@include shake(20px, 20px, 7deg, 'shake-slow', 2);
@include shake(20px, 20px, 7deg, 'shake-hard', 2);
@include shake(20px, 0px, 0deg, 'shake-horizontal', 2);
@include shake(0px, 20px, 0deg, 'shake-vertical', 2);
@include shake(0px, 0px, 15deg, 'shake-rotate', 2);
@include shake(10px, 10px, 5deg, 'shake-opacity', 10, true);
@include shake(40px, 40px, 20deg, 'shake-crazy', 10, true);
// csshake code ends here
// Demo code
@import url(https://fonts.googleapis.com/css?family=Gentium+Basic);
@import url(https://fonts.googleapis.com/css?family=Dancing+Script);
// Colors
$carrot: #ffab52;
$amethyst: #9c55a5;
$scooter: #57cadd;
$dolly: #fff68d;
$shamrock: #2ab8ac;
$pear: #cce033;
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body {
background: $shamrock;
}
header{
width: 100%;
background-color: $carrot;
text-align: center;
line-height: 1.5em;
font-family: 'Gentium Basic', serif;
padding: 5px 0;
font-size: .85em;
opacity: 0;
color:$dolly;
visibility: hidden;
animation:op 15s forwards;
a{
text-decoration: none;
color:rgba(0,0,0,0.7);
&:hover{
color:rgba(0,0,0,0.94);
}
}
}
@keyframes op{
10%,90% {
opacity: 1;
visibility: visible;
}
}
.section {
color:white;
text-align: center;
height: 100%;
padding-top: 20px;
h1 {
font-family: 'Dancing Script', cursive;
font-size: 5em;
}
h4 {
font-size: 1.4em;
font-family: 'Gentium Basic', serif;
}
& > p {
margin-top: 25px;
line-height: 1.5em;
}
a{
color:rgba(0,0,0,0.5);
&:link{
text-decoration: none;
}
&:hover {
color:rgba(0,0,0,0.85);
}
}
footer{
width: 100%;
line-height: 1.3em;
margin-top: 50px;
margin-bottom: 20px;
}
}
.arrow {
position: absolute;
bottom:20px;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid rgba(255,255,255,.3);
cursor:pointer;
&:before {
content: '';
position: absolute;
top: -15px;
left: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
.section.shamrock & { border-top: 10px solid $shamrock; }
.section.carrot &{ border-top: 10px solid $carrot; }
.section.amethyst &{ border-top: 10px solid $amethyst; }
.section.scooter &{ border-top: 10px solid $scooter; }
.section.dolly &{ border-top: 10px solid $dolly; }
.section.shamrock &{ border-top: 10px solid $shamrock; }
.section.pear &{ border-top: 10px solid $pear; }
}
}
// Section
.section {
&.carrot{ background-color: $carrot; }
&.amethyst{ background-color: $amethyst; }
&.scooter{ background-color: $scooter; }
&.dolly{
background-color: $dolly;
color:#2C3E50;
}
&.shamrock{ background-color: $shamrock; }
&.pear{ background-color: $pear; }
}
.color-carrot{ color: $carrot; }
.color-amethyst{ color: $amethyst; }
.color-scooter{ color: $scooter; }
.color-dolly{ color: $dolly; }
.color-shamrock{ color: $shamrock; }
.color-pear{ color: $pear; }
// Previews
.previews {
display: block;
list-style: none;
width: 85%;
margin: 34px auto 0;
li {
display: inline-block;
width: 150px;
padding: 20px;
vertical-align: middle;
}
&.bigs li { width: 250px; }
}
.preview-item {
font-family: 'Dancing Script', cursive;
font-size: 70px;
line-height: 100px;
position: relative;
width: 100px;
height: 100px;
border-radius:15px;
color:rgba(white,0.3);
&.big {
width: 200px;
height: 200px;
font-size: 160px;
line-height: 200px;
}
.section.carrot & { background-color: lighten($carrot,10); }
.section.amethyst &{ background-color: lighten($amethyst,10); }
.section.scooter &{ background-color: lighten($scooter,10); }
.section.dolly &{ background-color: lighten($dolly,10); }
.section.shamrock &{ background-color: lighten($shamrock,10); }
.section.pear &{ background-color: lighten($pear,10); }
margin: auto;
&:after {
content: "";
width: 0;
height: 0;
.section.carrot & { border-bottom: 33px solid $carrot; }
.section.amethyst &{ border-bottom: 33px solid $amethyst }
.section.scooter &{ border-bottom: 33px solid $scooter }
.section.dolly &{ border-bottom: 33px solid $dolly }
.section.shamrock &{ border-bottom: 33px solid $shamrock }
.section.pear &{ border-bottom: 33px solid $pear }
border-left: 33px solid transparent;
position: absolute;
bottom: 0px;
right: 0px;
}
}
.flip {
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 0;
.section.carrot & { border-top: 30px solid lighten($carrot,15);}
.section.amethyst & { border-top: 30px solid lighten($amethyst,15); }
.section.scooter & { border-top: 30px solid lighten($scooter,15); }
.section.dolly & { border-top: 30px solid lighten($dolly,15); }
.section.shamrock & { border-top: 30px solid lighten($shamrock,15); }
.section.pear & { border-top: 30px solid lighten($pear,15); }
border-right: 30px solid transparent;
&:after {
content: "";
width: 0;
height: 0;
border-bottom: 30px solid rgba(0,0,0,0.15);
border-left: 30px solid transparent;
position: absolute;
bottom: 0;
left: -30px;
}
}
.preview-desc {
margin-top: 20px;
font-family: 'Gentium Basic', serif;
}
.dropdown {
position: relative;
margin: 25px auto;
height: 50px;
width: 300px;
&::after {
content: "➘";
position: absolute;
right: 11px;
top: 13px;
color: rgba(0,0,0,0.2);
font-size: 25px;
}
}
.dropdown-select {
position: relative;
width: 100%;
margin: 0;
padding: 6px 8px 6px 10px;
height: 50px;
line-height: 25px;
font-family: 'Dancing Script', cursive;
font-size: 25px;
color: rgba(0,0,0,0.5);
background-color: rgba(255,255,255,0.1);
transition: background-color .3s;
border:none;
outline:none;
&:hover, &:active {
background-color: rgba(255,255,255,0.5);
}
border: 0;
border-radius: 0;
-webkit-appearance: none;
& > option {
margin: 3px;
padding: 6px 8px;
text-shadow: none;
border-radius: 3px;
cursor: pointer;
}
}
.btn {
font-family: 'Dancing Script', cursive;
font-size: 40px;
padding: 10px 20px;
margin-top: 34px;
display: inline-block;
transition: background-color, .3s;
&.carrot{ background-color: $carrot; }
&.amethyst{ background-color: $amethyst; }
&.light:hover{
background-color: rgba(0,0,0,0.1);
}
}
.btn + small {
font-family: 'Gentium Basic', serif;
font-size: 16px;
margin-top: 10px;
display: block
}// nope...
// New! easter egg: add ?harlem=shake as params at the end of the pen url like:
// https://codepen.io/elrumordelaluz/pen/pHKcC?harlem=shake
External CSS
This Pen doesn't use any external CSS resources.