diff --git a/54-navbar-dark-bouncing/index.html b/54-navbar-dark-bouncing/index.html
new file mode 100644
index 0000000..1625d45
--- /dev/null
+++ b/54-navbar-dark-bouncing/index.html
@@ -0,0 +1,160 @@
+
+
+
+
+
+ 导航条带有跳跃动画
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
index 9c4214b..b32587b 100644
--- a/index.js
+++ b/index.js
@@ -1,197 +1,268 @@
-const uis = [{
- href: "53-screenshot-html2-canvas",
- text: "前端截图功能实现",
- newItem: true
-}, {
- href: "52-day-night-toggle-button",
- text: "白天黑夜切换按钮"
-}, {
- href: "51-css-scroll-based-animation",
- text: "CSS Scroll Based Animation"
-}, {
- href: "50-css-grid-irregular-layout",
- text: "CSS Irregular Layout"
-}, {
- href: "49-html-buit-in-dialog",
- text: "HTML Built-in Dialog"
-}, {
- href: "48-css-clay-morphism",
- text: "CSS Claymorphism"
-}, {
- href: "47-css-custom-scrollbar",
- text: "CSS 自定义滚动条样式"
-}, {
- href: "46-css-aspect-ratio",
- text: "CSS 设置宽高比"
-}, {
- href: "45-URLSearchParams",
- text: "URLSearchParams 使用简介"
-}, {
- href: "44-css-pointer-events",
- text: "CSS 事件穿透"
-}, {
- href: "43-css-gradient-shadow",
- text: "CSS 渐变阴影"
-}, {
- href: "42-clipboard-api",
- text: "剪贴板 API 操作"
-}, {
- href: "41-css-scroll-snap",
- text: "CSS 滚动贴合"
-}, {
- href: "40-multi-column-layout",
- text: "Multi-column 布局"
-}, {
- href: "39-web-animations",
- text: "Web Animations API"
-}, {
- href: "38-horizontal-scrolling",
- text: "横向滚动"
-}, {
- href: "37-container-queries",
- text: "CSS Container Queries"
-}, {
- href: "36-tech-website",
- text: "HTML&CSS 工业风网站"
-}, {
- href: "35-collision-physics",
- text: "JS 碰撞物理引擎"
-}, {
- href: "34-drag-drop-api",
- text: "原生拖拽与拖放操作"
-}, {
- href: "33-text-image-layout",
- text: "图片文字环绕"
-}, {
- href: "32-place-item-center",
- text: "2行代码居中元素"
-}, {
- href: "31-05-wechat-emoji-effect",
- text: "仿微信8.0表情动画"
-}, {
- href: "31-webcomponent-get-started",
- text: "Web Components 入门实战"
-}, {
- href: "01-social-icon-hover-glow-effect",
- text: "社交图标Hover发光特效"
-}, {
- href: "02-login-form-glass-effect",
- text: "登录表单玻璃特效"
-}, {
- href: "03-chatting-ui",
- text: "移动聊天UI实现"
-}, {
- href: "04-svg-text-drawing-effect",
- text: "文本绘制及渐变特效"
-}, {
- href: "05-button-hover-border-drawing-effect",
- text: "按钮Hover边框绘制特效"
-}, {
- href: "06-libra-ui-concept",
- text: "Libra概念UI设计实现"
-}, {
- href: "07-3d-cubic-images",
- text: "3D立方体照片墙"
-}, {
- href: "08-parallax-scrolling",
- text: "纯CSS页面视差滚动特效"
-}, {
- href: "09-japanese-pronunciation",
- text: "CSS翻转特效制作五十音图"
-}, {
- href: "10-navigation-bar",
- text: "4种不同的导航高亮指示"
-}, {
- href: "11-canvas-bar-chart",
- text: "原生Canvas实现柱状图"
-}, {
- href: "12-skill-progress-bar",
- text: "CSS技能进度条表现效果"
-}, {
- href: "14-image-slider",
- text: "图片轮播组件"
-}, {
- href: "15-responsive-navbar",
- text: "响应式全屏导航"
-}, {
- href: "16-svg-animation-truck",
- text: "SVG工厂动画"
-}, {
- href: "17-upload-button",
- text: "动画上传按钮"
-}, {
- href: "18-elsa-magic-effect",
- text: "冰雪奇缘魔法特效"
-}, {
- href: "19-profile-card",
- text: "个人资料卡页面"
-}, {
- href: "20-typewritter-effect",
- text: "打字机效果"
-}, {
- href: "21-range-slider",
- text: "滑动选择器美化"
-}, {
- href: "22-face-reco-mask",
- text: "人脸识别戴口罩"
-}, {
- href: "23-fullwebsite-design-agency",
- text: "整站-科技公司首页"
-}, {
- href: "24-fetch-get-data",
- text: "使用 fetch 加载远程数据"
-}, {
- href: "25-neumorphism-tabs",
- text: "新拟态选项卡"
-}, {
- href: "26-glassmorphism",
- text: "玻璃态特效"
-}, {
- href: "27-glitch-effect",
- text: "赛博朋克按钮"
-}, {
- href: "28-css-colors",
- text: "HSL 颜色表示法"
-}, {
- href: "29-resizable-element",
- text: "可缩放元素"
-}, {
- href: "30-gradient-background-animation",
- text: "渐变背景过渡动画"
-}];
+const uis = [
+ {
+ href: "54-navbar-dark-bouncing",
+ text: "导航条带有跳跃动画",
+ newItem: true,
+ },
+ {
+ href: "53-screenshot-html2-canvas",
+ text: "前端截图功能实现",
+ },
+ {
+ href: "52-day-night-toggle-button",
+ text: "白天黑夜切换按钮",
+ },
+ {
+ href: "51-css-scroll-based-animation",
+ text: "CSS Scroll Based Animation",
+ },
+ {
+ href: "50-css-grid-irregular-layout",
+ text: "CSS Irregular Layout",
+ },
+ {
+ href: "49-html-buit-in-dialog",
+ text: "HTML Built-in Dialog",
+ },
+ {
+ href: "48-css-clay-morphism",
+ text: "CSS Claymorphism",
+ },
+ {
+ href: "47-css-custom-scrollbar",
+ text: "CSS 自定义滚动条样式",
+ },
+ {
+ href: "46-css-aspect-ratio",
+ text: "CSS 设置宽高比",
+ },
+ {
+ href: "45-URLSearchParams",
+ text: "URLSearchParams 使用简介",
+ },
+ {
+ href: "44-css-pointer-events",
+ text: "CSS 事件穿透",
+ },
+ {
+ href: "43-css-gradient-shadow",
+ text: "CSS 渐变阴影",
+ },
+ {
+ href: "42-clipboard-api",
+ text: "剪贴板 API 操作",
+ },
+ {
+ href: "41-css-scroll-snap",
+ text: "CSS 滚动贴合",
+ },
+ {
+ href: "40-multi-column-layout",
+ text: "Multi-column 布局",
+ },
+ {
+ href: "39-web-animations",
+ text: "Web Animations API",
+ },
+ {
+ href: "38-horizontal-scrolling",
+ text: "横向滚动",
+ },
+ {
+ href: "37-container-queries",
+ text: "CSS Container Queries",
+ },
+ {
+ href: "36-tech-website",
+ text: "HTML&CSS 工业风网站",
+ },
+ {
+ href: "35-collision-physics",
+ text: "JS 碰撞物理引擎",
+ },
+ {
+ href: "34-drag-drop-api",
+ text: "原生拖拽与拖放操作",
+ },
+ {
+ href: "33-text-image-layout",
+ text: "图片文字环绕",
+ },
+ {
+ href: "32-place-item-center",
+ text: "2行代码居中元素",
+ },
+ {
+ href: "31-05-wechat-emoji-effect",
+ text: "仿微信8.0表情动画",
+ },
+ {
+ href: "31-webcomponent-get-started",
+ text: "Web Components 入门实战",
+ },
+ {
+ href: "01-social-icon-hover-glow-effect",
+ text: "社交图标Hover发光特效",
+ },
+ {
+ href: "02-login-form-glass-effect",
+ text: "登录表单玻璃特效",
+ },
+ {
+ href: "03-chatting-ui",
+ text: "移动聊天UI实现",
+ },
+ {
+ href: "04-svg-text-drawing-effect",
+ text: "文本绘制及渐变特效",
+ },
+ {
+ href: "05-button-hover-border-drawing-effect",
+ text: "按钮Hover边框绘制特效",
+ },
+ {
+ href: "06-libra-ui-concept",
+ text: "Libra概念UI设计实现",
+ },
+ {
+ href: "07-3d-cubic-images",
+ text: "3D立方体照片墙",
+ },
+ {
+ href: "08-parallax-scrolling",
+ text: "纯CSS页面视差滚动特效",
+ },
+ {
+ href: "09-japanese-pronunciation",
+ text: "CSS翻转特效制作五十音图",
+ },
+ {
+ href: "10-navigation-bar",
+ text: "4种不同的导航高亮指示",
+ },
+ {
+ href: "11-canvas-bar-chart",
+ text: "原生Canvas实现柱状图",
+ },
+ {
+ href: "12-skill-progress-bar",
+ text: "CSS技能进度条表现效果",
+ },
+ {
+ href: "14-image-slider",
+ text: "图片轮播组件",
+ },
+ {
+ href: "15-responsive-navbar",
+ text: "响应式全屏导航",
+ },
+ {
+ href: "16-svg-animation-truck",
+ text: "SVG工厂动画",
+ },
+ {
+ href: "17-upload-button",
+ text: "动画上传按钮",
+ },
+ {
+ href: "18-elsa-magic-effect",
+ text: "冰雪奇缘魔法特效",
+ },
+ {
+ href: "19-profile-card",
+ text: "个人资料卡页面",
+ },
+ {
+ href: "20-typewritter-effect",
+ text: "打字机效果",
+ },
+ {
+ href: "21-range-slider",
+ text: "滑动选择器美化",
+ },
+ {
+ href: "22-face-reco-mask",
+ text: "人脸识别戴口罩",
+ },
+ {
+ href: "23-fullwebsite-design-agency",
+ text: "整站-科技公司首页",
+ },
+ {
+ href: "24-fetch-get-data",
+ text: "使用 fetch 加载远程数据",
+ },
+ {
+ href: "25-neumorphism-tabs",
+ text: "新拟态选项卡",
+ },
+ {
+ href: "26-glassmorphism",
+ text: "玻璃态特效",
+ },
+ {
+ href: "27-glitch-effect",
+ text: "赛博朋克按钮",
+ },
+ {
+ href: "28-css-colors",
+ text: "HSL 颜色表示法",
+ },
+ {
+ href: "29-resizable-element",
+ text: "可缩放元素",
+ },
+ {
+ href: "30-gradient-background-animation",
+ text: "渐变背景过渡动画",
+ },
+];
function UILists() {
return uis.map((ui, i) => {
- return /*#__PURE__*/React.createElement("li", {
- style: {
- position: "relative"
- }
- }, /*#__PURE__*/React.createElement(Link, {
- item: ui,
- key: i
- }));
+ return /*#__PURE__*/ React.createElement(
+ "li",
+ {
+ style: {
+ position: "relative",
+ },
+ },
+ /*#__PURE__*/ React.createElement(Link, {
+ item: ui,
+ key: i,
+ })
+ );
});
}
-function Link({
- item
-}) {
- return /*#__PURE__*/React.createElement("a", {
- href: item.href
- }, item.text, item.newItem ? /*#__PURE__*/React.createElement("span", {
- style: {
- background: "hsl(121deg 100% 50%)",
- borderRadius: 4,
- fontSize: 10,
- padding: "6px 4px",
- color: "#000000",
- fontWeight: 600,
- position: "absolute",
- right: -14,
- top: -6
- }
- }, "\uFF08NEW!\uFF09") : null);
+function Link({ item }) {
+ return /*#__PURE__*/ React.createElement(
+ "a",
+ {
+ href: item.href,
+ },
+ item.text,
+ item.newItem
+ ? /*#__PURE__*/ React.createElement(
+ "span",
+ {
+ style: {
+ background: "hsl(121deg 100% 50%)",
+ borderRadius: 4,
+ fontSize: 10,
+ padding: "6px 4px",
+ color: "#000000",
+ fontWeight: 600,
+ position: "absolute",
+ right: -14,
+ top: -6,
+ },
+ },
+ "\uFF08NEW!\uFF09"
+ )
+ : null
+ );
}
const list = document.querySelector(".list");
-ReactDOM.render( /*#__PURE__*/React.createElement(UILists, null), list);
\ No newline at end of file
+ReactDOM.render(/*#__PURE__*/ React.createElement(UILists, null), list);