css实现图标菜单悬浮动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现图标菜单悬浮动画效果代码,每个图标都有自己的个性动画方式。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.1.2.css"> <style> body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: black; background-image: url(//repo.bfw.wiki/bfwrepo/image/6583912b7e5a3.png); background-position: fixed; background-size: cover; overflow: hidden; } a { text-decoration: none; font-family: sans-serif; text-transform: lowercase; font-size: 1rem; } .menu { display: flex; justify-content: space-between; align-items: center; position: relative; width: 500px; height: 60px; padding: 0.5rem 1.5rem; border-radius: 10px; background: rgba(255, 255, 255, 0.65); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 10px; filter: drop-shadow(-7px 7px 5px rgba(255, 255, 255, 0.3)); } i { font-size: 2rem; } .fa-rocket:hover { animation: liftoff 5.5s ease-in 0.3s 1 normal forwards; } .fa-satellite:hover { animation: spin 3.5s linear 0.3s infinite; } .fa-meteor:hover { animation: fall 3.5s cubic-bezier(0.800, 0.115, 0.240, 0.640) 0.3s infinite; } .fa-satellite-dish:hover { animation: lookout 1s cubic-bezier(.79,.14,.15,.86) infinite; transform-origin: bottom left; animation-direction: alternate; } .fa-user-astrona.........完整代码请登录后点击上方下载按钮下载查看
网友评论0