40个适合初学者练习HTML和CSS的案例

刺骨的言语ヽ痛彻心扉 2022-09-16 03:53 131阅读 0赞

![3c7507a9005c0d3ef9ddea553177ec59.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

![61e972dba9ac3254fdc36150529d3e9c.png][]

**02、汉堡菜单**

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

![49c2036e022c100a7af96fe15b3efc94.png][]

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

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

![8b3fac173ab047cc96ab7530fb06719d.png][]

**04、CSS弹出效果**

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

![93eec5354558ef83737dd11d88245c06.png][]

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

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

![4500fd52db4512aebf3afac0129af36a.png][]

**06、CSS下拉选择**

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

![3491db6b5c60bf369c840dc1f0d61a89.png][]

**07、CSS选项卡**

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

![52085e6b967001d1ccd7f479bbd8e2e4.png][]

**08、下拉式菜单**

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

![026b92664f6e3c36dc3d201d5541f3a5.png][]

**09、CSS手风琴**

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

![8166b00b96c423ab8b47dbad25c39ea3.png][]

**10、CSS图片轮播**

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

![0aa894cc11474669c60689abed4ad8f4.png][]

**11、CSS进度条**

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

![99447608041d5779e7eecc11be35085e.png][]

**12、侧边栏菜单**

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

![1fd04f8ae2026018e551590793717021.png][]

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

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

![f4ad8e26710d6aa936fb4c29ab429e0e.png][]

**14、悬停按钮**

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

![abfd300c22ee194e0cfb0d4066f564fd.png][]

**15、动画背景**

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

![91885f5708054aa9ba97b3a027ecbbb2.png][]

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

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

![60e855b9fb7c0813ca04793974714f1e.png][]

**17、CSS进度条**

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

![1baeb15226fbae05cd8ca4622d2cd436.png][]

**18、CSS开关按钮**

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

![83b5023a6169018b2de65b96cbb3f182.png][]

**19、圆形菜单**

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

![b6bb00073ea488be770631bf3a779d7d.png][]

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

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

![d6a219db5cc5a35b0ee499e65d8f3297.png][]

**21、CSS文本动画**

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

![2b62b99a1eabfa5cf330770550962a7f.png][]

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

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

![9e211dceaa296ecd57138346ae1aad3c.png][]

**23、CSS文本显示**

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

![98e82bfc301922f883754f4b56783699.png][]

**24、CSS动画菜单**

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

![bbb962dabf074612650c992efe87b5ba.png][]

**25、CSS叠加导航**

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

![1bf51d587dd47481102f936be1612835.png][]

**26、CSS提示**

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

![f89bb205dbd81dd2e0162da313cb1708.png][]

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

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

![be4fd31811f6e56d92fea03f2229e98b.png][]

**28、CSS表格**

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

![d5652341d1807f37296a432e0ed607ef.png][]

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

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

![e0b11719d5be08469aa9c37b0ba7c40a.png][]

**30、CSS分段控件**

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

![807063742c270bfafda8590ae5c2679c.png][]

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

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

![8c80a55f4643ae6e26ef4a32b191649e.png][]

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

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

![18dd3cad79d44de72130d78939bad14d.png][]

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

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

![21b24289788c5d5f42d1ca4d7da218db.png][]

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

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

![cb3c4f06fe77fd7ccb4cf00779b00d14.png][]

**35、CSS折角效果**

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

![e05dcc24d7d918928a296b47bc2c00eb.png][]

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

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

![99118fdd6de5f76ae8910393db81be61.png][]

**37、CSS选择框**

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

![3463e359440bd9a5df50cff88f9260ec.png][]

**38、CSS下列菜单**

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

![357682cabb4de1e502298bf03b39c344.png][]

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

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

![e653596b964f763220e42b3b3ad440ff.png][]

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

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

![62826545b3bb15a78a5c1388752c151e.png][]

总结

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

#  #

**学习更多技能**

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

![f92531198819f3029f56bb555d89286b.gif][]

![1c436f461ee707da7919cb5810c83524.png][]

![c80f98801bdbd112c2099e0492991fff.png][]

[3c7507a9005c0d3ef9ddea553177ec59.png]: /images/20220828/bfcc165abe8f489cb93d09b6308cc4c2.png
[61e972dba9ac3254fdc36150529d3e9c.png]: /images/20220828/cba83bf77d1f41eabfb2b2a58fba8f4e.png
[49c2036e022c100a7af96fe15b3efc94.png]: /images/20220828/7997a813eeec421f9eef17e2c94d7e5d.png
[8b3fac173ab047cc96ab7530fb06719d.png]: /images/20220828/53b2e623935c44bb938198109f7cd615.png
[93eec5354558ef83737dd11d88245c06.png]: /images/20220828/b1a1c3df086546aab3b9fe30311f1540.png
[4500fd52db4512aebf3afac0129af36a.png]: /images/20220828/49d9d1c5aa2e4dd089a78fa6c1dc2048.png
[3491db6b5c60bf369c840dc1f0d61a89.png]: /images/20220828/8fa0097d6dc24510aed6c2b7e12591ea.png
[52085e6b967001d1ccd7f479bbd8e2e4.png]: /images/20220828/9c900052e15145649ce297f4df32c3c2.png
[026b92664f6e3c36dc3d201d5541f3a5.png]: /images/20220828/c85f0169b3144532b9d5ba860b32e2fb.png
[8166b00b96c423ab8b47dbad25c39ea3.png]: /images/20220828/6777682bf6164676b85eed23e5bca557.png
[0aa894cc11474669c60689abed4ad8f4.png]: /images/20220828/d8969b5099f9464c9d9b6ba6258a9bf4.png
[99447608041d5779e7eecc11be35085e.png]: /images/20220828/a807c53bf8a047fb865d18cdaaf4aada.png
[1fd04f8ae2026018e551590793717021.png]: /images/20220828/2dbed0eefe3345d49c0942d01ede4639.png
[f4ad8e26710d6aa936fb4c29ab429e0e.png]: /images/20220828/e3cf55c48fbb47a89127856fb0b1cd16.png
[abfd300c22ee194e0cfb0d4066f564fd.png]: /images/20220828/2c4f764a43aa4e24bc52a95ce8918ce6.png
[91885f5708054aa9ba97b3a027ecbbb2.png]: /images/20220828/f14d190761114a759ec3a22500dcdbb0.png
[60e855b9fb7c0813ca04793974714f1e.png]: /images/20220828/7257b99b54824132b5dc8f87851dc919.png
[1baeb15226fbae05cd8ca4622d2cd436.png]: /images/20220828/7c2abfd2a5fd451a934ccf83630bafac.png
[83b5023a6169018b2de65b96cbb3f182.png]: /images/20220828/af602a07036c47cb9e88fc5913aae161.png
[b6bb00073ea488be770631bf3a779d7d.png]: /images/20220828/91ca058ccd024e1282e5a1e6ce40de00.png
[d6a219db5cc5a35b0ee499e65d8f3297.png]: /images/20220828/2f1664a43cb049c6a46c664a55f142ee.png
[2b62b99a1eabfa5cf330770550962a7f.png]: /images/20220828/2ca19ae606244f73976f4e2ade58c2a5.png
[9e211dceaa296ecd57138346ae1aad3c.png]: /images/20220828/6f1aa71b160841479a2161086646769f.png
[98e82bfc301922f883754f4b56783699.png]: /images/20220828/917cea37e118460e834a6d07e84ffd0d.png
[bbb962dabf074612650c992efe87b5ba.png]: /images/20220828/ab2f67cefa9b4a39bb8b1b58053fbb90.png
[1bf51d587dd47481102f936be1612835.png]: /images/20220828/9e339bb20929424e8b1e97092edf6355.png
[f89bb205dbd81dd2e0162da313cb1708.png]: /images/20220828/30c2edeb6cbf4aaa855357d8517daeba.png
[be4fd31811f6e56d92fea03f2229e98b.png]: /images/20220828/2112f85040334952885e5e92be2831cc.png
[d5652341d1807f37296a432e0ed607ef.png]: /images/20220828/a8182f74b40649f397b322972dad8513.png
[e0b11719d5be08469aa9c37b0ba7c40a.png]: /images/20220828/088398cd42df4f85afe4324215188020.png
[807063742c270bfafda8590ae5c2679c.png]: /images/20220828/746437cbb24f40699c875243654eb923.png
[8c80a55f4643ae6e26ef4a32b191649e.png]: /images/20220828/6409e698b9ed4ca1bee9ac1cc8364642.png
[18dd3cad79d44de72130d78939bad14d.png]: /images/20220828/929462f92f5849f48cc5428eb05949c7.png
[21b24289788c5d5f42d1ca4d7da218db.png]: /images/20220828/7f735f7ae1724cf4bd23b0ef8ec0ef28.png
[cb3c4f06fe77fd7ccb4cf00779b00d14.png]: /images/20220828/1a13430d8ff34994857545f4649814f9.png
[e05dcc24d7d918928a296b47bc2c00eb.png]: /images/20220828/4a649c2bb2cb4144be51a9e0758cab8f.png
[99118fdd6de5f76ae8910393db81be61.png]: /images/20220828/47aae581e5da45538d61d949cebb96bc.png
[3463e359440bd9a5df50cff88f9260ec.png]: /images/20220828/35198d2c7b334b10bdcb1d6f92bd32ef.png
[357682cabb4de1e502298bf03b39c344.png]: /images/20220828/07d727c2615545638ee59a623e4b79db.png
[e653596b964f763220e42b3b3ad440ff.png]: /images/20220828/adc5d1784f064598bbe27383b77cef76.png
[62826545b3bb15a78a5c1388752c151e.png]: /images/20220828/011814ac9a984eceb7cf9f1308d651eb.png
[f92531198819f3029f56bb555d89286b.gif]: /images/20220828/78743e8760894c18ad493e866fd66244.png
[1c436f461ee707da7919cb5810c83524.png]: /images/20220828/64ab3ddac60045d982304481293553bf.png
[c80f98801bdbd112c2099e0492991fff.png]: /images/20220828/e5911291fc77406881bdd54653080d4b.png