Ajustements sur le CSS #10
2 changed files with 29 additions and 5 deletions
12
css/base.css
12
css/base.css
|
|
@ -24,16 +24,18 @@ a {
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
background-color: #413f43;
|
/* background-color: #413f43;*/
|
||||||
background-image: url(../assets/background.jpg);
|
background: #058C9E;
|
||||||
background-repeat: no-repeat;
|
background: radial-gradient(at left top, #058C9E, #BC5180);
|
||||||
background-size: cover;
|
/* background-repeat: no-repeat;
|
||||||
|
background-size: cover; */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
main h1, main h2 {
|
main h1, main h2, main h3 {
|
||||||
font-family: Banquise;
|
font-family: Banquise;
|
||||||
color: white;
|
color: white;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
main h1 {
|
main h1 {
|
||||||
|
|
|
||||||
22
css/drag.css
22
css/drag.css
|
|
@ -17,6 +17,28 @@ main img.draggable {
|
||||||
filter: drop-shadow(5px 3px 2px #000000b7);
|
filter: drop-shadow(5px 3px 2px #000000b7);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.draggable:hover {
|
||||||
|
/* Start the shake animation and make the animation last for 0.5 seconds */
|
||||||
|
animation: shake 3s;
|
||||||
|
|
||||||
|
/* When the animation is finished, start again */
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shake {
|
||||||
|
0% { transform: translate(1px, 1px) rotate(0deg); }
|
||||||
|
10% { transform: translate(-1px, -2px) rotate(-1deg); }
|
||||||
|
20% { transform: translate(-2px, 0px) rotate(1deg); }
|
||||||
|
30% { transform: translate(2px, 2px) rotate(0deg); }
|
||||||
|
40% { transform: translate(1px, -1px) rotate(1deg); }
|
||||||
|
50% { transform: translate(-1px, 2px) rotate(-1deg); }
|
||||||
|
60% { transform: translate(-3px, 1px) rotate(0deg); }
|
||||||
|
70% { transform: translate(2px, 1px) rotate(-1deg); }
|
||||||
|
80% { transform: translate(-1px, -1px) rotate(1deg); }
|
||||||
|
90% { transform: translate(1px, 2px) rotate(0deg); }
|
||||||
|
100% { transform: translate(1px, -2px) rotate(-1deg); }
|
||||||
|
}
|
||||||
|
|
||||||
span.draggable {
|
span.draggable {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
/* text-shadow: 1px 1px black, 0px 1px black, -1px 0px black, -1px -1px black; */
|
/* text-shadow: 1px 1px black, 0px 1px black, -1px 0px black, -1px -1px black; */
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue