小编eig*_*lue的帖子

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

所以我需要让一个平面图标像这样浮动。我只需要用 CSS 动画来制作它,不需要 JS。我不知道如何让它向上和向下飞行。我附上了一些我写的代码。

\n\n

html

\n\n

\r\n
\r\n
.button-block {\r\n    display: flex;\r\n    justify-content: center;\r\n}\r\n.block-button-1 {\r\n    text-align: center;\r\n    border-radius: 35px;\r\n    color: white;\r\n    font-size: 21px;\r\n    border: none;\r\n    height: 75px;\r\n    width: 330px;\r\n    background-color: #4b9cdb;\r\n    border-color: #bbdcff;\r\n    box-shadow: 0px 0 15px #bbdcff;\r\n}\r\n\r\n.button-image {\r\n    position: fixed;\r\n    height: 30px;\r\n    width: 30px;\r\n    margin: 24px 0 0 -130px;\r\n    animation: 2s ease infinite;\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<div class="button-block">\r\n        <img class="button-image" src="images/plane.png">\r\n        <button class="block-button-1">\xd0\x97\xd0\xb0\xd0\xb1\xd1\x80\xd0\xbe\xd0\xbd\xd0\xb8\xd1\x80\xd0\xbe\xd0\xb2\xd0\xb0\xd1\x82\xd1\x8c \xd0\xbf\xd0\xbe\xd0\xbb\xd1\x91\xd1\x82</button>\r\n    </div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

html css css-animations

-1
推荐指数
1
解决办法
2万
查看次数

标签 统计

css ×1

css-animations ×1

html ×1