site-accueil-insa/assets/css/baguette.css

212 lines
3.1 KiB
CSS
Raw Normal View History

#baguette {
2018-03-25 13:22:28 +02:00
display: inline-block;
2018-04-24 00:15:37 +02:00
position: relative;
2018-03-25 13:22:28 +02:00
cursor: pointer;
font-size: 32px;
margin: 5px;
2018-04-24 00:15:37 +02:00
height: 40px;
width: 40px;
2018-05-23 17:10:39 +02:00
pointer-events: auto;
2018-03-25 13:22:28 +02:00
}
#bar1 {
position: absolute;
width: 30px;
height: 3px;
background-color: #ffffff;
margin: 4px 0;
transition: 0.3s;
}
#bar2 {
position: relative;
width: 3px;
height: 3px;
background-color: #ffffff;
margin: 4px 0;
transition: 0.3s;
}
#bar3 {
position: relative;
width: 3px;
height: 3px;
background-color: #ffffff;
margin: 4px 0;
transition: 0.3s;
}
#bar4 {
position: relative;
width: 3px;
height: 3px;
background-color: #ffffff;
margin: 4px 0;
transition: 0.3s;
}
#bar5 {
position: relative;
width: 3px;
height: 3px;
background-color: #ffffff;
margin: 4px 0;
transition: 0.3s;
}
#bar6 {
position: relative;
width: 3px;
height: 3px;
background-color: #ffffff;
margin: 4px 0;
transition: 0.3s;
}
#bar7 {
position: relative;
width: 3px;
height: 3px;
background-color: #ffffff;
margin: 4px 0;
transition: 0.3s;
}
#bar8{
position: absolute;
width: 40px;
height: 5px;
background-color: #fff;
margin: 5px 0;
transition: 0.3s;
}
#bar9 {
2018-04-24 00:15:37 +02:00
position: absolute;
width: 40px;
2018-03-25 13:22:28 +02:00
height: 5px;
background-color: #fff;
2018-04-24 00:15:37 +02:00
margin: 5px 0;
transition: 0.3s;
2018-03-25 13:22:28 +02:00
}
2018-04-24 00:15:37 +02:00
#bar1 {
top: 0;
-webkit-transform: rotate(-30deg) translate(-10px, 10px);
transform: rotate(-45deg) translate(-10px, 12px);
2018-04-24 00:15:37 +02:00
}
#bar2 {
top: 0px;
right:-20px;
2018-04-24 00:15:37 +02:00
}
#bar3 {
right: -28px;
bottom:9px;
2018-04-24 00:15:37 +02:00
}
#bar4 {
bottom: 8PX;
left:36px;
}
#bar5 {
bottom: 21px;
left:34px;
}
#bar6 {
bottom: 2px;
left:-100px; /*je ne sais pas encore si je la mets ou pas*/
2018-04-24 00:15:37 +02:00
}
#bar7 {
bottom: 23px;
right:-32px;
2018-04-24 00:15:37 +02:00
}
#bar8{
top:0;
opacity:0;
-webkit-transform: rotate(-45deg) translate(-10px, 10px);
transform: rotate(-45deg) translate(-8px, 8px);
}
2018-03-25 13:22:28 +02:00
#bar9{
bottom:0;
opacity:0;
-webkit-transform: rotate(45deg) translate(-10px, -10px);
transform: rotate(45deg) translate(-10px, -10px);
2019-05-16 18:26:49 +02:00
}
/* Mouse hovers the baguette */
2019-05-16 18:26:49 +02:00
.change-hover #bar2 {
background-color: #254a33;
}
.change-hover #bar3 {
background-color: #254a33;
}
.change-hover #bar4 {
background-color: #254a33;
}
.change-hover #bar5 {
background-color: #254a33;
}
/*.change-hover #bar6 {
background-color: #254a33;
}*/
.change-hover #bar7 {
background-color: #254a33;
2019-05-16 18:26:49 +02:00
}
.change-hover #bar1 {
background-color: #ad9500;
2019-05-16 18:26:49 +02:00
}
.change-hover #bar8 {
background-color: #e9b82f;
}
.change-hover #bar9 {
background-color: #e9b82f;
}
2019-05-16 18:26:49 +02:00
/* Mouse clics the baguette */
2019-05-16 18:26:49 +02:00
.change-clic #bar1 {
opacity:0;
2018-03-25 13:22:28 +02:00
}
.change-clic #bar2 {
2018-04-24 00:15:37 +02:00
opacity: 0;
}
.change-clic #bar3 {
2018-03-25 13:22:28 +02:00
opacity: 0;
}
.change-clic #bar4 {
opacity:0;
}
.change-clic #bar5 {
opacity:0;
}
/*.change-clic #bar6 {
opacity:0;
}*/
.change-clic #bar7 {
opacity:0;
}
.change-clic #bar8 {
opacity : 100;
}
.change-clic #bar9 {
opacity : 100;
2018-03-25 13:22:28 +02:00
}