纯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;

更多 悬疑电视剧 相关资讯

超可爱 纯CSS3实现的小猪、小老鼠、小牛

利用纯CSS3绘制一些人物、动物、风景已经不是一件新鲜的事情了,主要是利用CSS3可以让直线变成任意的曲线,于是简单的矢量图形绘制对CSS3来说就小菜一碟了。今天要分享

支持中文的CSS类名

支持中文的CSS类名

CSS类名的结构性和统一性非常的重要,有些程序员喜欢使用首字母大写,有些喜欢用连接线,有些喜欢用下划线。最近我发现的一个非常有意思的东西是,在HTML和CSS里,你可以用Un

几个容易出错的css盒子模型细节

几个容易出错的css盒子模型细节

css是前端必须掌握的技能之一。其中的box模型,大体就是border、margin、padding和content,概念挺好理解。但当盒子模型与其他属性一块使用时产生的现象,或许您还难以回答

创意无限:纯CSS打造各种形状钻石

网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇

如何使用CSS生成一个三角形?

如何使用CSS生成一个三角形?

传统的网站或者web应用中,如果我们需要创建一个提示的话,通常使用图片来生成小三角,今天这里我们分享一个动画小教程,帮助你快速学习如何使用纯CSS来生成一个三角形。

纯 CSS 绘制图形(心形、六边形等)

纯 CSS 绘制图形(心形、六边形等)

我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,

更多 日剧 相关资讯

超可爱 纯CSS3实现的小猪、小老鼠、小牛

利用纯CSS3绘制一些人物、动物、风景已经不是一件新鲜的事情了,主要是利用CSS3可以让直线变成任意的曲线,于是简单的矢量图形绘制对CSS3来说就小菜一碟了。今天要分享

支持中文的CSS类名

支持中文的CSS类名

CSS类名的结构性和统一性非常的重要,有些程序员喜欢使用首字母大写,有些喜欢用连接线,有些喜欢用下划线。最近我发现的一个非常有意思的东西是,在HTML和CSS里,你可以用Un

几个容易出错的css盒子模型细节

几个容易出错的css盒子模型细节

css是前端必须掌握的技能之一。其中的box模型,大体就是border、margin、padding和content,概念挺好理解。但当盒子模型与其他属性一块使用时产生的现象,或许您还难以回答

创意无限:纯CSS打造各种形状钻石

网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇

如何使用CSS生成一个三角形?

如何使用CSS生成一个三角形?

传统的网站或者web应用中,如果我们需要创建一个提示的话,通常使用图片来生成小三角,今天这里我们分享一个动画小教程,帮助你快速学习如何使用纯CSS来生成一个三角形。

纯 CSS 绘制图形(心形、六边形等)

纯 CSS 绘制图形(心形、六边形等)

我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,

更多 中国电影 相关资讯