前端——自定义组件

目录

一、创作纪念日——6月7日（机缘巧合）

二、收获

三、前端组件

3.1、重要的CSS

3.2、实用组件

1、站点访问次数

2、鼠标样式

3、烟花点击特效

4、GIF动态小人（出现在左下角）

5、天气插件

6、音乐播放器

3.3、CSS组件

1、卡片悬停

2、黏性标签（回到顶部）

3、加载动画

4、图标库中文网

---

一、创作纪念日——6月7日（机缘巧合）

• 在学习的道路上，总有那么一个时刻，你会想要将自己所学到的知识点整理成一篇博客。就像在6月7日，我也有了这样的想法，想要将自己学习到的PPT知识点记录下来。
• 即使当时的想法还很简单，但这个念头却是展示了我对于自我提高的渴望与努力。随着时间的推移，我不断地积累和沉淀，慢慢地我的表达能力和文字组织能力有了显著的提高。
• 记录所学知识，不仅是检验自己学习成果的方式，更是激励自己前行的动力。它让我更加清晰地认知到自己所掌握的知识，也令我更好地理解和应用这些知识点。
• 因此，秉持这样的信念，我一直在努力着，通过记录、整理，不断积累和提升自己，在自我探索的道路上迈出更加坚定的步伐。

---

二、收获

• 分享知识是一件非常有意义的事情，因为它不仅能够帮助自己更好地理解和掌握所学的内容，也能够让更多的人受益。正如我在博客中分享前后端、数据库、Linux等知识，收获了100多个粉丝和数百个赞，让我感到十分开心和满足。
• 通过分享知识，我不仅可以巩固自己的学习成果，还可以将这些知识分享给其他人，让他们少走弯路，更快速地掌握这些技能。由此，可以满足我对于自我成长和贡献社会的愿望。
• 在获得这些粉丝和赞的同时，我也深刻认识到了知识分享的力量。只要我们愿意分享，就会有更多人借鉴和学习，在获得进步的同时，也能够促进技术共享和社区发展。这些积极的影响不仅令我内心感到欣慰，也让我更加坚定了自己持续分享的决心。
• 因此，我将继续坚持分享，并希望我的经验和知识能够为更多人带来帮助和启发，共同推动技术和社区的进步。

---

三、前端组件

之前搞了几个自适应的网页，自己也收获了许多，分享一下其中用到的知识

做自适应，一定要熟悉CSS，这真是太重要了（我因为生疏，所以需要大量时间去查询3w，找到自己想要实现的效果，真的很浪费时间，┭┮﹏┭┮） 

3.1、重要的CSS

用方框圈起来的，就是经常用的！！！

 

3.2、实用组件

1、站点访问次数

本站总访问量次


  本站访客数人次


  本文总阅读量次

 2、鼠标样式

可自己去网上下载喜欢的cur，然后再替换路径

 

3、烟花点击特效

或者

4、GIF动态小人（出现在左下角）

 

5、天气插件

6、音乐播放器

 

3.3、CSS组件

1、卡片悬停

/* 卡片悬停 */
.card-ddd {
box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.045);
/* box-shadow: 0 0 30px rgba(0,0,0,0.3); */
transition: all 0.5s ease-in-out;
}

.card-ddd:hover {
transform: translateY(-1px);
/* box-shadow: 6px 6px 5px rgba(0, 0, 0, 0.071); */
box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

2、黏性标签（回到顶部）

    
    




    
    


    
    
    

        

            顶部
        
    

    
    


    
    

3、加载动画

   




   
   hello world

4、图标库中文网

https://fontawesome.com.cn/v5