Question

我有一个输入字段的动画，它位于顶部＆＃39;它的提交不再有效。 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，因为您要将绝对元素放在其中：）

在动画之前和之后输入提交元素

1 个答案: