-
Notifications
You must be signed in to change notification settings - Fork 0
/
css_crediti.css
136 lines (126 loc) · 3.12 KB
/
css_crediti.css
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
/* Exo thin font from Google. */
@import url(https://fonts.googleapis.com/css?family=Exo:100);
/* Animations */
@-webkit-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-moz-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-o-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-webkit-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@-moz-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@-o-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
/* Main styles */
body {
/* img size is 50x50 */
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;
-webkit-animation: bg-scrolling-reverse 0.92s infinite;
/* Safari 4+ */
-moz-animation: bg-scrolling-reverse 0.92s infinite;
/* Fx 5+ */
-o-animation: bg-scrolling-reverse 0.92s infinite;
/* Opera 12+ */
animation: bg-scrolling-reverse 0.92s infinite;
/* IE 10+ */
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
.primatitolo{
animation: float 5s ease-in-out infinite;
}
.titolo{
color: #999;
font: 400 18px/1.5 exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;
text-align: center;
overflow: hidden; /* Ensures the content is not revealed until the animation */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation: typing 2s steps(40, end);
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}
.immagine{
height: 200px;
width: 380px;
display: block;
margin-left: auto;
margin-right: auto;
}
.nomi{
text-align: center;
color: rgb(117, 116, 116);
font: 400 18px/1.5 exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;
}
.nome{
border-radius: 18px;
background-color: rgba(189, 185, 185, 0.74);
width: 400px;
height: 100px;
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
transition: height 0.5s;
-webkit-transition: height 0.5s;
text-align: center;
overflow: hidden;
}
.nome:hover{
height: 170px;
}
.descrizione{
color: black;
}
@keyframes float{
0%{
transform: translateY(0);
}
50%{
transform: translateY(-15px);
}
100%{
transform: translateY(0);
}
}