纯HTML+CSS实现阿童木头像

他有十万马力，能上天能入地；他分辨善恶，是勇敢正义化身；1963年，他登上荧幕，在日本创下了未曾有过的高收视率……他叫阿童木，一个纯真、善良、勇 敢的机器娃娃。“阿童木之父”手冢治虫曾说，将阿童木生日定在2003年4月7日。你的童年记忆中，有这个发型尖尖的少年吗？

正好最近学习CSS3，就准备练练手，画一个阿童木的头像。实用性不是很大，主要为练习HTML+CSS，也是为了打发时间和磨练耐心。

先上最终效果图：

前端学习交流QQ群：461593224

在里面主要用的了CSS中的几个属性：position—定位；border-radius—圆角；box-shadow—阴影；background（linear-gradient）—渐变；transform—旋转和变换；animation —动画，技术点不是很多，主要是细心和耐心。还是直接上最终源码吧。由于考虑浏览器的CSS兼容性，代码比较多。

    
    
    


    

        

            
            

                
                

                

                
                

                

                

                

                

                

                    

                    
                
                

                
                

                

                

                

                

                

                

                

                

                

                

                    
                    

                    

                    

                    

                
                

                    
                    

                    

                    

                    

                    

                    

                    

                    

                
                

                    
                    

                    

                    

                    

                    

                    

                    

                    

                
                

                    
                    

                
                

                    
                    

                
                

                    
                    

                    

                
                

                    
                    

                    

                    

                    

                    

                
                

                

                    ASTRO BOY
                    

                
            
        
    

前端学习交流QQ群：461593224 欢迎一起学习