L'objectif de cette démonstration est de vous montrer les nouvelles fonctions trigonométriques en CSS, qui s'avèrent très utiles, au travers d'un bouton de partage. Cliquez sur le bouton en bas à droite de la page.
<div class="menu-circulaire">
<input type="checkbox" id="ouverture">
<label class="label-circulaire" for="ouverture" arial-label="Ouvrir menu">
<span></span>
</label>
<ul>
<li><a href="#!"><svg></svg></a>
<li><a href="#!"><svg></svg></a>
<li><a href="#!"><svg></svg></a>
<li><a href="#!"><svg></svg></a>
<li><a href="#!"><svg></svg></a>
<li><a href="#!"><svg></svg></a>
</ul>
</div>
*{box-sizing: border-box}
.menu-circulaire{
--radius: 4rem;
position:fixed;
bottom:var(--radius);
right:var(--radius)
}
.menu-circulaire input {
display: none;
}
.label-circulaire {
border-radius: 50%;
width: 60px;
aspect-ratio: 1;
display: flex;
align-items:center;
justify-content: center;
cursor: pointer;
background: #fff;
z-index:1;
transition: scale 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
scale:1 1;
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
border:1px solid #d9d9d9;
}
.label-circulaire:hover {
scale:1.2 1.2
}
.label-circulaire span{
--taille-burger: 30px;
width: var(--taille-burger);
height: var(--taille-burger);/*aspect-ratio: 1;*/
padding: calc(var(--taille-burger)*.1);
background:
radial-gradient(closest-side at 12.5% 25%,#6753ea 96%,#0000) 0 0/80% 40%,
linear-gradient(#6753ea 50%,#0000 0) top/80% 40% repeat-y;
}
.menu-circulaire input:checked+.label-circulaire span{
background:
radial-gradient(closest-side at 50% 12.5%,#6753ea 96%,#0000) top /20% 80% repeat-y,
radial-gradient(closest-side at 12.5% 50%,#6753ea 96%,#0000) left/80% 20% repeat-x,
conic-gradient(from 90deg at 33% 33%, #0000 90deg, #6753ea 0)100% 100%/60% 60% padding-box content-box;
rotate:45deg;
}
.menu-circulaire input:checked + .label-circulaire {
transition: scale 400ms linear;
scale:.8 .8;
}
.menu-circulaire,
.menu-circulaire ul,
.menu-circulaire ul li,
.menu-circulaire ul li a{
display: grid;
place-content: center;
}
.menu-circulaire > *,
.menu-circulaire ul li{
grid-area: 1/1;
}
.menu-circulaire ul{
list-style-type: none;
margin: 0;
padding: 0
}
.menu-circulaire input:not(:checked) ~ ul li a{
--radius: 0;
--angle: 0;
rotate: 45deg;
}
.menu-circulaire ul li svg{
fill:white;
height:2rem;
width:2rem
}
.menu-circulaire ul li a{
background-color: var(--bg);
translate: calc(cos(var(--angle)) * var(--radius)) calc(sin(var(--angle)) * var(--radius) * -1);
rotate:0deg;
transition: translate .25s var(--delai),rotate .25s var(--delai) ;
border-radius: 50%;
}
.menu-circulaire ul li a{
width: 3rem;
aspect-ratio: 1;
}
.menu-circulaire ul li:nth-child(1) a{
--bg: #1877F2;
--angle: 0deg;
--delai: 0s;
}
.menu-circulaire ul li:nth-child(2) a{
--bg: #FCAF45;
--angle: 60deg;
--delai: 0.1s;
}
.menu-circulaire ul li:nth-child(3) a{
--bg: #1DA1F2;
--angle: 120deg;
--delai: 0.2s;
}
.menu-circulaire ul li:nth-child(4) a{
--bg: #000;
--angle: 180deg;
--delai: 0.3s;
}
.menu-circulaire ul li:nth-child(5) a{
--bg: #0A66C2;
--angle: 240deg;
--delai: 0.4s;
}
.menu-circulaire ul li:nth-child(6) a{
--bg: #CD201F;
--angle: 300deg;
--delai: 0.5s;
}
.menu-circulaire li a:focus-within{
outline: 2px solid black;
}