The highlighter effect for November 1st
1
2
3
4
5
6
7
8
// November 1st - Highlighter.
&.highlight{
transition: background-color 0.3s;
&:hover {
background-color: #FCFF72;
}
}
The skewed effect for November 2nd
1
2
3
4
5
6
7
8
9
10
// November 2nd - Skewed.
&.skewed {
transition: background-color 0.3s, transform 0.3s;
display: inline-block;
&:hover {
background-color: #95FC8D;
transform: skewX(-10deg);
}
}
The slide forward effect for November 3rd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// November 3rd - Slide Forward.
&.slide-forward {
position: relative;
&:after {
@extend .cover;
@extend .after;
transform: translateX(-100%);
transition: background-color 0.3s, transform 0.3s;
}
&:hover:after {
background-color: #FD8484;
transform: translateX(0);
}
}
The fill up effect for November 4th
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// November 4th - Fill Up.
&.fill-up {
position: relative;
&:after {
@extend .cover;
@extend .after;
transform: rotateX(-90deg);
transition: background-color 0.3s, transform 0.3s;
}
&:hover:after {
transform: rotateX(0deg);
background-color: #72B4FF;
transition: transform 0.3s;
}
}
The spin in effect for November 5th
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// November 5th - Spin In.
&.spin-in {
transition: background-color 0.3s, transform 0.3s;
position: relative;
&:after {
@extend .cover;
@extend .after;
transform: rotate(0);
transition: background-color 0.3s, transform 0.3s;
}
&:hover:after {
background-color: #FCBF5D;
transform: rotate(180deg);
}
}
The mix 'n match effect for November 6th
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// November 6th - Mix Match.
&.mix-match {
position: relative;
&:hover {
background-color: rgba(0, 255, 10, 0.5);
transition-delay: 0.2s;
}
&:before {
@extend .cover;
@extend .after;
transform: translateY(-100%);
transition: transform 0.3s;
}
&:after {
@extend .cover;
@extend .after;
transform: translateX(-100%);
transition: transform 0.3s;
}
&:hover:before {
background-color: rgba(0, 110, 255, 0.3);
transform: translateX(0);
}
&:hover:after {
background-color: rgba(255, 238, 20, 0.5);
transform: translateX(0);
}
}
The zoom out effect for November 7th
1
2
3
4
5
6
7
8
9
10
11
// November 7th - Fly In.
&.zoom-out {
transition: background-color 0.3s, transform 0.3s;
display: inline-block;
position: relative;
&:hover {
background-color: #c584ff;
transform: perspective(5px) translateZ(-1px);
}
}
The something explicit effect for November 8th
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// November 8th - Censored.
&.censored {
position: relative;
&:after {
@extend .cover;
@extend .after;
transform: rotate(-4deg);
content: 'censored';
display: block;
background-color: black;
color: white;
z-index: 1;
opacity: 1;
transition: opacity 0.3s, transform 0.3s;
}
&:hover:after {
background-color: none;
transform: scale(1.05);
opacity: 0;
}
}
The disappearing effect for November 9th
1
2
3
4
5
6
7
8
9
10
11
// November 9th - Disappearing.
&.disappearing {
position: relative;
opacity: 1;
transition: opacity 0.4s;
&:hover {
opacity: 0;
transition: opacity 1s;
}
}
The roll out effect for November 10th
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// November 10th - Roll Out.
&.roll-out {
position: relative;
&:after,
&:before {
@extend .after;
@extend .cover;
transition: transform 0.4s, background-color 0.6s;
}
&:after {
left: 50%;
transform-origin: 100% 50%;
}
&:before {
right: 50%;
transform-origin: 0 50%;
}
&:hover:after {
transform: rotate(-360deg);
background-color: #A6FF70;
}
&:hover:before {
transform: rotate(360deg);
background-color: #A6FF70;
}
}
The bounce effect for November 11th
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// November 11th - Bounce.
&.bounce {
position: relative;
display: inline-block;
&:hover {
animation-name: bounce;
animation-duration: 0.3s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(.25,1.25,1,.68);
animation-iteration-count: infinite;
background-color: #FFAC59;
}
}
@keyframes bounce {
from {
transform: translateY(0);
}
to {
transform: translateY(-7px);
}
}
The layered effect for November 12th
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// November 12th - Layered.
$mid-layer-color: red;
&.layered {
position: relative;
display: inline-block;
transition: transform 0.5s;
&:hover {
animation-name: layer;
animation-duration: 1.9s;
}
&:hover:after {
transform: rotateY(360deg);
transform-origin: 100% 50%;
transition: transform 1s;
x-index: 2;
}
&:hover:before {
transform: rotateX(360deg);
transform-origin: 50% 100%;
transition: transform 1s;
transition-delay: 1s;
x-index: 5;
}
&:after {
@extend .after;
@extend .cover;
color: $mid-layer-color;
content: attr(data-hover);
}
&:before {
@extend .after;
@extend .cover;
content: attr(data-hover);
color: black;
}
}
@keyframes layer {
0% {
color: black;
}
85% {
color: $mid-layer-color;
}
86% {
color: black;
}
}