50天50个小demo前端
文章平均质量分 57
格式化小拓
大学生
展开
-
day50-Insect Catch Game(捉虫游戏)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday50-Insect Catch Game(捉虫游戏)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2023-07-30 20:54:18 · 381 阅读 · 0 评论 -
day49-Todo List(待办事项列表)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday49-Todo List(待办事项列表)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2023-07-30 20:49:28 · 971 阅读 · 0 评论 -
day48-Random Image Feed(随机图片显示)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday48-Random Image Feed(随机图片显示)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2023-07-30 20:45:16 · 273 阅读 · 0 评论 -
day47-Testimonial Box Switcher(推荐箱切换器-动态进度条自动更新卡片信息)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday47-Testimonial Box Switcher(推荐箱切换器-动态进度条自动更新卡片信息)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wid原创 2023-07-29 20:33:29 · 211 阅读 · 0 评论 -
day46-Quiz App(测试题计分)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday46-Quiz App(测试题计分)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2023-07-29 20:27:57 · 199 阅读 · 0 评论 -
day45-Netflix Mobile Navigation(左边侧边栏动态导航)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday45-Netflix Mobile Navigation(左边侧边栏动态导航)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initia原创 2023-07-28 21:06:01 · 234 阅读 · 0 评论 -
day44-Custom Range Slider(自定义范围滑块)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday44-Custom Range Slider(自定义范围滑块)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=原创 2023-07-28 21:00:29 · 770 阅读 · 0 评论 -
day43-Feedback Ui Design(反馈ui设计)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday43-Feedback Ui Design(反馈ui设计)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2023-07-27 21:11:37 · 249 阅读 · 0 评论 -
day42-Live User Filter(实时用户过滤器)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday42-Live User Filter(实时用户过滤器)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2023-07-27 21:05:12 · 204 阅读 · 0 评论 -
day41-Verify Account Ui(短信验证码小格子输入效果)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday41-Verify Account Ui(短信验证码小格子输入效果)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scal原创 2023-07-26 20:12:25 · 319 阅读 · 0 评论 -
day40-3d Background Boxes(3D背景盒子转换)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday40-3d Background Boxes(3D背景盒子转换)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scal原创 2023-07-26 20:08:18 · 1297 阅读 · 0 评论 -
day39-Password Strength Background(密码强度背景)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday39-Password Strength Background(密码强度背景)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial原创 2023-07-25 20:21:53 · 259 阅读 · 0 评论 -
day38-Mobile Tab Navigation(手机tab栏导航切换)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday38-Mobile Tab Navigation(手机tab栏导航切换)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-sc原创 2023-07-25 20:17:53 · 1061 阅读 · 0 评论 -
day37-Pokedex(神奇宝贝图鉴卡牌展示)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday37-Pokedex(神奇宝贝图鉴卡牌展示)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2023-07-24 21:11:39 · 122 阅读 · 0 评论 -
day36-Hoverboard(悬浮滑板)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday36-Hoverboard(悬浮滑板)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2023-07-24 21:07:04 · 171 阅读 · 0 评论 -
day35-Image Carousel(图片轮播图简易版)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday35-Image Carousel(图片轮播图简易版)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2023-07-23 20:38:10 · 160 阅读 · 0 评论 -
day34-Animated Countdown(动画倒计时)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday34-Animated Countdown(动画倒计时)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2023-07-23 20:32:58 · 146 阅读 · 0 评论 -
day33-Notes App(便利贴笔记)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday33-Notes App(便利贴笔记)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2023-07-22 20:37:15 · 188 阅读 · 0 评论 -
day32-Good Cheap Fast(三选二滚动效果)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday32-Good Cheap Fast(三选二滚动效果)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2023-07-22 20:31:17 · 78 阅读 · 0 评论 -
day31-Password Generator(密码生成器)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday31-Password Generator(密码生成器)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2023-07-21 20:43:21 · 147 阅读 · 0 评论 -
day30-Auto Text Effect(自动文本吐字效果)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday30-Auto Text Effect(自动文本吐字效果)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2023-07-21 20:39:11 · 67 阅读 · 0 评论 -
day29-Double click heart(双击显示爱心并显示次数)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday29-Double click heart(双击显示爱心并显示次数)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scal原创 2023-07-20 20:59:08 · 48 阅读 · 0 评论 -
day28-Github Profiles(获取Github用户概要)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday28-Github Profiles(获取Github用户概要)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=原创 2023-07-20 20:55:11 · 180 阅读 · 0 评论 -
day27-Toast Notification(面包形状的通知)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday27-Toast Notification(面包形状的通知)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2023-07-17 21:35:58 · 45 阅读 · 0 评论 -
day26-Double Vertical Slider(双垂直滑块轮播图)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday26-Double Vertical Slider(双垂直滑块轮播图)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-sca原创 2023-07-17 21:30:34 · 88 阅读 · 0 评论 -
day25-Sticky Navbar(粘性的导航条)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday25-Sticky Navbar(粘性的导航条)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&原创 2023-07-16 20:45:38 · 77 阅读 · 0 评论 -
day24-Content placeholder(内容占位符)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday24-Content placeholder(内容占位符)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2023-07-16 20:41:31 · 87 阅读 · 0 评论 -
day23-Kinetic Loader(动态加载程序)
/</</</</原创 2023-07-15 20:37:58 · 47 阅读 · 0 评论 -
day22-Drawing App(绘图应用程序)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday22-Drawing App(绘图应用程序)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2023-07-15 20:33:50 · 49 阅读 · 0 评论 -
day21-Drag N Drop(拖放图片)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday21-Drag N Drop(拖放图片)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2023-07-14 21:22:29 · 33 阅读 · 0 评论 -
day20-Button Ripple Effect(按钮涟漪效应)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday20-Button Ripple Effect(按钮涟漪效应)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=原创 2023-07-14 21:15:24 · 71 阅读 · 0 评论 -
day19-Theme Clock(主题时钟)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday19-Theme Clock(主题时钟)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2023-07-13 21:38:13 · 61 阅读 · 0 评论 -
day18-Background Slider(背景轮播图)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday18-Background Slider(背景轮播图)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2023-07-13 21:34:26 · 62 阅读 · 0 评论 -
day17-Move App(鼠标悬浮显示电影详情并可搜索)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday17-Move App(鼠标悬浮显示电影详情并可搜索)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2023-07-11 21:26:27 · 42 阅读 · 0 评论 -
day16-Drink Water(喝水)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday16-Drink Water(喝水)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2023-07-10 21:00:35 · 42 阅读 · 0 评论 -
day15-Incrementing counter(平台关注量计数动态显示)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday15-Incrementing counter(平台关注量计数动态显示)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-s原创 2023-07-10 20:56:20 · 47 阅读 · 1 评论 -
day14-Animated Navigation(缩小动画导航)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday14-Animated Navigation(缩小动画导航)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1原创 2023-07-08 20:32:14 · 60 阅读 · 0 评论 -
day13-Random choice picker(随机选择器)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday13-Random choice picker(随机选择器)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=原创 2023-07-08 20:28:23 · 614 阅读 · 0 评论 -
day12-Faq Collapse(问题折叠)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday12-Faq Collapse(问题折叠)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2023-07-07 20:00:45 · 65 阅读 · 1 评论 -
day11-Event Keycodes(事件键码)
50 天学习 50 个项目 - HTMLCSS and JavaScriptday11-Event Keycodes(事件键码)效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g原创 2023-07-07 19:56:51 · 63 阅读 · 1 评论