Пишем нашу разметку:
Пишем стиль:
И немного динамики:
Смотрим наш результат:
HTML:
<body>
<div class="wrapper">
<div class="msg-box" id="msg">
<div class="items items1">
<i class="material-icons">camera_alt</i> <i class="mss">CAMERA</i>
</div>
<div class="items items2">
<i class="material-icons">filter_none</i> <i class="mss">FILES</i>
</div>
<div class="items items3">
<i class="material-icons">mic</i> <i class="mss">RECORD</i>
</div>
<div class="items items4">
<i class="material-icons">chat_bubble_outline</i>
<i class="mss">NEW EMAIL</i>
</div>
</div>
<div class="button" id="btn">
<div class="btn-wrapper">
<span class="one btn" id="plus">+</span>
<span class="two btn" id="sendmsg"
><i class="material-icons">send</i></span
>
</div>
<div class="effect"></div>
</div>
</div>
</body>
CSS:
body {
background: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
* {
padding: 0;
margin: 0;
}
.msg-box {
border-radius: 50%;
background: white;
overflow: hidden;
height: 20px;
width: 20px;
position: absolute;
top: 50%;
left: 50%;
transition: all 0.7s ease-in-out;
transform: translate(-50%, -50%);
will-change: contents;
display: grid;
grid-gap: 15px;
color: rgb(75, 72, 72);
box-sizing: border-box;
padding: 10px;
}
i {
transform: translateY(4px);
}
.wrapper {
width: 400px;
height: 400px;
position: relative;
box-shadow: 1px 4px 8px black;
background: linear-gradient(to bottom right, #f3bcf0, #fa6c97);
}
.button {
border-radius: 50%;
background: white;
cursor:pointer;
height: 50px;
width: 50px;
position: absolute;
top: 50%;
transition: all 0.5s cubic-bezier(0.63, 0.18, 0.83, 0.67);
z-index: 3;
left: 50%;
font-size: 25px;
font-weight: bolder;
color: rgb(51, 48, 48);
transform: translate(-50%, -50%);
box-shadow: 4px 3px 4px rgba(48, 47, 47, 0.459);
}
.items:hover {
color: black;
}
.btn-wrapper {
width: 100%;
height: 100%;
position: relative;
}
span {
display: block;
position: absolute;
top: 50%;
left: 50%;
transition: all 1s;
}
i {
font-weight: normal;
font-style: normal;
}
.one {
top: 100%;
left: -130%;
transition: top 0.5s, left 0.5s, transform 0.7s linear 0.1s;
font-weight: bolder;
font-size: 40px;
transform: translate(-50%, -50%) rotate(0deg) scale(0);
transform-origin: center;
}
.one-move {
top: 50%;
transition: top 1s, left 1s, transform 0.4s ease 0.5s;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg) scale(1);
}
.two {
transform: translate(-50%, -50%) rotate(-45deg);
transform-origin: center;
transition: all 0.8s ease;
}
.send {
top: 30%;
left: 130%;
}
.move {
left: 50%;
transform: translate(-50%, -50%);
top: 83%;
}
.resize {
width: 200px;
height: 200px;
border-radius: 10px;
box-shadow: 5px 2px 10px black;
}
i.mss {
border-bottom: 1px solid gainsboro;
margin-left: 5px;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
color: rgb(122, 119, 119);
transform: translateY(15px);
display: inline-block;
opacity: 0;
transition: all 0.5s ease-in-out 0.4s;
}
i.mss-show {
opacity: 1;
transform: translateY(0px);
}
.items {
opacity: 0;
transition: opacity 0.3s;
}
.itmshow {
opacity: 1;
}
.btn-wrapper {
overflow: hidden;
}
.effect {
position: absolute;
transform: translate(-50%, -50%) scale(0);
top: 50%;
left: 50%;
border: 4px solid rgba(255, 255, 255, 0.37);
height: 100%;
border-radius: 50%;
width: 100%;
transition: opacity 0.5s ease 0.4s, transform 0.5s;
}
.effectshow {
transform: translate(-50%, -50%) scale(1.3);
opacity: 0;
}
JavaScript:
let btnOne = document.getElementById("btn");
let msg = document.getElementById("msg");
let itms = document.getElementsByClassName("items");
let snd = document.getElementById("sendmsg");
let close = document.getElementById("plus");
let dialogText = document.getElementsByClassName("mss");
let effct = document.querySelector(".effect");
console.log(dialogText);
btnOne.addEventListener("click", function() {
btnOne.classList.toggle("move");
msg.classList.toggle("resize");
snd.classList.toggle("send");
close.classList.toggle("one-move");
effct.classList.toggle("effectshow");
for (let i = 0; i <= dialogText.length; i++) {
dialogText[i].classList.toggle("mss-show");
itms[i].classList.toggle("itmshow");
}
});