html - 输入提交元素之前和之后的动画

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，因为您在其中定位绝对元素 :)