forked from rebillar/site-accueil-insa
95 lines
1.6 KiB
CSS
95 lines
1.6 KiB
CSS
#baguette {
|
|
display: inline-block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
font-size: 32px;
|
|
margin: 5px;
|
|
height: 40px;
|
|
width: 40px;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
|
|
#shaft, #star1, #star2, #star3, #star4 {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 5px;
|
|
background-color: #fff;
|
|
margin: 5px 0;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
#shaft {
|
|
margin: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
#star1, #star2 {
|
|
width: 20px;
|
|
top: 0;
|
|
}
|
|
|
|
#star3, #star4 {
|
|
width: 20px;
|
|
bottom: 0;
|
|
}
|
|
|
|
#star1, #star3 {
|
|
left: 0;
|
|
}
|
|
|
|
#star2, #star4 {
|
|
right: 0;
|
|
}
|
|
|
|
|
|
/* Mouse hovers the baguette */
|
|
|
|
.change-hover #shaft {
|
|
background-color: #e9b82f;
|
|
transform: translateY(-50%) rotate(-45deg);
|
|
}
|
|
|
|
.change-hover #star1, .change-hover #star2, .change-hover #star3, .change-hover #star4 {
|
|
width: 5px;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.change-hover #star1 {
|
|
background-color: #ff5f5f;
|
|
transform: translateX(15px);
|
|
|
|
}
|
|
|
|
.change-hover #star2 {
|
|
background-color: #7ffd78;
|
|
transform: translate(-10px, -5px);
|
|
}
|
|
|
|
.change-hover #star3 {
|
|
background-color: #fafd78;
|
|
transform: translate(35px, -10px);
|
|
}
|
|
|
|
.change-hover #star4 {
|
|
background-color: #60bdff;
|
|
transform: translate(5px, -20px);
|
|
}
|
|
|
|
/* Mouse clics the baguette */
|
|
|
|
.change-clic #shaft {
|
|
transform: translateY(-50%) rotate(-135deg);
|
|
background-color: #b0120b;
|
|
}
|
|
|
|
.change-clic #star1, .change-clic #star2, .change-clic #star3, .change-clic #star4 {
|
|
left: 0;
|
|
width: 100%;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%) rotate(-45deg);
|
|
background-color: #b0120b;
|
|
}
|