纯HTML+CSS实现阿童木头像


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

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

  先上最终效果图:

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




  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  5.     <title>纯CSS**</title>
  6.     <style type="text/css">
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }

  11.         .outer-circle {
  12.             position: absolute;
  13.             top: 32px;
  14.             left: 44px;
  15.             width: 289px;
  16.             height: 289px;
  17.             border: 4px solid #75BD4F;
  18.             -moz-border-radius: 50%;
  19.             -webkit-border-radius: 50%;
  20.             border-radius: 50%;
  21.         }

  22.         .inner-circle {
  23.             position: relative;
  24.             width: 269px;
  25.             height: 269px;
  26.             border: 10px solid #F5F910;
  27.             -moz-border-radius: 50%;
  28.             -webkit-border-radius: 50%;
  29.             border-radius: 50%;
  30.             background-color: #73BF43;
  31.         }

  32.         .inner-circle div {
  33.             position: absolute;
  34.         }

  35.         .inner-circle-light {
  36.             top: 41px;
  37.             left: 35px;
  38.             -moz-box-shadow: 26px 26px 29px 37px #fff;
  39.             -webkit-box-shadow: 26px 26px 29px 37px #fff;
  40.             box-shadow: 26px 26px 29px 37px #fff;
  41.         }

  42.         .header-top {
  43.             top: 11px;
  44.             right: 2px;
  45.             z-index: 100;
  46.             width: 180px;
  47.             height: 90px;
  48.             -moz-border-radius: 90px 90px 0 0;
  49.             -webkit-border-radius: 90px 90px 0 0;
标签: CSS