Question

我试图创建一个小测验，使用CSS动画我希望单选按钮圆从其位置向下移动到一个小包络图像。

我让动画按预期工作，因为我不能让动画在每个答案的同一点停止。我认为这是因为每个问题都在屏幕的较低点。

我的问题是，我怎样才能让每个圆圈始终进入信封图形？

我已经加入了Codepen链接，以帮助我更好地了解我到目前为止的情况;我觉得，当你看到它的时候，如果我没有恰当地解释它，你会确切地知道我想要做什么。

https://codepen.io/MauriceMcErlean/pen/yPoJBE

HTML

<div class="ballcont question1">
<div class="question">
    <h2>This is the first Question.</h2>
</div>
<div class="inputselect">
    <form action="#">
        <div class="option1cont">
            <input type="radio" id="test1" name="test1">
            <label for="test1">
                <p>Mars
                    <p>
            </label>
            <div class="ball"></div>
        </div>

        <div class="option2cont">
            <input type="radio" id="test2" name="radio-group">
            <label for="test2">
                <p>The Moon</p>
            </label>
            <div class="ball"></div>
        </div>

        <div class="option3cont">
            <input type="radio" id="test3" name="radio-group">
            <label for="test3">
                <p>Earth</p>
            </label>
            <div class="ball"></div>
        </div>

        <div class="option4cont">
            <input type="radio" id="test4" name="radio-group">
            <label for="test4">
                <p>Venus</p>
            </label>
            <div class="ball"></div>
        </div>

        <a class="nextquestion">Next Question</a>
    </form>
    <div class="basket">
        <i class="fa fa-envelope-open-o" aria-hidden="true"></i>
    </div>
</div>

关键帧的CSS

@keyframes firstball {
  0% {
    transform: translate(0px, 0px);
    background-color:   white;
  }
45% {
    transform: translate(45vw, 0px);
     background-color:  white;
  }
50% {
    transform: translate(45vw, 5vh);
    background: white;
}
60% {
  transform: translate(45vw, 0vh);
    background:white;
}
70% {
   transform: translate(45vw, 5vh);
    background: white;
}
80% {
    transform: translate(45vw, 0vh);
    background:white;
}
90% {
    transform: translate(45vw, 5vh);
    background:white;
}
100% {
    transform: translate(45vw, 90vh);
     background-color:  white;
}
}

@keyframes secondball {
  0% {
    transform: translate(0px, 0px);
    background-color:   white;
  }
45% {
    transform: translate(45vw, 0px);
     background-color:  white;
  }
50% {
    transform: translate(45vw, 5vh);
    background: white;
}
60% {
  transform: translate(45vw, 0vh);
    background:white;
}
70% {
   transform: translate(45vw, 5vh);
    background: white;
}
80% {
    transform: translate(45vw, 0vh);
    background:white;
}
90% {
    transform: translate(45vw, 5vh);
    background:white;
}
100% {
    transform: translate(45vw, 90vh);
     background-color:  white;
}
}

@keyframes thirdball {
  0% {
    transform: translate(0px, 0px);
    background-color:   white;
  }
45% {
    transform: translate(45vw, 0px);
     background-color:  white;
  }
50% {
    transform: translate(45vw, 5vh);
    background: white;
}
60% {
  transform: translate(45vw, 0vh);
    background:white;
}
70% {
   transform: translate(45vw, 5vh);
    background: white;
}
80% {
    transform: translate(45vw, 0vh);
    background:white;
}
90% {
    transform: translate(45vw, 5vh);
    background:white;
}
100% {
    transform: translate(45vw, 90vh);
     background-color:  white;
}
}

@keyframes fourthball {
  0% {
    transform: translate(0px, 0px);
    background-color:   white;
  }
45% {
    transform: translate(45vw, 0px);
     background-color:  white;
  }
50% {
    transform: translate(45vw, 5vh);
    background: white;
}
60% {
  transform: translate(45vw, 0vh);
    background:white;
}
70% {
   transform: translate(45vw, 5vh);
    background: white;
}
80% {
    transform: translate(45vw, 0vh);
    background:white;
}
90% {
    transform: translate(45vw, 5vh);
    background:white;
}
100% {
    transform: translate(45vw, 52vh);
     background-color:  white;
}
}

JS

$( document ).ready(function() {
$("#test1").prop("checked", false);


$("#test1").change(function(){
if($('#test1').is(':checked')){

    $('.option2cont').css('visibility','hidden');
    $('.option3cont').css('visibility','hidden');
    $('.option4cont').css('visibility','hidden');
    $('.option1cont label').css('visibility','hidden');
    $('.option1cont label p').css('visibility','visible');
    $('.option1cont label .ball').css('visibility','visible');

    $('.ball').addClass('question_1_ball_1');

    setTimeout(function(){ 
    $('.nextquestion').addClass('showquestionbutton');
    console.log('1000');
    }, 4005);
    console.log('checked');

} else {
    console.log('not checked');
}
});

$("#test2").change(function(){
if($('#test2').is(':checked')){
    $('.option1cont').css('visibility','hidden');
    $('.option3cont').css('visibility','hidden');
    $('.option4cont').css('visibility','hidden');
    $('.option2cont label').css('visibility','hidden');
    $('.option2cont label p').css('visibility','visible');
    $('.option2cont label .ball').css('visibility','visible');
    $('.ball').addClass('question_1_ball_2');
     console.log('checked');
} else {
    console.log('not checked');
}
});

$("#test3").change(function(){
if($('#test3').is(':checked')){
    $('.option1cont').css('visibility','hidden');
    $('.option2cont').css('visibility','hidden');
    $('.option4cont').css('visibility','hidden');
    $('.option3cont label').css('visibility','hidden');
    $('.option3cont label p').css('visibility','visible');
    $('.option3cont label .ball').css('visibility','visible');

    $('.ball').addClass('question_1_ball_3');
     console.log('checked');
} else {
    console.log('not checked');
}
});

$("#test4").change(function(){
if($('#test4').is(':checked')){
    $('.option1cont').css('visibility','hidden');
    $('.option2cont').css('visibility','hidden');
    $('.option3cont').css('visibility','hidden');
    $('.option4cont label').css('visibility','hidden');
    $('.option4cont label p').css('visibility','visible');
    $('.option4cont label .ball').css('visibility','visible');

    $('.ball').addClass('question_1_ball_4');
     console.log('checked');
} else {
    console.log('not checked');
}
});


});

Answer 1

添加更改.basket类的css：

.basket {
  position: absolute;
  top: 100vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 7rem;
  color: white;
}

如果您需要更多自定义，请告诉我..

我为你更新它（仅限第一球），我认为你可以休息：

更新链接： https://codepen.io/ziruhel/pen/bYrZGW

CSS3将形状设置为屏幕上特定区域的动画

1 个答案: