每日分享html特效篇之五个加载页面特效和五个导航按钮特效

我是c站的一个小博主，近期我会每天分享前端知识包括（原生的web语句，以及vue2和vue3，微信小程序的写法及知识点）本篇文章收录于html特效专栏中，如果想每天在我这学到一些东西，请关注我并订阅专栏，每天都分享前端知识哦~

前端是做什么的？

1.前端工程师主要利用HMTL与CSS建构页面（其中html构建骨架，css构建样式），用JavaScript获取后端数据以及完善交互以及用户体验。
2.通俗来讲，前端在一个项目里，拿到UI设计师设计的设计稿，然后实现UI设计师设计稿，调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。
3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。
4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。

前端的特效视觉：

层次结构的表现

动态效果，如缩放，覆盖，滑出网页或单个视觉元素，可帮助用户理解网页信息架构。通常是通过转场和菜单来展开网页。

表现层级关系

为了展现层与层的关系，是抽屉，是打开，还是平级切换等等。让用户知道这个界面和上一个、下一个的关系。

清晰明确

动效可以清晰地表明各种数据块中间的逻辑结构，即使在数据高度饱和的情况下也能使一切从观感上有组织性。

添加了图层

在网站制作过程中加上特效，每个元素都在用户滚动页面或者是鼠标经过的地方有动态效果，就像在平面层上多出了一个动态层，这样看起来更加有层次感。

我想借此专栏发布的内容帮助那些正在入坑前端的家人们，同时作为我以后复习的笔记，希望我们可以互相帮助，共同加油！！！

 

1.沙漏加载特效

展示效果：

 

代码：

2.安卓手机充电加载版网页加载特效

效果展示：

 

代码：

    
    

    
    



    

        
100%
        

            

            

            

            

            

            

            

        
    

3.水球网页加载页面特效

显示效果：

 代码：

4.旋转水滴网页加载特效页面

效果展示：

代码：

5.流光圆环加载特效页面

效果展示：

 代码：

    
    

    
    



    

        

        加载中
    

6.鼠标悬停时导航栏简约缓出效果

效果展示：

代码：

    
    

    
    
    



    

         去分享
        
        
        
        
    

 7.鼠标悬停时毛玻璃导航栏光闪效果

效果展示：

 代码：

    
    

    
    



    

        
点赞
        
关注
        
评论
    

8.鼠标悬停时导航栏图标实现3d并分层效果

效果展示：

 代码：

    
    

    
    
    



    

        
            

                
                
                
                
                
            
            
QQ
        
        
            

                
                
                
                
                
            
            
微信
        
        
            

                
                
                
                
                
            
            
微博
        
        
            

                
                
                
                
                
            
            
人人网
        
        
            

                
                
                
                
                
            
            
推特
        
    

9.鼠标悬停时边框滑动效果

效果显示：

 代码：

    
    

    
    



    

        点赞
        关注
        评论
        谢谢
    

10.导航栏文字及图片撕裂效果显示

效果显示：

代码：

    
    

    
    



    

        

            
Lqj.
            
Lqj.
            评论
        
        

            
Lqj.
            
Lqj.
            关注
        
        

            
Lqj.
            
Lqj.
            点赞