从纯css3代码实现哆啦A梦蓝胖子效果说html5+css3

  • 2
  • 67 views
  • A+
所属分类:css

html5+css3在之前是非常的热的,但是现在好像又有些降温了,很多人包括一些开发者都认为html5就是移动端或者说是可以自适应手机屏幕的网页,我不得不说其实大家都是对htm5和css3有一些错误的认识的。

从纯css3代码实现哆啦A梦蓝胖子效果说html5+css3

其实自适应或者是手机端等移动端页面并不是不能同于html5和css3,因为只有部分的移动端页面使用h5+css3的一些技术,而有手机端页面仅仅是使用了css3的media媒体查询来做适配其他的布局或者样式统统都是css2的技术,也就是说这样的移动端页面根本是算不上H5页面的,因为这样的页面甚至连html5的一些语义化标记都没用到。所以很多时候的人们根本不了解html5和css3的强大之处和魅力。

最近在逛网站的时候看到了一些使用css3做的一些特效,真的是可以用酷炫这个词来表达,不得不佩服css3的强大,什么画图形、动画效果等等统统的都是可以使用html5+css3来实现。

上图中的蓝胖子哆啦A梦文是之前在网上非常火的一个使用css3做的一个效果,纯代码实现不包含图片,真的还是非常的棒,有兴趣的可以研究一下代码。代码不是很复杂但是要实现一个这样的效果感觉真心是不容易。

哆啦A梦的核心的代码主要是css3代码,支持IE9及以上的IE浏览器和其他的webkit内核的浏览器,但是不支持IE8,在IE8浏览器下我们的哆啦A梦就已经严重变形了,如下图:

从纯css3代码实现哆啦A梦蓝胖子效果说html5+css3

效果在线预览地址:纯css3代码实现哆啦A梦蓝胖子动画效果

源代码github地址:https://github.com/xiaoming0827/Doraemon

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  1   博主  1

    • 虾 0

      兄弟 我想问下学习编程方面是单方面学习java或者c# 还是全面发展好呢

        • ming ming Admin

          @ 建议还是学java,个人认为java目前的就业前景还是很乐观的