15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 网页制作中飘动的按钮怎么制作?

网页制作中飘动的按钮怎么制作?

时间:2024-02-16 08:20:01 | 来源:网站运营

时间:2024-02-16 08:20:01 来源:网站运营

网页制作中飘动的按钮怎么制作?:animation css就行了

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> button { position: fixed; top: 0; left: 0; background-color: red; animation-name: MoveAnimation; animation-duration: 20s; animation-fill-mode: both; animation-iteration-count: infinite; animation-play-state: running; animation-direction: alternate; cursor: pointer; } button:hover { animation-play-state: paused; } @keyframes MoveAnimation { from { top: 0; left: 0; } to { top: calc(100% - 30px); left: calc(100% - 50px); } } </style> </head> <body> <button>button</button> </body></html>

关键词:

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭