50 天学习 50 个项目 - HTML/CSS and JavaScript

工具资源分享 lv-5
·  阅读 2723

👍 👍 👍 项目源代码，点击【Github 原文链接】

所有项目如下所示：

#项目在线演示
01Expanding CardsLive Demo
02Progress StepsLive Demo
03Rotating Navigation AnimationLive Demo
04Hidden Search WidgetLive Demo
05Blurry LoadingLive Demo
06Scroll AnimationLive Demo
07Split Landing PageLive Demo
08Form WaveLive Demo
09Sound BoardLive Demo
10Dad JokesLive Demo
11Event KeycodesLive Demo
12Faq CollapseLive Demo
13Random Choice PickerLive Demo
14Animated NavigationLive Demo
15Incrementing CounterLive Demo
16Drink WaterLive Demo
17Movie AppLive Demo
18Background SliderLive Demo
19Theme ClockLive Demo
20Button Ripple EffectLive Demo
21Drag N DropLive Demo
22Drawing AppLive Demo
23Kinetic LoaderLive Demo
24Content PlaceholderLive Demo
25Sticky NavbarLive Demo
26Double Vertical SliderLive Demo
27Toast NotificationLive Demo
28Github ProfilesLive Demo
29Double Click HeartLive Demo
30Auto Text EffectLive Demo
31Password GeneratorLive Demo
32Good Cheap FastLive Demo
33Notes AppLive Demo
34Animated CountdownLive Demo
35Image CarouselLive Demo
36HoverboardLive Demo
37PokedexLive Demo
38Mobile Tab NavigationLive Demo
39Password Strength BackgroundLive Demo
403d Background BoxesLive Demo
41Verify Account UiLive Demo
42Live User FilterLive Demo
43Feedback Ui DesignLive Demo
44Custom Range SliderLive Demo
45Netflix Mobile NavigationLive Demo
46Quiz AppLive Demo
47Testimonial Box SwitcherLive Demo
48Random Image FeedLive Demo
49Todo ListLive Demo
50Insect Catch GameLive Demo
分类：
前端
标签：
前端JavaScriptCSS
相关推荐
  •
    1月前
    前端 CSS JavaScript
    现代 CSS 高阶技巧，完美的波浪进度条效果！
    我的新的专栏 -- 现代 CSS 与 Web 动画解决方案。 将专注于实现复杂布局，兼容设备差异，制作酷炫动画，制作复杂交互，提升可访问性及构建奇思妙想效果等方面的内容。 在兼顾基础概述的同时，注重对
    • 1.8w
    • 25
    现代 CSS 高阶技巧，完美的波浪进度条效果！
  •
    8月前
    前端 CSS JavaScript
    CSS 穿墙术！太强了
    今天给大家分享 CSS 中一个神奇的属性：filter，为什么说它神奇？正如我标题所说的，我突然发现它能帮我们轻松实现 穿墙特效，类似这种的👇 看起来就跟我们在科幻电影里看到的经过一
    • 1.7w
    • 28
    CSS 穿墙术！太强了
  •
    3年前
    JavaScript ECMAScript 6
    我从来不理解JavaScript闭包，直到有人这样向我解释它
    大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。 正如标题所述，JavaScript闭包对我来说一直有点神秘,看过很多闭包的文章，在工作使用过闭包，有时甚至在项目中使用闭包，但我确实是这是在使用闭包的知识。 最近看到的一些文章，终于，有人用于一种让我明白方式对…
    • 10.8w
    • 248
  • 3年前
    CSS
    请收下这72个炫酷的CSS技巧
    CSS是一门很特殊的语言，不像一般的编程语言那样需要抽象的思维和严密的逻辑，它真正需要的是想象力——将你脑中所想的意象用代码来表现出来。那么意象又是如何产生的呢？最常用的方法就是探索和观察。举个例子，笔者平时热爱看番，每看到有意思的场景画面总会下意识地记录下来，这对动画创作会非…
    • 6.5w
    • 93
    请收下这72个炫酷的CSS技巧
  •
    5月前
    前端 JavaScript CSS
    😈当一个摆子前端太闲的时候会做什么
    今日周二，在下与诸位同道中人一起来讨论一个话题：当一个前端空闲的时候会做些什么。 🤯是独自深耕论坛，钻研学术？ 👯还是三两闲聊打趣，坐而论道？ 💆‍♂️亦或是闭目养神，神游天地？
    • 8.8w
    • 232
    😈当一个摆子前端太闲的时候会做什么
  •
    4月前
    前端 JavaScript CSS
    为什么B站的弹幕可以不挡人物
    那天在B站看视频的时候偶然发现当字幕遇到人物的时候就被裁切了，不会挡住人物，觉得很神奇，于是决定一探究竟。
    • 15.4w
    • 204
    为什么B站的弹幕可以不挡人物
  •
    2年前
    GitHub JavaScript
    推荐 12 个学习前端必备的神仙级工具类项目与网站
    猫哥是一个常年混迹在 GitHub 上的猫星人，所以发现了不少好的前端开源项目、常用技巧，在此分享给大家。 已经推荐了 面试项目、css 奇技淫巧项目、代码规范项目、数据结构与算法项目、JavaScript 奇技淫巧项目、前端必备在线工具 等专题的近 100 个优秀项目了。 以…
    • 3.0w
    • 27
    推荐 12 个学习前端必备的神仙级工具类项目与网站
  •
    1月前
    前端 CSS JavaScript
    开局一张图，构建神奇的 CSS 效果
    假设，我们有这样一张 Gif 图： 利用 CSS，我们尝试来搞一些事情。 图片的 Glitch Art 风 在这篇文章中 --CSS 故障艺术，我们介绍了利用混合模式制作一种晕眩感觉的视觉效果。有点类
    • 1.4w
    • 53
    开局一张图，构建神奇的 CSS 效果
  •
    7月前
    前端 JavaScript CSS
    使用 Three.js 实现"雪糕"地球，让地球也凉爽一夏
    使用 Three.js 实现雪糕地球，给地球母亲也来凉爽一番，不仅是整活，也是一种反思和警示。文章内详细的讲解了雪糕地球的实现步骤，可以作为Three学习的一个项目。
    • 2.0w
    • 77
    使用 Three.js 实现"雪糕"地球，让地球也凉爽一夏
  •
    1年前
    前端 JavaScript CSS
    30个CSS资源大推荐
    本文将爆肝推荐近两年来，最“火爆”、最前沿的4个预/后处理、12个CSS框架以及14个CSS-in-JS库，助你成为CSS大师👨🏻‍🦲
    • 1.3w
    • 19
    30个CSS资源大推荐
  •
    5月前
    前端 JavaScript CSS
    使用前端技术实现静态图片局部流动效果 🌊
    如果你有玩过 🎮 《王者荣耀》、《阴阳师》 等手游，一定注意到过它的启动动画、皮肤立绘卡片等场景，经常采用静态底图加局部液态流动效果的简单动画，本文使用前端开发技术，结合 SVG 和 CSS 来实现
    • 2.2w
    • 72
    使用前端技术实现静态图片局部流动效果 🌊
  •
    9月前
    前端 前端框架 Ruby
    作为一名前端工程师，我浪费了时间学习了这些技术
    不要犯我曾经犯过的错误！ 我2015年刚刚开始学习前端开发的时候，我在文档和在线教程上了解到了许多技术，我浪费大量时间去学习这些技术。
    • 20.6w
    • 455
  • 2年前
    CSS GitHub
    10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！
    一般人没事的时候刷刷朋友圈、微博、电视剧、知乎，而有些人是没事的时候刷刷 GitHub ，看看最近有哪些流行的项目。 久而久之，这差距就越来越大，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。 初步前端与高级前端之间，最大的差距可能就是信息差造成的。 …
    • 5.1w
    • 41
    10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！
  •
    5月前
    JavaScript CSS 前端
    🤔听说这个动效可以玩一天？
    杭州的天儿是怎么个事儿啊这些天，热了一个夏天也就算了，上周天秋都立了，雨也下了，老话说的都是秋高气爽，怎么温度还上去了呢！！ 🥵
    • 4.9w
    • 161
    🤔听说这个动效可以玩一天？
  •
    1年前
    CSS 前端
    好玩的 CSS - 40 个有趣的 CSS 网站
    💥 🔖 好玩的 CSS - 40 个有趣的 CSS 网站 🌐 基础学习 🧚 CSS 动画 🕹️ 教学游戏 🎰 代码生成 🎨 色彩搭配
    • 3.2w
    • 31
    好玩的 CSS - 40 个有趣的 CSS 网站
  •
    5年前
    JavaScript 前端 HTML
    别找了，这就是你想要的年会抽奖开源项目
    项目是在2016年年底给公司做的年会抽奖项目，自豪的采用jquery和原生js开发，利用非工作时间于一个月左右独立开发而成，想当年，那时我还没在项目中使用MVVM框架开发，而是稳妥的采用了我的jQuery老朋友，最后在公司年会上因为我们技术部抽的奖比较多而被群众纷纷质疑(虽然项…
    • 1.7w
    • 61
  • 6月前
    前端 JavaScript CSS
    上周巧妙地优化了跑马灯，差点升职加薪
    前言 上周优化了个跑马灯，原因是跑马灯的长度太长了，每个item的节点比较多，所以即使限制最多只有50个item，也还是很长很长，有多长可以看看下面 怎么优化呢？看看之前的跑马灯 优化前的写法 之前的
    • 1.7w
    • 72
    上周巧妙地优化了跑马灯，差点升职加薪
  •
    1年前
    前端
    完了，又火一个前端项目
    大家好，我是鱼皮。 今天逛 GitHub 的时候，在趋势榜上看到一个项目，竟然短短一天的时间内，涨了 1000 多个星星！ 就是这个名为 solid 的项目： 要知道日增上千 star 可是非常难得的
    • 15.2w
    • 234
  • 1年前
    前端 JavaScript 程序员
    33个非常实用的JavaScript一行代码，建议收藏！
    33个实用JavaScript一行代码，建议收藏！最近在国外技术社区看到了一些关于一行代码的文章，感觉很有意思，就整理了一下来分享给大家，希望对你有所帮助。
    • 9.5w
    • 68
    33个非常实用的JavaScript一行代码，建议收藏！
  •
    2月前
    前端 JavaScript CSS
    CSS 的快乐：画一个可爱的三只小鸟 Button
    做为前端工程师，最大的快乐之一就是可以用 CSS 画出各种有趣的效果。 比如我最近画的一个 Button： 画的过程中确实很开心，这也是我当时选择做前端的很大一部分原因。 今天我们就一起来画下这个可爱
    • 1.1w
    • 58
    CSS 的快乐：画一个可爱的三只小鸟 Button

    • 友情链接：

    打酱油的~~ @ 闹着玩
    私信
    获得点赞  3,324
    文章被阅读  125,229
    相关文章
    50天用vue3完成了50个web项目，我学到了什么?
    717点赞
     · 
    130评论
    50道 CSS 基础面试题（附答案）
    1323点赞
     · 
    19评论
    10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！
    1562点赞
     · 
    41评论
    2021 前端面试 | “HTML + CSS + JS”专题
    1904点赞
     · 
    33评论
    资源工具分享（第2期）：160个电子书下载网站
    11点赞
     · 
    0评论
    收藏成功！
    已添加到「」， 点击更改