您好！我正在尝试复制浮动网站聊天按钮的风格，当用户点击大按钮时，按钮将消失，它将显示一些输入转换为类似这样的聊天框https://codepen.io/neilkalman/pen/VPJpaW
这是小提琴https://jsfiddle.net/Lkagowe7/这就是我迄今为止所尝试的。我还想让它在底部旋转，所以我用了另一根线。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
<title>Web Chat Widget v4</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="display: none" class="form-box " id="myDIV">
<h2 class="login-header"><i class="far fa-comment-dots icon"></i>We'll text you.</h2>
<div class="test">
<form class="formInput">
<div>
<input type="text" required id="test">
<label class="inputLabel">Name</label>
</div>
<div>
<input type="text" id="numberText" required>
<label class="inputLabel">Mobile No.</label>
</div>
<div>
<input type="text" required>
<label class="inputLabel">Message</label>
</div>
<div>
<input type="file" id="inputFile" required><label id="labelFile" for="inputFile">
<i class="far fa-file-image" id="iconPhoto"></i>Choose a Photo</label>
</div>
</div>
<p id="legal">By submitting you agree to receive text messages
at the number provided. Message/data rates apply</p>
<input type="submit" value="Send" id="submitButt" class="active">
</form>
<div class="footer"></div>
</div>
<div class="button">
<div class="icons">
<button class="floating-btn" onclick="myFunction()">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
$('#submitButt').click(function() {
$(this).toggleClass('active');
});
$(function() {
$("#test").focus();
});
document.querySelector('.floating-btn').addEventListener('click', function(e) {
e.target.closest('button').classList.toggle('clicked');
});
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
document.getElementById("test").focus();
}
}
</script>
</body>
</html>
CSS
body {
padding: 0;
margin: 0;
font-family: Graphik,avenir next,avenir,Helvetica,sans-serif;
background-color: white;
}
input[type="file"]{
display: none;
}
.floating-btn {
width: 50px;
height: 50px;
background: #f5af09;
text-decoration: none;
border-radius: 50%;
color: #ffffff;
font-size: 40px;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
right: 20px;
bottom: 20px;
transition: background-color 0.25s ease-out, box-shadow 0.25s ease-out;
border: none;
cursor: pointer;
outline: none;
}
.floating-btn:hover {
box-shadow: 0 4px 5px -2px rgba(0,0,0,.2), 0 7px 10px 1px rgba(0,0,0,.14), 0 2px 16px 1px rgba(0,0,0,.12);
}
.floating-btn.clicked {
background-color: #4169cc;
}
.floating-btn i {
transition: transform 0.25s cubic-bezier(.4, 0, .2, 1);
}
.floating-btn.clicked i {
transform: rotate(315deg);
}
#labelFile{
color: white;
height: 30px;
width: 125px;
background-color: #f5af09;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-weight: bold;
border-radius: 5px;
}
#legal{
margin: 16px auto;
text-align: center;
color: #ccc;
font-size: 10px;
max-width: 25em;
line-height: 1.0;
letter-spacing: .2px;
}
#inputFile{
border: 0 !important;
margin-bottom: 10px;
}
.icon{
margin-right: 8px;
opacity: 0.5;
font-size: 21px;
}
#iconPhoto{
margin-right: 8px;
opacity: 0.7;
font-size: 18px;
}
.form-box {
margin: 16px auto;
font-size: 16px;
border-radius: 9px;
position: absolute;
top: 47%;
left: 85%;
transform: translate(-50%,-50%);
width: 340px;
background: #fff;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
box-sizing: border-box;
background-color: #f5f5f7;
}
.test{
background-color: #fff;
padding-top: 25px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 27px;
margin-left: 37px;
margin-right: 37px;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 20px;
}
.login-header {
border-top-left-radius: 9px;
border-top-right-radius: 9px;
background: #4169cc;
padding: 23px;
font-size: 16px;
font-weight: bold;
text-align: center;
color: #fff;
text-align: center;
margin-top: 0;
margin-bottom: 0;
}
.form-box input{
padding: 10px 0;
margin-bottom: 30px;
}
.form-box textarea{
height: 80px;
padding: 10px 0;
margin-bottom: 20px;
}
.form-box input,.form-box textarea{
width: 100%;
box-shadow: none;
outline: none;
box-sizing: border-box;
border: none;
cursor: text;
border-bottom: 1px solid #dcdcdc;
transition: .3s width ease-in-out;
margin: none;
}
.form-box input[type="submit"]{
border-bottom: none;
cursor: pointer;
background: #4169cc;
color: #fff;
margin-bottom: 0;
}
.form-box form div{
position: relative;
}
#submitButt{
width: 30%;
margin-left: 121px;
padding-top: 14px;
padding-bottom: 14px;
font-weight: bold;
border-radius: 5px;
margin-bottom: 15px;
opacity: 10;
}
.active{
opacity: 0.7 !important;
}
.form-box form div .inputLabel{
position: absolute;
left: -1px;
top: 8px;
pointer-events: none;
color: #999;
transition: .2s ease-in-out;
font-size: 14px;
}
.form-box input:focus ~ .inputLabel,
.form-box textarea:focus ~ .inputLabel,
.form-box input:valid ~ .inputLabel,
.form-box textarea:valid ~ .inputLabel{
top: -12px;
left: 0;
color: #4169cc;
font-size: 10px;
font-weight: bold;
transition: .2s ease-in-out;
}
.form-box input:focus,
.form-box textarea:focus,
.form-box textarea:valid,
.form-box input:valid{
width: 100%;
border-bottom: 2px solid rgb(76, 118, 224);
}
.footer{
margin-bottom: 0;
min-height: 25px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
background: #fff;
margin-bottom: 0px;
border-radius: 0 0 6px 6px;
}
这里有一种方法。我修改了你的小提琴以使其工作。这与示例不完全一样，但它确实展示了如何在聊天框内外设置动画。
如果使用displayCss属性来隐藏和显示，则无法真正设置动画。所以你需要使用不透明度、高度和宽度来缩小、隐藏和显示。
.form-box {
margin: 16px auto;
font-size: 16px;
border-radius: 9px;
position: fixed;
opacity: 0;
overflow: hidden;
bottom: 0;
right: 10px;
transform: translate(-50%,-50%);
width: 30px;
height: 30px;
background: #fff;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
box-sizing: border-box;
background-color: #f5f5f7;
transition: all .25s ease-in-out;
}
.form-box.open {
transform: translate(10px, -70px);
height: 490px;
width: 366px;
opacity: 1;
}
如果你不使用样式来隐藏和显示，你需要应用一个类，所以下面是我对myFunction函数所做的更改：
if (x.classList.contains('open')) {
x.classList.remove("open");
} else {
x.classList.add("open");
document.getElementById("test").focus();
}