输入提交元素的前后动画

Question

我对 输入字段 有一个动画，它保持在“顶部”，并且 提交 不再处于活动状态。 z-index 没有帮助。

有可能让它工作吗？

请注意，aspire-contact 是表单的类。

HTML

<div class="aspire-contact-wrapper">
    <input value="SUBMIT" id="submit-button" class="aspire-contact-submit" type="submit">
</div>

我的 CSS 代码

input.aspire-contact-submit{    
color: #fff;
background-color: transparent;
border: none;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
z-index: 9999;}

.aspire-contact{
position: relative;}

.aspire-contact-wrapper{
border: 2px solid #fff!important;
display: inline-block;
padding: 33px 11px;
border-radius: 50%;
margin-top: 40px;
z-index: 10;}

.aspire-contact-wrapper:before {
content: '';
width: 96px;
height: 96px;
position: absolute;
border: 1px solid #fff;
border-radius: 100%;
left: 50%;
margin-left: -48px;
bottom: 5%;
margin-bottom: -22px;
display: inline-block;
-webkit-animation: doublePulsation 1.9s ease infinite;
animation: doublePulsation 1.9s ease infinite;
z-index: 10;}

@-webkit-keyframes doublePulsation {
 0% {-webkit-transform: scale(1.0, 1.0); opacity: 0.0;}
50% {opacity: 0.55;}
100% {-webkit-transform: scale(1.3, 1.3); opacity: 0.0;} }

@keyframes doublePulsation {
 0% {-webkit-transform: scale(1.0, 1.0); opacity: 0.0;}
50% {opacity: 0.55;}
100% {-webkit-transform: scale(1.3, 1.3); opacity: 0.0;} }

Answer 1

尝试将z-index: -10; 用于.aspire-contact-wrapper:before

并且最好将.aspire-contact-wrapper 设为position:relative，因为您将绝对元素定位在其中:)