html制作卡通图案代码,使用HTML和CSS3绘制基本卡通图案的示例分享
这篇文章主要介绍了使用CSS3绘制基本卡通图案的示例分享,不过必须承认,这样做的代码量并不是很少...well,需要的朋友可以参考下
纯HTML+CSS实现阿童木头像
先上最终效果图:
在里面主要用的了CSS中的几个属性:position—定位;border-radius—圆角;box-shadow—阴 影;background(linear-gradient)—渐变;transform—旋转和变换;animation —动画,技术点不是很多,主要是细心和耐心。还是直接上最终源码吧。由于考虑浏览器的CSS兼容性,代码比较多。
CSS Code复制内容到剪贴板
使用CSS3画出一个叮当猫
如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得。但是,用CSS3画出来确实是第一次接触,所以很乐意去尝试一下,对于我这种菜鸟,确实是帮助不少,至少懂得如何去画一个简单的 人物形象出来,再加上一些动画效果,就活了,那就更好玩了!OK,开始之前,先把效果图晒一下:
PS:说实话,我觉得挺可爱的,小时候经常看多啦A梦,突然感觉很亲切,很童真,瞬间年轻了好多,哈哈!热烈的笑脸
首先,先把HTML结构搭建好:
XML/HTML Code复制内容到剪贴板
最好先把叮当猫的整体结构仔细研究一下,这对以后想要自己动手画别的人物形象很有帮助,思路会比较明朗。
接下来,我们按照头部,脖子,身体,脚部分别进行演示。首先将容器wrapper和叮当猫整体做一些基本的样式,叮当猫整体doraemon 设置position为relative,主要是为了便于 子元素/后代元素进行定位。
CSS Code复制内容到剪贴板
头部head的样式,因为叮当猫的头部不是正圆,所以宽高有一点偏差,然后使用border-radius将头部从矩形变成椭圆形,然后再使用径向渐变从右上角给背景来个放射性渐变,然后在加个阴影,使其更有立体感,background:#07bbee;是为了兼容低版本浏览器:
CSS Code复制内容到剪贴板
看看效果到底怎么样:
惊讶 shenmgui ,这么丑,别急,慢慢让它活过来:
CSS Code复制内容到剪贴板
写了这么多样式,结果是怎么样的呢:
生病 怎么看都觉得别扭,哦!还差胡须须和白色脸底的边框呢,咱给补上:
CSS Code复制内容到剪贴板
微笑 这样就对了,看着多舒服啊!趁热打铁,做脖子和身体:
CSS Code复制内容到剪贴板
好吧,脖子和身子都有啦!上图:
现在看起来有点像摆设品,不过笑容还是那么单纯,好了,赶紧把手脚做出来:
CSS Code复制内容到剪贴板
好了,最后完整结果:
看一下,效果是不是和一开始的一样呢 大笑 ,虽然做好了,但是还是可以让它动起来的,比如眼睛,我们可以给它加个动画效果,让眼睛转动起来:
CSS Code复制内容到剪贴板
OK,这样,眼睛就会动了,有兴趣的可以试一下,这里就无法展示了。但是如果你有什么更好的动画效果也可以尝试,那么这个案例就结束了。
PS:虽然这只是一个案例,不过确实帮助我开阔思维,而且其实做一个这样的效果,可能会花费很多时间,至少对我来说目前确实是这样子,主要难点还是布局定位和颜色的合理搭配,才能使形象更加逼真生动!
免责申明:本栏目所发资料信息部分来自网络,仅供大家学习、交流。我们尊重原创作者和单位,支持正版。若本文侵犯了您的权益,请直接点击提交联系我们,立刻删除!
html制作卡通图案代码,使用HTML和CSS3绘制基本卡通图案的示例分享相关推荐
- html制作卡通图案代码,使用HTML和CSS3绘制基本卡通图案的示例分享 -电脑资料
/*围脖*/ .doraemon .choker { width:230px; height:20px; background:#c40; /*线性渐变 让围巾看上去更自然*/ background: ...
- CSS3绘制可爱卡通鸡蛋动画js特效
下载地址CSS3基于@keyframes属性绘制可爱卡通鸡蛋动画特效,卡通鸡蛋手脚晃动动画效果,在卡通的世界里,鸡蛋也是可以有手有脚的. dd:
- 用css3 绘制心形图案
闲来无聊,做做CSS3 <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
- css 绘制心形图案
CSS3 transform-origin 属性设置旋转元素的基点位置. 注释:该属性必须与 transform 属性一同使用. (1)首先,绘制背景: <!doctype html> & ...
- php编辑菱形图案代码,vb怎么输出菱形图案?vb绘制菱形的教程
数学课上经常绘制一些图案,手绘不够精确而且还不美观,除了我们可以借助于常规的绘图软件外,也可以使用编程的方式绘制一些特殊的图案,不但精确而且还美观,下面小编就以自己制作菱形图案的过程为例来说明如何利用 ...
- 基于STC12C6A的重量感应及超声波感应变化图样的8*8*8单色光立方的制作(附代码)
**说明: **本博客主要是将光立方作为展示品来制作,通过超声波来感应距离,当有人靠近来观赏时候超声波检测的距离小于设定距离时候进行其他团的变化,同时触发重量感应器,当放上不同重量的东西的时候,可以变 ...
- 手机如何看python代码_python如何绘制iPhone手机图案?(代码示例)
本篇文章给大家带来的内容是介绍python如何绘制iPhone手机图案?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 虽然我用不起苹果手机,但我可以用python画出 ...
- python代码画图案-python如何绘制iPhone手机图案?(代码示例)
本篇文章给大家带来的内容是介绍python如何绘制iPhone手机图案?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 虽然我用不起苹果手机,但我可以用python画出 ...
- python手机版iphone-python如何绘制iPhone手机图案?(代码示例)
本篇文章给大家带来的内容是介绍python如何绘制iPhone手机图案?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 虽然我用不起苹果手机,但我可以用python画出 ...
最新文章
- Linux怎么让文件按大小排序,linuxsortlinux系统下,按文件的大小进行排序的命令...
- 毒霸能清除的大小流氓清单(部分)
- Linux下绝对经典的命令
- 我看.Net My Services
- idea配置jfinal_intellij idea安装与配置(Java开发配置篇)
- android图像处理(3)底片效果
- 【Android 事件分发】事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -> PhoneWindow -> DecorView -> ViewGroup )
- 最高201万!华为高薪招应届生,8位获聘者大有来头
- RabbitMQ的TTL+死信队列 看完这篇包会!!!
- jsp 体检信息查询 绕过用户名验证_一篇彻底搞懂jsp
- 如何在博客内添加音乐
- 你见过哪些操蛋的代码?
- Leetcode--1248. 统计「优美子数组」(java)
- qq收不到oracle邮件,腾讯企业邮箱发送邮件失败
- 试图将驱动程序添加到存储区_云存储——终于等到你,还好没放弃
- 二.hadoop环境搭建
- 微波网络转移参量[A]表示阻抗矩阵[Z]和导纳矩阵[Y]
- 使用卡方分箱进行数据离散化-python实现
- 快速阅读之眼球的训练
- 基于QT实现的图形软件图片编辑器