CSS
.background {
background-color: #ffac24;
background: linear-gradient(top, #ffac24, #8a5600);
background: -o-linear-gradient(top, #ffac24, #8a5600);
background: -moz-linear-gradient(top, #ffac24, #8a5600);
background: -webkit-linear-gradient(top, #ffac24, #8a5600);
background-color: #ffac24;
background: linear-gradient(top, #ffac24, #8a5600);
background: -o-linear-gradient(top, #ffac24, #8a5600);
background: -moz-linear-gradient(top, #ffac24, #8a5600);
background: -webkit-linear-gradient(top, #ffac24, #8a5600);
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
}
body {
overflow: hidden; }
.word {
position: absolute;
top: 40%; left: 50%;
height: 5vw; width: 32vw;
transform: translateX(-50%);
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.lettre {
position: absolute;
top:; left:;
height: 5vw; width: 4vw;
}
.lettre .big-carre {
transform: scale(0.75);
-ms-transform: scale(0.75);
-moz-transform: scale(0.75);
-webkit-transform: scale(0.75);
height: 1vw; width:1vw;
}
.lettre .big-carre .little-carre {
background-color: black;
position: relative;
height: 0.5vw; width: 0.5vw;
}
.lettre .big-carre .little-carre.little-carre-3,
.lettre .big-carre .little-carre.little-carre-4 {
top:-1vw; left:0.5vw;
}
.lettre .big-carre { position: relative; }
.lettre-D .big-carre-6 { top:-1vw; left:+1vw; }
.lettre-D .big-carre-7 { top:-2vw; left:+2vw; }
.lettre-D .big-carre-8 { top:-4vw; left:+3vw; }
.lettre-D .big-carre-9 { top:-6vw; left:+3vw; }
.lettre-D .big-carre-10 { top:-8vw; left:+3vw; }
.lettre-D .big-carre-11 { top:-10vw; left:+2vw; }
.lettre-D .big-carre-12 { top:-11vw; left:+1vw; }
.lettre-I { left: 5vw; }
.lettre-I .big-carre-1,
.lettre-I .big-carre-2,
.lettre-I .big-carre-3,
.lettre-I .big-carre-4,
.lettre-I .big-carre-5 { left:1vw; }
.lettre-I .big-carre-6 { top:-1vw; }
.lettre-I .big-carre-7 { top:-2vw; left:+2vw; }
.lettre-I .big-carre-8 { top:-7vw; }
.lettre-I .big-carre-9 { top:-8vw; left:+2vw; }
.lettre-G { left: 9vw; }
.lettre-G .big-carre-1 { left:1vw;}
.lettre-G .big-carre-2,
.lettre-G .big-carre-3,
.lettre-G .big-carre-4 {}
.lettre-G .big-carre-5 { left:1vw; }
.lettre-G .big-carre-6 { top:-1vw; left:+2vw; }
.lettre-G .big-carre-7 { top:-3vw; left:+3vw; }
.lettre-G .big-carre-8 { top:-5vw; left:+3vw; }
.lettre-G .big-carre-9 { top:-6vw; left:+2vw; }
.lettre-G .big-carre-10 { top:-9vw; left:+2vw; }
.lettre-G .big-carre-11 { top:-10vw;left:+3vw; }
.lettre-I.bis { left: 14vw; }
.lettre-T { left: 18vw; }
.lettre-T .big-carre-2,
.lettre-T .big-carre-3,
.lettre-T .big-carre-4,
.lettre-T .big-carre-5 { left:+1.5vw; }
.lettre-T .big-carre-6 { top:-5vw; left:+1vw; }
.lettre-T .big-carre-7 { top:-6vw; left:+2vw; }
.lettre-T .big-carre-8 { top:-7vw; left:+3vw; }
.lettre-A { left: 22.5vw; }
.lettre-A .big-carre-1 { left:1vw;}
.lettre-A .big-carre-2,
.lettre-A .big-carre-3,
.lettre-A .big-carre-4,
.lettre-A .big-carre-5 {}
.lettre-A .big-carre-6 { top:-3vw; left:+1vw; }
.lettre-A .big-carre-7 { top:-4vw; left:+2vw; }
.lettre-A .big-carre-8 { top:-3vw; left:+3vw; }
.lettre-A .big-carre-9 { top:-5vw; left:+3vw; }
.lettre-A .big-carre-10 { top:-7vw; left:+3vw; }
.lettre-A .big-carre-11 { top:-9vw; left:+3vw; }
.lettre-A .big-carre-12 { top:-11vw; left:+2vw; }
.lettre-L { left: 27.5vw; }
.lettre-L .big-carre-1,
.lettre-L .big-carre-2,
.lettre-L .big-carre-3,
.lettre-L .big-carre-4,
.lettre-L .big-carre-5 {}
.lettre-L .big-carre-6 { top:-1vw; left:+1vw; }
.lettre-L .big-carre-7 { top:-2vw; left:+2vw; }
.lettre-L .big-carre-8 { top:-3vw; left:+3vw; }
/* ANIMATION */
.big-carre, .little-carre {
-webkit-transition: 1.5s cubic-bezier(.17,.67,0,1.34);
-moz-transition: 1.5s cubic-bezier(.17,.67,0,1.34);
-o-transition: 1.5s cubic-bezier(.17,.67,0,1.34);
transition: 1.5s cubic-bezier(.17,.67,0,1.34);
}
.lettre-D:hover .little-carre { background-color: #D136B5; }
.lettre-D:hover .little-carre-1 { transform: translate(-1vw,-4vw); }
.lettre-D:hover .little-carre-2 { transform: translate(-2vw,+3vw); }
.lettre-D:hover .little-carre-3 { transform: translate(+3vw,-2vw); }
.lettre-D:hover .little-carre-4 { transform: translate(+4vw,+1vw); }
.lettre-D:hover .big-carre-1 { transform: translate(-7vw,-7vw); }
.lettre-D:hover .big-carre-2 { transform: translate(-8vw,-6vw); }
.lettre-D:hover .big-carre-3 { transform: translate(-9vw,-4vw); }
.lettre-D:hover .big-carre-4 { transform: translate(-10vw,+3vw); }
.lettre-D:hover .big-carre-5 { transform: translate(-8vw,+5vw); }
.lettre-D:hover .big-carre-6 { transform: translate(-6vw,+7vw); }
.lettre-D:hover .big-carre-7 { transform: translate(-4vw,+6vw); }
.lettre-D:hover .big-carre-8 { transform: translate(+5vw,+5vw); }
.lettre-D:hover .big-carre-9 { transform: translate(+7vw,+3vw); }
.lettre-D:hover .big-carre-10 { transform: translate(+8vw,-4vw); }
.lettre-D:hover .big-carre-11 { transform: translate(+5vw,-7vw); }
.lettre-D:hover .big-carre-12 { transform: translate(+3vw,-10vw); }
.lettre-I:hover .little-carre { background-color: orange }
.lettre-I:hover .little-carre-1 { transform: translate(-1vw,-4vw); }
.lettre-I:hover .little-carre-2 { transform: translate(-2vw,+3vw); }
.lettre-I:hover .little-carre-3 { transform: translate(+3vw,-2vw); }
.lettre-I:hover .little-carre-4 { transform: translate(+4vw,+1vw); }
.lettre-I:hover .big-carre-1 { transform: translate(-3vw,-10vw); }
.lettre-I:hover .big-carre-2 { transform: translate(-5vw,-7vw); }
.lettre-I:hover .big-carre-3 { transform: translate(-8vw,-4vw); }
.lettre-I:hover .big-carre-4 { transform: translate(-10vw,+3vw); }
.lettre-I:hover .big-carre-5 { transform: translate(-8vw,+5vw); }
.lettre-I:hover .big-carre-6 { transform: translate(-6vw,+7vw); }
.lettre-I:hover .big-carre-7 { transform: translate(+4vw,-6vw); }
.lettre-I:hover .big-carre-8 { transform: translate(+9vw,+9vw); }
.lettre-I:hover .big-carre-9 { transform: translate(+7vw,+3vw); }
.lettre-G:hover .little-carre { background-color: cyan; }
.lettre-G:hover .little-carre-1 { transform: translate(-1vw,-4vw); }
.lettre-G:hover .little-carre-2 { transform: translate(-2vw,+3vw); }
.lettre-G:hover .little-carre-3 { transform: translate(+3vw,-2vw); }
.lettre-G:hover .little-carre-4 { transform: translate(+4vw,+1vw); }
.lettre-G:hover .big-carre-1 { transform: translate(-7vw,-7vw); }
.lettre-G:hover .big-carre-2 { transform: translate(-8vw,-6vw); }
.lettre-G:hover .big-carre-3 { transform: translate(-9vw,-4vw); }
.lettre-G:hover .big-carre-4 { transform: translate(-10vw,+3vw); }
.lettre-G:hover .big-carre-5 { transform: translate(-8vw,+5vw); }
.lettre-G:hover .big-carre-6 { transform: translate(-6vw,+7vw); }
.lettre-G:hover .big-carre-7 { transform: translate(-4vw,+6vw); }
.lettre-G:hover .big-carre-8 { transform: translate(+5vw,+5vw); }
.lettre-G:hover .big-carre-9 { transform: translate(+7vw,+3vw); }
.lettre-G:hover .big-carre-10 { transform: translate(+8vw,-4vw); }
.lettre-G:hover .big-carre-11 { transform: translate(+5vw,-7vw); }
.lettre-I.bis:hover .little-carre { background-color: #B83B3B; }
.lettre-I.bis:hover .little-carre-1 { transform: translate()1vw,-4vw);}
.lettre-I.bis:hover .little-carre-2 { transform: translate(-2vw,+3vw); }
.lettre-I.bis:hover .little-carre-3 { transform: translate(+3vw,-2vw); }
.lettre-I.bis:hover .little-carre-4 { transform: translate(+4vw,+1vw); }
.lettre-I.bis:hover .big-carre-1 { transform: translate(-7vw,-7vw); }
.lettre-I.bis:hover .big-carre-2 { transform: translate(-8vw,-6vw); }
.lettre-I.bis:hover .big-carre-3 { transform: translate(-9vw,-4vw); }
.lettre-I.bis:hover .big-carre-4 { transform: translate(-10vw,+3vw); }
.lettre-I.bis:hover .big-carre-5 { transform: translate(-8vw,+5vw); }
.lettre-I.bis:hover .big-carre-6 { transform: translate(-6vw,+7vw); }
.lettre-I.bis:hover .big-carre-7 { transform: translate(+8vw,-4vw); }
.lettre-I.bis:hover .big-carre-8 { transform: translate(+5vw,-7vw); }
.lettre-I.bis:hover .big-carre-9 { transform: translate(+3vw,+10vw); }
.lettre-T:hover .little-carre { background-color: #E0D024; }
.lettre-T:hover .little-carre-1 { transform: translate(-1vw,-4vw); }
.lettre-T:hover .little-carre-2 { transform: translate(-2vw,+3vw); }
.lettre-T:hover .little-carre-3 { transform: translate(+3vw,-2vw); }
.lettre-T:hover .little-carre-4 { transform: translate(+4vw,+1vw); }
.lettre-T:hover .big-carre-1 { transform: translate(-7vw,-7vw); }
.lettre-T:hover .big-carre-2 { transform: translate(-8vw,-6vw); }
.lettre-T:hover .big-carre-3 { transform: translate(-9vw,-4vw); }
.lettre-T:hover .big-carre-4 { transform: translate(-10vw,+3vw); }
.lettre-T:hover .big-carre-5 { transform: translate(+8vw,-5vw); }
.lettre-T:hover .big-carre-6 { transform: translate(+6vw,-7vw); }
.lettre-T:hover .big-carre-7 { transform: translate(-4vw,+6vw); }
.lettre-T:hover .big-carre-8 { transform: translate(+5vw,+5vw); }
.lettre-A:hover .little-carre { background-color: #24C729; }
.lettre-A:hover .little-carre-1 { transform: translate(-1vw,-4vw); }
.lettre-A:hover .little-carre-2 { transform: translate(-2vw,+3vw); }
.lettre-A:hover .little-carre-3 { transform: translate(+3vw,-2vw); }
.lettre-A:hover .little-carre-4 { transform: translate(+4vw,+1vw); }
.lettre-A:hover .big-carre-1 { transform: translate(-7vw,-7vw); }
.lettre-A:hover .big-carre-2 { transform: translate(-8vw,-6vw); }
.lettre-A:hover .big-carre-3 { transform: translate(-9vw,-4vw); }
.lettre-A:hover .big-carre-4 { transform: translate(-10vw,+3vw); }
.lettre-A:hover .big-carre-5 { transform: translate(-8vw,+5vw); }
.lettre-A:hover .big-carre-6 { transform: translate(+6vw,-7vw); }
.lettre-A:hover .big-carre-7 { transform: translate(-4vw,+6vw); }
.lettre-A:hover .big-carre-8 { transform: translate(+5vw,+5vw); }
.lettre-A:hover .big-carre-9 { transform: translate(+7vw,+3vw); }
.lettre-A:hover .big-carre-10 { transform: translate(+8vw,-4vw); }
.lettre-A:hover .big-carre-11 { transform: translate(+5vw,-7vw); }
.lettre-A:hover .big-carre-12 { transform: translate(+3vw,-10vw); }
.lettre-L:hover .little-carre { background-color: #3B36D1; }
.lettre-L:hover .little-carre-1 { transform: translate(-1vw,-4vw); }
.lettre-L:hover .little-carre-2 { transform: translate(-2vw,+3vw); }
.lettre-L:hover .little-carre-3 { transform: translate(+3vw,-2vw); }
.lettre-L:hover .little-carre-4 { transform: translate(+4vw,+1vw); }
.lettre-L:hover .big-carre-1 { transform: translate(-7vw,-7vw); }
.lettre-L:hover .big-carre-2 { transform: translate(-8vw,-6vw); }
.lettre-L:hover .big-carre-3 { transform: translate(-9vw,-4vw); }
.lettre-L:hover .big-carre-4 { transform: translate(-10vw,+3vw); }
.lettre-L:hover .big-carre-5 { transform: translate(+8vw,-5vw); }
.lettre-L:hover .big-carre-6 { transform: translate(+6vw,-7vw); }
.lettre-L:hover .big-carre-7 { transform: translate(-4vw,+6vw); }
.lettre-L:hover .big-carre-8 { transform: translate(+5vw,+5vw); }
1 Response