Question

因此，我需要使飞机图标像this一样浮动。我只需要用CSS动画制作，不需要JS。我不知道如何使它向上和向下飞行。我附上了我写的一些代码。

html

.button-block {
    display: flex;
    justify-content: center;
}
.block-button-1 {
    text-align: center;
    border-radius: 35px;
    color: white;
    font-size: 21px;
    border: none;
    height: 75px;
    width: 330px;
    background-color: #4b9cdb;
    border-color: #bbdcff;
    box-shadow: 0px 0 15px #bbdcff;
}

.button-image {
    position: fixed;
    height: 30px;
    width: 30px;
    margin: 24px 0 0 -130px;
    animation: 2s ease infinite;
}

<div class="button-block">
        <img class="button-image" src="images/plane.png">
        <button class="block-button-1">Забронировать полёт</button>
    </div>

Answer 1

您可以通过添加动画来上下移动图像的Y位置来完成您想做的事情：

@keyframes updown {
  0% {
    transform: translateY(-100%);
  }

  50% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(-100%);
  }
}

在图像元素CSS上：

.button-image {
    ...
    animation: updown 2s ease infinite;
}

这是有效的代码段：

.button-block {
    display: flex;
    justify-content: center;
}
.block-button-1 {
    text-align: center;
    border-radius: 35px;
    color: white;
    font-size: 21px;
    border: none;
    height: 75px;
    width: 330px;
    background-color: #4b9cdb;
    border-color: #bbdcff;
    box-shadow: 0px 0 15px #bbdcff;
}

.button-image {
    position: fixed;
    height: 30px;
    width: 30px;
    margin: 24px 0 0 -130px;
    animation: updown 2s ease infinite;
}

@keyframes updown {
  0% {
    transform: translateY(-100%);
  }

  50% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(-100%);
  }
}

<div class="button-block">
        <img class="button-image" src="images/plane.png">
        <button class="block-button-1">Забронировать полёт</button>
    </div>

您可以通过更改translateY的值来调整上/下移动量。

Answer 2

CSS 代码可以是这样的：

.button-container{
            display         :flex;
            justify-content :center;
            align-items     :center;
        }

        .button-block{
            align-self :center;
            position   :relative;
        }

        .block-button-1{
            text-align       :center;
            border-radius    :35px;
            color            :white;
            font-size        :21px;
            height           :75px;
            width            :330px;
            background-color :#4b9cdb;
            border           :none #bbdcff;
            box-shadow       :0 0 15px #bbdcff;
        }

        .button-image{
            position  :absolute;
            height    :30px;
            width     :30px;
            top       :10px;
            left      :24px;
            animation :up_down 2s ease infinite;
        }

        @keyframes up_down{
            0%{
                top :10px;
            }
            50%{
                top :24px;
            }
            100%{
                top :10px;
            }
        }

        @-webkit-keyframes up_down{
            0%{
                top :10px;
            }
            50%{
                top :24px;
            }
            100%{
                top :10px;
            }
        }

        @-khtml-keyframes up_down{
            0%{
                top :10px;
            }
            50%{
                top :24px;
            }
            100%{
                top :10px;
            }
        }

html 代码如下所示：

 <div class="button-container">
        <div class="button-block">
            <img class="button-image" src="images/plane.png">
            <button class="block-button-1">Забронировать полёт</button>

        </div>
    </div>

 .button-container{
                display         :flex;
                justify-content :center;
                align-items     :center;
            }

            .button-block{
                align-self :center;
                position   :relative;
            }

            .block-button-1{
                text-align       :center;
                border-radius    :35px;
                color            :white;
                font-size        :21px;
                height           :75px;
                width            :330px;
                background-color :#4b9cdb;
                border           :none #bbdcff;
                box-shadow       :0 0 15px #bbdcff;
            }

            .button-image{
                position  :absolute;
                height    :30px;
                width     :30px;
                top       :10px;
                left      :24px;
                animation :up_down 2s ease infinite;
            }

            @keyframes up_down{
                0%{
                    top :10px;
                }
                50%{
                    top :24px;
                }
                100%{
                    top :10px;
                }
            }

            @-webkit-keyframes up_down{
                0%{
                    top :10px;
                }
                50%{
                    top :24px;
                }
                100%{
                    top :10px;
                }
            }

            @-khtml-keyframes up_down{
                0%{
                    top :10px;
                }
                50%{
                    top :24px;
                }
                100%{
                    top :10px;
                }
            }

 <div class="button-container">
            <div class="button-block">
                <img class="button-image" src="images/plane.png">
                <button class="block-button-1">Забронировать полёт</button>

            </div>
        </div>

Answer 3

你在这里

.floating {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}

<div class="floating"
     style="height: 50px; width: 50px; background: rgb(200,200,200);">
</div>

替换图片

Answer 4

在图标上应用以下CSS代码：

animation: bounce 1s infinite;
-webkit-animation: bounce 1s infinite;
-moz-animation: bounce 1s infinite;
-o-animation: bounce 1s infinite;

如何使用CSS动画使图标上下移动

4 个答案: