<div class="content playing">
<h1>Playful Oranges</h1>
<div class="oranges">
<img src="https://i.imgur.com/7MOaQfi.png" />
<img src="https://i.imgur.com/7MOaQfi.png" />
<img src="https://i.imgur.com/7MOaQfi.png" />
<img src="https://i.imgur.com/7MOaQfi.png" />
</div>
</div>
@import "compass/css3";
@mixin rainbow($position: top) {
@include background( linear-gradient($position, red 5%
, orange 20%
, yellow 35%
, green 50%
, blue 70%
, purple 100%));
}
html {
height: 100%;
}
body {
//@include background(linear-gradient(bottom, white 50%, orange));
@include rainbow(top left);
height: 100%;
}
h1 {
margin: 10px 0;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 0.1em;
text-shadow: 1px 1px 3px rgba(black, 0.65);
color: orange;
}
.content {
margin: 20px auto;
width: 90%;
text-align: center;
padding: 0px;
//border-radius: 10%;
border: 30px solid rgba(white, .75);
@include background(linear-gradient( top left, #BADA55, white 30%));
}
@keyframes spin{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes sway{
0% {
transform: translateY(0px);
}
50% {
transform: translateX(50px) rotate(15deg);
}
100% {
transform: translateY(10px);
}
}
@keyframes shake{
0% {
transform: translateY(0px);
}
33% {
transform: translateX(10px) rotate(5deg);
}
66% {
transform: translateX(10px) rotate(-5deg);
}
100% {
transform: translateY(-5px);
}
}
.oranges img {
display: inline-block;
}
.playing img:first-of-type{
animation: spin 5s infinite cubic-bezier(.87,.12,.21,.95);
}
.playing img:nth-of-type(2){
animation: sway 1s infinite alternate ease-in-out;
}
.playing img:nth-of-type(3){
animation: shake steps(2) 500ms infinite both;
}
.playing img:last-of-type{
animation: spin 1s steps(8) infinite forwards .5s;
}
View Compiled
$(document).ready(function() {
$(".oranges img").click(function() {
$("body").toggleClass("playing");
});
});
This Pen doesn't use any external CSS resources.