animations/css-hover-effects/style.css at master · memon07/animations · GitHub

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
body
{
	margin: 0;
	padding: 0;
}
.container
{
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: #111;
}
.container .box
{
	position: relative;
	width: 24px;
	height: 24px;
	background: #111;
	float: left;
	border: 1px solid rgba(0,0,0,.2);
	box-sizing: border-box;
	overflow: hidden;
}
.container .box:before
{
	content: '';
	position: absolute;
	top: 6px;
	left: 6px;
	bottom: 6px;
	right: 6px;
	background: #1d1d1d;
	box-shadow: 0 1px 4px rgba(0,0,0,1);
  	transition: 5s ease-in-out;
}
.container .box:hover:before
{
  	transition: 0s ease-in-out;
}
.container .box:nth-child(9n+1):hover:before
{
	background: #f00;
  	transition: 0s ease-in-out;
  	box-shadow: 0 0 3px #f00,
  				0 0 10px #f00;
}
.container .box:nth-child(9n+2):hover:before
{
	background: #0f0;
  	box-shadow: 0 0 3px #0f0,
  				0 0 10px #0f0;
}
.container .box:nth-child(9n+3):hover:before
{
	background: #00f;
  	box-shadow: 0 0 3px #00f,
  				0 0 10px #00f;
}
.container .box:nth-child(9n+4):hover:before
{
	background: #ff0;
  	box-shadow: 0 0 3px #ff0,
  				0 0 10px #ff0;
}
.container .box:nth-child(9n+5):hover:before
{
	background: #0ff;
  	box-shadow: 0 0 3px #0ff,
  				0 0 10px #0ff;
}
.container .box:nth-child(9n+6):hover:before
{
	background: #f0f;
  	box-shadow: 0 0 3px #f0f,
  				0 0 10px #f0f;
}
.container .box:nth-child(9n+7):hover:before
{
	background: #e91e63;
  	box-shadow: 0 0 3px #e91e63,
  				0 0 10px #e91e63;
}
.container .box:nth-child(9n+8):hover:before
{
	background: #00ffad;
  	box-shadow: 0 0 3px #00ffad,
  				0 0 10px #00ffad;
}
.container .box:nth-child(9n+9):hover:before
{
	background: #f45103;
  	box-shadow: 0 0 3px #f45103,
  				0 0 10px #f45103;
}