40个适合前端初学者练手的基础案例（HTML&CSS）

ゞ浴缸里的玫瑰 2022-08-28 05:59 244阅读 0赞

![93f414e3a8fa426b7bb05e44de5fd1f4.png][]

英文 | https://niemvuilaptrinh.medium.com/40-html-css-projects-for-beginner-2021-5bd01ff62361

翻译 | 杨小爱

使用多个库进行网页设计会在一定程度上增加页面加载时间，并且难以应用于许多不同的项目。

所以，今天我将向您介绍使用纯 HTML 和 CSS 构建的组件效果。它将帮助您用于许多不同类型的 Web 项目，并进一步提高您在 HTML 和 CSS 方面的技能。

现在让我们一起去看看吧。

# **01****、CSS 单选按钮** #

Demo地址：https://codepen.io/AngelaVelasquez/pen/Eypnq

![efc5fcb5f2ef9acb5daa518d757788ad.png][]

**02、汉堡菜单**

Demo地址：https://codepen.io/erikterwan/pen/EVzeRP

![b63f8d0d7152e896a7c2055990ccda54.png][]

**03、自定义复选框**

Demo地址：https://codepen.io/Vestride/pen/dABHx

![e6034d04f9ed1950ea883835a1a891bb.png][]

**04、CSS弹出效果**

Demo地址：https://codepen.io/imprakash/pen/GgNMXO

![028e3f609b431167ff044a7004834b6c.png][]

**05、渐变动画按钮**

Demo地址：https://codepen.io/ARS/pen/vEwEPP

![8c78b304ef5ea7b627895309aed46062.png][]

**06、CSS下拉选择**

Demo地址：https://codepen.io/raubaca/pen/VejpQP

![ee7ddbcfc7d37a5bc0d5876ec5739106.png][]

**07、CSS选项卡**

Demo地址：https://codepen.io/wallaceerick/pen/ojtal

![a21135686d89e887bbbd2c76d0513da1.png][]

**08、下拉式菜单**

Demo地址：https://codepen.io/andornagy/pen/xhiJH

![d828e4da57172e108a7d4811d8a67ff1.png][]

**09、CSS手风琴**

Demo地址：https://codepen.io/raubaca/pen/PZzpVe

![039697e9ccba5e122ba7b1606db58144.png][]

**10、CSS图片轮播**

Demo地址：https://codepen.io/AMKohn/pen/EKJHf

![b20a2e1ec0460ad08e522f0950c1efed.png][]

**11、CSS进度条**

Demo地址：https://codepen.io/rgg/pen/QbRyOq

![476fd4eeae1875f61829dd7165e8607b.png][]

**12、侧边栏菜单**

Demo地址：https://codepen.io/plavookac/pen/qomrMw

![16e3b1a233c5f1634341580efcbd8119.png][]

**13、CSS加载动画组件**

Demo地址：https://codepen.io/viduthalai1947/pen/JkhDK

![4adb4e5a3c25c479135de2f33f48519c.png][]

**14、悬停按钮**

Demo地址：https://codepen.io/kathykato/pen/rZRaNe

![6fb7f54d228111a87db0302ca5a69c96.png][]

**15、动画背景**

Demo地址：https://codepen.io/mohaiman/pen/MQqMyo

![977f2128e1796dd843ed511319015a7b.png][]

**16、按钮悬停效果**

Demo地址：https://codepen.io/sfoxy/pen/XpOoJe

![52aded013fb5193c5641c3a3f626bf3d.png][]

**17、CSS进度条**

Demo地址：https://codepen.io/rgg/pen/rVgBEL

![6130b75eea3cc80ba3ffff54a4381b4b.png][]

**18、CSS开关按钮**

Demo地址：https://codepen.io/himalayasingh/pen/EdVzNL

![c5704a1edeb40b0ff208c8379ce3908b.png][]

**19、圆形菜单**

Demo地址：https://codepen.io/0guzhan/pen/YvNmwJ

![e6214d94e3c5a3a39857115c69456675.png][]

**20、CSS实现Facebook 表情符号**

Demo地址：https://codepen.io/AshBardhan/pen/dNKwXz

![d10e5737b4fcd3cb80ad94ca2e483a92.png][]

**21、CSS文本动画**

Demo地址：https://codepen.io/kh-mamun/pen/NdwZdW

![1c5183847599ead43db221f048618133.png][]

**22、CSS输入文本动画**

Demo地址：https://codepen.io/alewinski/pen/grqgqx

![c5416eae20b342679951d3967f980628.png][]

**23、CSS文本显示**

Demo地址：https://codepen.io/equinusocio/pen/KNYOxJ

![b16043f2ef73672cf52e0305dbfdd26c.png][]

**24、CSS动画菜单**

Demo地址：https://codepen.io/joellesenne/pen/qtLEG

![6a458c9fcaad50fc65c9d8400904c09d.png][]

**25、CSS叠加导航**

Demo地址：https://codepen.io/boxabrain/pen/sdzcf

![9ba4c92c184404864d1d24c1d9f8662a.png][]

**26、CSS提示**

Demo地址：https://codepen.io/cristina-silva/pen/XXOpga

![c7b6158005e066ce54d6652f22ff635c.png][]

**27、CSS手风琴效果**

Demo地址：https://codepen.io/emoreno911/pen/dOveoY

![8e01d65066ff7b68a6df6c3a6c97f1fb.png][]

**28、CSS表格**

Demo地址：https://codepen.io/alexerlandsson/pen/mPWgpO

![68f2ef8a28c7f3f5c4017718d42cd083.png][]

**29、CSS自定义复选框**

Demo地址：https://codepen.io/nikkz/pen/BzVBJo

![ca39b7969b3e7f417a03e30418c813f5.png][]

**30、CSS分段控件**

Demo地址：https://codepen.io/fstgerm/pen/Jafyj

![d20412d682bd4b2a8b03f485a9ac00af.png][]

**31、纯CSS悬停效果**

Demo地址：https://codepen.io/guuslieben/pen/gabQWM

![74e60c5ac555da727b732a5bb91dfb05.png][]

**32、纯CSS响应式选项卡**

Demo地址：https://codepen.io/Fallupko/pen/ruLdg

![9a79000f619c2c21a467d181b193392c.png][]

**33、CSS渐变文字效果**

Demo地址：https://codepen.io/caseycallow/pen/yMNqPY

![21f4a718acf28301819363a1780c913e.png][]

**34、CSS模糊悬停效果**

Demo地址：https://codepen.io/mcraig218/pen/uqIae

![6ee7c5bc92a2ef2c25b7d4991b1daa6b.png][]

**35、CSS折角效果**

Demo地址：https://codepen.io/ravinthranath/pen/XJJWbr

![eab74b0cbda1b7065c31acd44bef2318.png][]

**36、CSS多级手风琴**

Demo地址：https://codepen.io/nathanlong/pen/mBrvn

![6d3ed1531c13623092e49414b367f002.png][]

**37、CSS选择框**

Demo地址：https://codepen.io/himalayasingh/pen/pxKKgd

![119328f7a51864a3a90748209702f4d8.png][]

**38、CSS下列菜单**

Demo地址：https://codepen.io/Moslim/pen/gmzvQj

![434231e24790a14b44822a790e11359d.png][]

**39、CSS带下滑线导航栏**

Demo地址：https://codepen.io/RockStarwind/pen/WmGwwp

![2f0fc0bda24a294b69e1553a4774731d.png][]

**40、响应式CSS标签**

Demo地址：https://codepen.io/imprakash/pen/epZvbQ

![7aa7835e504450f469602fff79e04635.png][]

总结

感谢您的时间，如果你觉得今天分享的内容对您有所帮助，请记得给我点个赞。

#  #

**学习更多技能**

**请点击下方公众号**

![8f39737ab1191db6fd246b1558fab388.gif][]

[93f414e3a8fa426b7bb05e44de5fd1f4.png]: /images/20220828/715d6d1322284ffb856a25875412e1be.png
[efc5fcb5f2ef9acb5daa518d757788ad.png]: /images/20220828/8bc823edcc38438986b020d58368586e.png
[b63f8d0d7152e896a7c2055990ccda54.png]: /images/20220828/122782ead1214740bd0e860a2ba3a80b.png
[e6034d04f9ed1950ea883835a1a891bb.png]: /images/20220828/fb1a98fb58cc49bc9e42f429f7aa056d.png
[028e3f609b431167ff044a7004834b6c.png]: /images/20220828/bb76cc5d737540fdaa6c29d7a7823e81.png
[8c78b304ef5ea7b627895309aed46062.png]: /images/20220828/c8616de2d1d84e5c9f26b2acf1b513cc.png
[ee7ddbcfc7d37a5bc0d5876ec5739106.png]: /images/20220828/d0621df3bab044d9916d558368aec0b7.png
[a21135686d89e887bbbd2c76d0513da1.png]: /images/20220828/3e03bcf11f0149e0995d1b3b7029dff2.png
[d828e4da57172e108a7d4811d8a67ff1.png]: /images/20220828/c350d4a4f0494a9aba8d8ee572c89e16.png
[039697e9ccba5e122ba7b1606db58144.png]: /images/20220828/a0ff7facae0f4039ae6449a72d7f07b4.png
[b20a2e1ec0460ad08e522f0950c1efed.png]: /images/20220828/d73075f719a540b2892e08072f58d469.png
[476fd4eeae1875f61829dd7165e8607b.png]: /images/20220828/f0ae4aa31f264acf9a2fc366f90ff7fb.png
[16e3b1a233c5f1634341580efcbd8119.png]: /images/20220828/bd5402f0469a44e5ae7cf64de0f44651.png
[4adb4e5a3c25c479135de2f33f48519c.png]: /images/20220828/f4809e6af7be45448fc07405b00dbf99.png
[6fb7f54d228111a87db0302ca5a69c96.png]: /images/20220828/d51d81962c874ca393d0d3ee8d51fcbe.png
[977f2128e1796dd843ed511319015a7b.png]: /images/20220828/3394f55de70c4c9791913cf8eb6ed49c.png
[52aded013fb5193c5641c3a3f626bf3d.png]: /images/20220828/7cfb6b9c0ffc43efb06bb6af83d92f96.png
[6130b75eea3cc80ba3ffff54a4381b4b.png]: /images/20220828/6db17cb75d404df1a880270f2ef8457a.png
[c5704a1edeb40b0ff208c8379ce3908b.png]: /images/20220828/d9893f617b094906aaef7601066443dd.png
[e6214d94e3c5a3a39857115c69456675.png]: /images/20220828/095a5ff178b948a7a18ac4ab4ef6186c.png
[d10e5737b4fcd3cb80ad94ca2e483a92.png]: /images/20220828/b98120c44862472e81e21463df0642ef.png
[1c5183847599ead43db221f048618133.png]: /images/20220828/d6e97f8bd8b146a480a226d847ba7bcd.png
[c5416eae20b342679951d3967f980628.png]: /images/20220828/bf2e4742e4b44d11a063610d0f5b53d4.png
[b16043f2ef73672cf52e0305dbfdd26c.png]: /images/20220828/4e2772732d0d45ba9b382faec421f350.png
[6a458c9fcaad50fc65c9d8400904c09d.png]: /images/20220828/18074b609784402dbfe264d323c91d4b.png
[9ba4c92c184404864d1d24c1d9f8662a.png]: /images/20220828/5be5328d607240c1801a8e57acd9f7e3.png
[c7b6158005e066ce54d6652f22ff635c.png]: /images/20220828/2c36767878da43fba21f3b7cdc6edfdd.png
[8e01d65066ff7b68a6df6c3a6c97f1fb.png]: /images/20220828/3e135786e166453591f5879c6962e322.png
[68f2ef8a28c7f3f5c4017718d42cd083.png]: /images/20220828/950920d1000c4dfb8aa3fed40560104f.png
[ca39b7969b3e7f417a03e30418c813f5.png]: /images/20220828/73b1d1de78c9412b9a73eadcd42cd8ca.png
[d20412d682bd4b2a8b03f485a9ac00af.png]: /images/20220828/4d9ecf1f0b1546c7b68490acfae8e3f9.png
[74e60c5ac555da727b732a5bb91dfb05.png]: /images/20220828/6696baefda6f49b1b90447dbf65183db.png
[9a79000f619c2c21a467d181b193392c.png]: /images/20220828/c493a1bca74b463c9af18d75d1a6c567.png
[21f4a718acf28301819363a1780c913e.png]: /images/20220828/59ca3b14ab2f4c5fbe12e03abe150b69.png
[6ee7c5bc92a2ef2c25b7d4991b1daa6b.png]: /images/20220828/2e5e3df22cd640c894f49f685f30b27c.png
[eab74b0cbda1b7065c31acd44bef2318.png]: /images/20220828/bd4f0203a0ac4e1c960091275454e7f8.png
[6d3ed1531c13623092e49414b367f002.png]: /images/20220828/f70caa7c89814d07adbd72b51efcd492.png
[119328f7a51864a3a90748209702f4d8.png]: /images/20220828/a5cf33bd1400495f98c6fd226602409c.png
[434231e24790a14b44822a790e11359d.png]: /images/20220828/d7fc16b74a374aacbf142707c6266b08.png
[2f0fc0bda24a294b69e1553a4774731d.png]: /images/20220828/6126957183cc4a5c96b1de1601e5d86c.png
[7aa7835e504450f469602fff79e04635.png]: /images/20220828/18dbf5af639f483aa672ce141df7b26d.png
[8f39737ab1191db6fd246b1558fab388.gif]: /images/20220828/c418060c087a43f7bfc84c2285a1fb13.png