替换 html/css 中的元素
Replacing element in html/css
我有以下联系方式：
/* Contact Form */
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
background: var(--bgFormElsFocus);
transform: scale(1.02);
transition: transform 0.2s ease-in-out;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
.shakingErr {
border-color: red;
animation: shake 0.82s forwards;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<!-- start contact section -->
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="https://formspree.io/f/xrg123232jbqpq" id="my-form" method="POST" novalidate>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>
<!-- End Contact Section -->
基本上，我想更改 Submit 按钮并将其替换为此按钮：
var basicTimeline = anime.timeline({
autoplay: false
});
var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
var pathEl = pathEls[i];
var offset = anime.setDashoffset(pathEl);
pathEl.setAttribute("stroke-dashoffset", offset);
}
basicTimeline
.add({
targets: ".text",
duration: 1,
opacity: "0"
})
.add({
targets: ".button",
duration: 1300,
height: 20,
width: 300,
backgroundColor: "#2B2D2F",
border: "0",
borderRadius: 100
})
.add({
targets: ".progress-bar",
duration: 2000,
width: 300,
easing: "linear"
})
.add({
targets: ".button",
width: 0,
duration: 1
})
.add({
targets: ".progress-bar",
width: 80,
height: 80,
delay: 500,
duration: 750,
borderRadius: 80,
backgroundColor: "#71DFBE"
})
.add({
targets: pathEl,
strokeDashoffset: [offset, 0],
duration: 200,
easing: "easeInOutSine"
});
$(".button").click(function() {
basicTimeline.play();
});
$(".text").click(function() {
basicTimeline.play();
});
body {
background: #1D1F20;
}
main {
height: 100vh;
width: 100vw;
}
.button {
background: #2B2D2F;
height: 80px;
width: 200px;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
cursor: pointer;
border-radius: 4px;
}
.text {
font: bold 1.25rem/1 poppins;
color: #71DFBE;
position: absolute;
top: 50%;
transform: translateY(-52%);
left: 0;
right: 0;
}
.progress-bar {
position: absolute;
height: 20px;
width: 0;
right: 0;
top: 50%;
left: 50%;
border-radius: 200px;
transform: translateY(-50%) translateX(-50%);
background: lighten(#2B2D2F, 15%);
}
svg {
width: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left: 50%;
right: 0;
}
.check {
fill: none;
stroke: #FFFFFF;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
<link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<main>
<div class="button">
<div class="text">Submit</div>
</div>
<div class="progress-bar"></div>
<svg x="0px" y="0px"
viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
<path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2"/>
</svg>
</main>
我只想用上面代码中的新按钮替换联系表单按钮。它的大小、宽度和高度应该与我当前在联系表单中的前一个 Submit 按钮完全相同。关于如何完成此任务的任何建议？非常感谢。
代码可能看起来很长，但控制联系表单中按钮的唯一 class 或 属性 是这样的：
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
我的建议是简单地将两者结合起来，在同一个文件的旧 btn 的 html 之后插入新 btn 的 html。
为了让新 btn 的背景在向上或向下缩放 .main 包装器时保持不变，我在新 btn 周围放置了一个名为“.fancy-btn-wrapper”的包装器。
在CSS中，我将表单的位置更改为绝对位置，这样新按钮就可以覆盖在表单的顶部。
然后我使用 transform:translate() 和 transform:scale() 移动按钮以覆盖表单上的按钮。
/* ------------------ */
最后，我使用 Javascript 从表单和新按钮中查询 select 各种元素。 （我对 jQuery 不太熟悉，所以我使用了香草 Javascript 和 jQuery 混合使用）
Javascript 中包含一个名为 buttonCenter() 的函数，可在单击时将新按钮容器的大小调整回全屏。但是，如果您希望按钮在其 svg 动画期间保持较小而不是增大以占据整个屏幕，则可以简单地注释掉对该函数的调用。
您还会注意到我将表单上的 btn 设置为 opacity: 0，以便新按钮是您看到的唯一元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
<!-- <link rel="stylesheet" href="./button.css"> -->
<title>Button</title>
</head>
<body>
<!-- start contact section -->
<style>
/* border-box to simplify margin/padding issues */
* {
box-sizing: border-box;
}
/* new btn styling */
.fancy-btn-wrapper {
background: #1D1F2000;
}
main {
height: 100vh;
width: 100vw;
background: #1D1F2000;
transform: scale(.45) translate(-42%, 95%); /**/
}
.button {
background: #2B2D2F;
height: 80px;
width: 200px;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
cursor: pointer;
border-radius: 4px;
}
.text {
font: bold 1.25rem/1 poppins;
color: #71DFBE;
position: absolute;
top: 50%;
transform: translateY(-52%);
left: 0;
right: 0;
}
.progress-bar {
position: absolute;
height: 20px;
width: 0;
right: 0;
top: 50%;
left: 50%;
border-radius: 200px;
transform: translateY(-50%) translateX(-50%);
background: lighten(#2B2D2F, 15%);
}
svg {
width: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left: 50%;
right: 0;
}
.check {
fill: none;
stroke: #FFFFFF;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Contact Form */
#contact {
position: absolute;
opacity: 1;
z-index: 0;
}
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
background: var(--bgFormElsFocus);
transform: scale(1.02);
transition: transform 0.2s ease-in-out;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
.shakingErr {
border-color: red;
animation: shake 0.82s forwards;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
.form-submit-btn {
opacity: 0;
}
</style>
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" class="myform" action="none" id="my-form" method="POST" novalidate></form>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
<input class="form-submit-btn" type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>
<div class="fancy-btn-wrapper">
<main>
<div class="button">
<div class="text">Submit</div>
</div>
<div class="progress-bar"></div>
<svg x="0px" y="0px"
viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
<path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2"/>
</svg>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var basicTimeline = anime.timeline({
autoplay: false
});
var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
var pathEl = pathEls[i];
var offset = anime.setDashoffset(pathEl);
pathEl.setAttribute("stroke-dashoffset", offset);
}
basicTimeline
.add({
targets: ".text",
duration: 1,
opacity: "0"
})
.add({
targets: ".button",
duration: 1300,
height: 20,
width: 300,
backgroundColor: "#2B2D2F",
border: "0",
borderRadius: 100
})
.add({
targets: ".progress-bar",
duration: 2000,
width: 300,
easing: "linear"
})
.add({
targets: ".button",
width: 0,
duration: 1
})
.add({
targets: ".progress-bar",
width: 80,
height: 80,
delay: 500,
duration: 750,
borderRadius: 80,
backgroundColor: "#71DFBE"
})
.add({
targets: pathEl,
strokeDashoffset: [offset, 0],
duration: 200,
easing: "easeInOutSine"
});
let contactForm = document.getElementById('contact');
let animatedButton = document.querySelector('main');
let form = document.querySelector('.myform');
let formSubmit = document.querySelector('.form-submit-btn');
let newButton = document.querySelector('.button');
function buttonCenter() {
contactForm.style.transition = 'opacity .5s ease-out';
contactForm.style.opacity = '0';
animatedButton.style.transition = 'transform 1s ease, background-color 1s ease';
animatedButton.style.transform = 'translate(0%, 0%) scale(1)';
animatedButton.style.backgroundColor = '#1D1F20'
}
function submitForm() {
formSubmit.submit();
}
function newButtonPressFunction() {
basicTimeline.play();
buttonCenter();
setTimeout(() => {
setAttribute("action","https://formspree.io/f/xrgjbqpq");
submitForm();
},7000)
}
newButton.addEventListener('click', function(){
newButtonPressFunction();
})
$(".button").click(function() {
basicTimeline.play();
});
$(".text").click(function() {
basicTimeline.play();
});
$(".progress-bar").click(function() {
basicTimeline.play();
});
</script>
</body>
</html>
/* ----------------- */
这是解决问题的非常quick/rough 版本。按钮动画中的颜色必须更改以适应新表单背景中较浅的颜色——除非您更喜欢使用 buttonCenter() 函数，它允许新的按钮动画恢复到正常的完整状态屏幕尺寸。
您还需要找到一种方法使新的覆盖按钮在表单内居中，这样当您调整屏幕大小时它就不会四处移动。
如果你想要左边的按钮：
var basicTimeline = anime.timeline({
autoplay: false,
});
var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
var pathEl = pathEls[i];
var offset = anime.setDashoffset(pathEl);
pathEl.setAttribute("stroke-dashoffset", offset);
}
basicTimeline
.add({
targets: ".text",
duration: 1,
opacity: "0"
})
.add({
targets: ".button",
duration: 1300,
height: 20,
width: 81,
backgroundColor: "#717F7E",
border: "0",
zIndex: 0,
borderRadius: 100
})
.add({
targets: ".progress-bar",
duration: 2000,
width: 81,
easing: "linear"
})
.add({
targets: ".button",
width: 0,
duration: 1
})
.add({
targets: ".progress-bar",
width: 40,
height: 39,
delay: 500,
duration: 750,
borderRadius: 80,
backgroundColor: "#71DFBE"
})
.add({
targets: pathEl,
strokeDashoffset: [offset, 0],
duration: 200,
easing: "easeInOutSine",
complete: () =>
setTimeout(() => $('#my-form').submit(), 100)
});
$(".button").click(playButtonAnim);
$(".text").click(playButtonAnim);
function playButtonAnim() {
basicTimeline.play();
}
/* Contact Form */
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
background: var(--bgFormElsFocus);
transform: scale(1.02);
transition: transform 0.2s ease-in-out;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
.shakingErr {
border-color: red;
animation: shake 0.82s forwards;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
/* fancy button styles */
.buttonWrapper {
height: 39px;
width: 81px;
position: relative;
}
.button {
background: #2B2D2F;
height: 39px;
width: 81px;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
cursor: pointer;
border-radius: 4px;
z-index: 10;
}
.text {
font: .8rem/1 poppins;
color: #71DFBE;
position: absolute;
top: 50%;
transform: translateY(-52%);
left: 0;
right: 0;
cursor: pointer;
}
.progress-bar {
position: absolute;
height: 20px;
width: 0;
left: 40px;
top: 50%;
border-radius: 200px;
transform: translateY(-50%) translateX(-50%);
background: black;
}
svg {
width: 15px;
position: absolute;
top: 50%;
left: 40px;
transform: translateY(-50%) translateX(-8px);
}
.check {
fill: none;
stroke: #FFFFFF;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
<link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- start contact section -->
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br />Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="https://formspree.io/f/xrg123232jbqpq" id="my-form" method="POST" novalidate>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
<!-- input type="submit" value="Submit" -->
<input type="submit" value="Submit">
<div class='buttonWrapper'>
<div class="button">
<div class="text">Submit</div>
</div>
<div class="progress-bar"></div>
<svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
<path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
</svg>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
请注意，我是如何提交表格的：
.add({
targets: pathEl,
...
complete: () =>
setTimeout(() => $('#my-form').submit(), 100)
});
如果我没看错你的问题。编辑按钮的最简单方法是将按钮放在 div 中，然后使用 .innerHTML 属性 来编辑其内容。
编辑：
您可以尝试使用 .classList.add("mystyle").
向带有 css-animation (https://www.w3schools.com/css/css3_animations) 的按钮添加 class
我有以下联系方式：
/* Contact Form */
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
background: var(--bgFormElsFocus);
transform: scale(1.02);
transition: transform 0.2s ease-in-out;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
.shakingErr {
border-color: red;
animation: shake 0.82s forwards;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<!-- start contact section -->
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="https://formspree.io/f/xrg123232jbqpq" id="my-form" method="POST" novalidate>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>
<!-- End Contact Section -->
基本上，我想更改 Submit 按钮并将其替换为此按钮：
var basicTimeline = anime.timeline({
autoplay: false
});
var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
var pathEl = pathEls[i];
var offset = anime.setDashoffset(pathEl);
pathEl.setAttribute("stroke-dashoffset", offset);
}
basicTimeline
.add({
targets: ".text",
duration: 1,
opacity: "0"
})
.add({
targets: ".button",
duration: 1300,
height: 20,
width: 300,
backgroundColor: "#2B2D2F",
border: "0",
borderRadius: 100
})
.add({
targets: ".progress-bar",
duration: 2000,
width: 300,
easing: "linear"
})
.add({
targets: ".button",
width: 0,
duration: 1
})
.add({
targets: ".progress-bar",
width: 80,
height: 80,
delay: 500,
duration: 750,
borderRadius: 80,
backgroundColor: "#71DFBE"
})
.add({
targets: pathEl,
strokeDashoffset: [offset, 0],
duration: 200,
easing: "easeInOutSine"
});
$(".button").click(function() {
basicTimeline.play();
});
$(".text").click(function() {
basicTimeline.play();
});
body {
background: #1D1F20;
}
main {
height: 100vh;
width: 100vw;
}
.button {
background: #2B2D2F;
height: 80px;
width: 200px;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
cursor: pointer;
border-radius: 4px;
}
.text {
font: bold 1.25rem/1 poppins;
color: #71DFBE;
position: absolute;
top: 50%;
transform: translateY(-52%);
left: 0;
right: 0;
}
.progress-bar {
position: absolute;
height: 20px;
width: 0;
right: 0;
top: 50%;
left: 50%;
border-radius: 200px;
transform: translateY(-50%) translateX(-50%);
background: lighten(#2B2D2F, 15%);
}
svg {
width: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left: 50%;
right: 0;
}
.check {
fill: none;
stroke: #FFFFFF;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
<link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<main>
<div class="button">
<div class="text">Submit</div>
</div>
<div class="progress-bar"></div>
<svg x="0px" y="0px"
viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
<path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2"/>
</svg>
</main>
我只想用上面代码中的新按钮替换联系表单按钮。它的大小、宽度和高度应该与我当前在联系表单中的前一个 Submit 按钮完全相同。关于如何完成此任务的任何建议？非常感谢。
代码可能看起来很长，但控制联系表单中按钮的唯一 class 或 属性 是这样的：
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
我的建议是简单地将两者结合起来，在同一个文件的旧 btn 的 html 之后插入新 btn 的 html。
为了让新 btn 的背景在向上或向下缩放 .main 包装器时保持不变，我在新 btn 周围放置了一个名为“.fancy-btn-wrapper”的包装器。
在CSS中，我将表单的位置更改为绝对位置，这样新按钮就可以覆盖在表单的顶部。
然后我使用 transform:translate() 和 transform:scale() 移动按钮以覆盖表单上的按钮。
/* ------------------ */
最后，我使用 Javascript 从表单和新按钮中查询 select 各种元素。 （我对 jQuery 不太熟悉，所以我使用了香草 Javascript 和 jQuery 混合使用）
Javascript 中包含一个名为 buttonCenter() 的函数，可在单击时将新按钮容器的大小调整回全屏。但是，如果您希望按钮在其 svg 动画期间保持较小而不是增大以占据整个屏幕，则可以简单地注释掉对该函数的调用。
您还会注意到我将表单上的 btn 设置为 opacity: 0，以便新按钮是您看到的唯一元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
<!-- <link rel="stylesheet" href="./button.css"> -->
<title>Button</title>
</head>
<body>
<!-- start contact section -->
<style>
/* border-box to simplify margin/padding issues */
* {
box-sizing: border-box;
}
/* new btn styling */
.fancy-btn-wrapper {
background: #1D1F2000;
}
main {
height: 100vh;
width: 100vw;
background: #1D1F2000;
transform: scale(.45) translate(-42%, 95%); /**/
}
.button {
background: #2B2D2F;
height: 80px;
width: 200px;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
cursor: pointer;
border-radius: 4px;
}
.text {
font: bold 1.25rem/1 poppins;
color: #71DFBE;
position: absolute;
top: 50%;
transform: translateY(-52%);
left: 0;
right: 0;
}
.progress-bar {
position: absolute;
height: 20px;
width: 0;
right: 0;
top: 50%;
left: 50%;
border-radius: 200px;
transform: translateY(-50%) translateX(-50%);
background: lighten(#2B2D2F, 15%);
}
svg {
width: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left: 50%;
right: 0;
}
.check {
fill: none;
stroke: #FFFFFF;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Contact Form */
#contact {
position: absolute;
opacity: 1;
z-index: 0;
}
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
background: var(--bgFormElsFocus);
transform: scale(1.02);
transition: transform 0.2s ease-in-out;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
.shakingErr {
border-color: red;
animation: shake 0.82s forwards;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
.form-submit-btn {
opacity: 0;
}
</style>
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" class="myform" action="none" id="my-form" method="POST" novalidate></form>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
<input class="form-submit-btn" type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>
<div class="fancy-btn-wrapper">
<main>
<div class="button">
<div class="text">Submit</div>
</div>
<div class="progress-bar"></div>
<svg x="0px" y="0px"
viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
<path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2"/>
</svg>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var basicTimeline = anime.timeline({
autoplay: false
});
var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
var pathEl = pathEls[i];
var offset = anime.setDashoffset(pathEl);
pathEl.setAttribute("stroke-dashoffset", offset);
}
basicTimeline
.add({
targets: ".text",
duration: 1,
opacity: "0"
})
.add({
targets: ".button",
duration: 1300,
height: 20,
width: 300,
backgroundColor: "#2B2D2F",
border: "0",
borderRadius: 100
})
.add({
targets: ".progress-bar",
duration: 2000,
width: 300,
easing: "linear"
})
.add({
targets: ".button",
width: 0,
duration: 1
})
.add({
targets: ".progress-bar",
width: 80,
height: 80,
delay: 500,
duration: 750,
borderRadius: 80,
backgroundColor: "#71DFBE"
})
.add({
targets: pathEl,
strokeDashoffset: [offset, 0],
duration: 200,
easing: "easeInOutSine"
});
let contactForm = document.getElementById('contact');
let animatedButton = document.querySelector('main');
let form = document.querySelector('.myform');
let formSubmit = document.querySelector('.form-submit-btn');
let newButton = document.querySelector('.button');
function buttonCenter() {
contactForm.style.transition = 'opacity .5s ease-out';
contactForm.style.opacity = '0';
animatedButton.style.transition = 'transform 1s ease, background-color 1s ease';
animatedButton.style.transform = 'translate(0%, 0%) scale(1)';
animatedButton.style.backgroundColor = '#1D1F20'
}
function submitForm() {
formSubmit.submit();
}
function newButtonPressFunction() {
basicTimeline.play();
buttonCenter();
setTimeout(() => {
setAttribute("action","https://formspree.io/f/xrgjbqpq");
submitForm();
},7000)
}
newButton.addEventListener('click', function(){
newButtonPressFunction();
})
$(".button").click(function() {
basicTimeline.play();
});
$(".text").click(function() {
basicTimeline.play();
});
$(".progress-bar").click(function() {
basicTimeline.play();
});
</script>
</body>
</html>
/* ----------------- */
这是解决问题的非常quick/rough 版本。按钮动画中的颜色必须更改以适应新表单背景中较浅的颜色——除非您更喜欢使用 buttonCenter() 函数，它允许新的按钮动画恢复到正常的完整状态屏幕尺寸。
您还需要找到一种方法使新的覆盖按钮在表单内居中，这样当您调整屏幕大小时它就不会四处移动。
如果你想要左边的按钮：
var basicTimeline = anime.timeline({
autoplay: false,
});
var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
var pathEl = pathEls[i];
var offset = anime.setDashoffset(pathEl);
pathEl.setAttribute("stroke-dashoffset", offset);
}
basicTimeline
.add({
targets: ".text",
duration: 1,
opacity: "0"
})
.add({
targets: ".button",
duration: 1300,
height: 20,
width: 81,
backgroundColor: "#717F7E",
border: "0",
zIndex: 0,
borderRadius: 100
})
.add({
targets: ".progress-bar",
duration: 2000,
width: 81,
easing: "linear"
})
.add({
targets: ".button",
width: 0,
duration: 1
})
.add({
targets: ".progress-bar",
width: 40,
height: 39,
delay: 500,
duration: 750,
borderRadius: 80,
backgroundColor: "#71DFBE"
})
.add({
targets: pathEl,
strokeDashoffset: [offset, 0],
duration: 200,
easing: "easeInOutSine",
complete: () =>
setTimeout(() => $('#my-form').submit(), 100)
});
$(".button").click(playButtonAnim);
$(".text").click(playButtonAnim);
function playButtonAnim() {
basicTimeline.play();
}
/* Contact Form */
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
background: var(--bgFormElsFocus);
transform: scale(1.02);
transition: transform 0.2s ease-in-out;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
.shakingErr {
border-color: red;
animation: shake 0.82s forwards;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
/* fancy button styles */
.buttonWrapper {
height: 39px;
width: 81px;
position: relative;
}
.button {
background: #2B2D2F;
height: 39px;
width: 81px;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
cursor: pointer;
border-radius: 4px;
z-index: 10;
}
.text {
font: .8rem/1 poppins;
color: #71DFBE;
position: absolute;
top: 50%;
transform: translateY(-52%);
left: 0;
right: 0;
cursor: pointer;
}
.progress-bar {
position: absolute;
height: 20px;
width: 0;
left: 40px;
top: 50%;
border-radius: 200px;
transform: translateY(-50%) translateX(-50%);
background: black;
}
svg {
width: 15px;
position: absolute;
top: 50%;
left: 40px;
transform: translateY(-50%) translateX(-8px);
}
.check {
fill: none;
stroke: #FFFFFF;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
<link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- start contact section -->
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br />Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="https://formspree.io/f/xrg123232jbqpq" id="my-form" method="POST" novalidate>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
<!-- input type="submit" value="Submit" -->
<input type="submit" value="Submit">
<div class='buttonWrapper'>
<div class="button">
<div class="text">Submit</div>
</div>
<div class="progress-bar"></div>
<svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
<path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
</svg>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
请注意，我是如何提交表格的：
.add({
targets: pathEl,
...
complete: () =>
setTimeout(() => $('#my-form').submit(), 100)
});
如果我没看错你的问题。编辑按钮的最简单方法是将按钮放在 div 中，然后使用 .innerHTML 属性 来编辑其内容。
编辑：
您可以尝试使用 .classList.add("mystyle").