CSS3，哆啦A梦动画特效

1、效果图：

2、设计思想：

（1）哆啦A梦整个有头部、脸部、左眼、右眼、鼻子、嘴部、围巾、胡须八个部分。

头部部分里面包含了脸部、左眼、右眼、鼻子、嘴部、胡须；左右眼里面有三层元素：眼睛的底色部分、眼睛的黑色瞳孔、以及眼白。嘴部部分里面包含有嘴唇。

（2）围巾元素有两个部分，一个是围在脖子上的围巾，一个是围巾上的铃铛。左右部分的胡须是贴在脸上的，使用的定位方式是absolut。鼻子有两个部分。

（3）在鼠标移动到哆啦A梦卡通形象时，哆啦A梦的嘴巴会变得扁平，当移到左眼时，左眼珠子会向左动，当移动到铃铛部分时，铃铛会变大，这里使用的是CSS中的Transition，设置的过渡时间是1s。

3、实验总结：

卡通动画设计时，先分析出卡通形象由哪些部分组成，在css中对这些标签进行调整，呈现出比较好的卡通形象。要求我们必须学好基础知识，并且熟悉的掌握。并且多进行实际操作，这样才能学得更好。

4、代码

HTML：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>哆啦A梦</title><link rel="stylesheet" href="dlam.css"></head><body><!-- 哆啦A梦 --><div class="doa"><!-- 头 --><div class="head"><div class="face"><div><div><div></div></div><div><div></div></div></div><div><div><div></div></div></div></div><div class="nose"><div></div></div><div class="nose1"></div></div><!-- 嘴 --><div class="mouth"><div></div><div></div></div><!-- 脖 --><div class="neck"><div></div><div></div><div></div><div></div></div><!-- 胡须 --><div class="beard"><div class="left"><div></div><div></div><div></div></div><div class="right"><div></div><div></div><div></div></div><span></span></div></div></body></html>

CSS：

   body{margin: 0;background: lightblue;}/*哆啦A梦*/.doa{position: relative;top: 100px;}.head{margin: 0 auto;width: 400px;height: 350px;background: #008ee3;position: relative;border-radius: 50% 50% 25% 25% / 55% 55% 45% 45%;}.head:hover .face>div:first-child div{left: 0px;transition: all 1s;}.head:hover .face>div:first-child div div{left: 0px;transition: all 1s;}.head:hover{}.face{width: 310px;height: 260px;background: snow;border-radius: 50% 50% 25% 25% / 55% 55% 45% 45%;position: relative;top: 90px;left: 45px;}/*左眼眶*/.face>div:first-child{width: 80px;height: 100px;border-radius: 50%;border:2px #000 solid;background: snow;float: left;position: relative;top:-40px;left: 71px;z-index: 50;}/*右眼眶*/.face>div:last-child{width: 80px;height: 100px;border-radius: 50%;border:2px #000 solid;background: snow;float: left;position: relative;top:-40px;left: 71px;z-index: 50;}/*左眼珠1*/.face>div:first-child div{width: 20px;height: 25px;background: #000;border-radius: 50%;position: absolute;top: 45px;left: 60px;}/*左瞳孔*/.face>div:first-child div div{width: 10px;height: 10px;background: #ffffff;border-radius: 50%;position: absolute;top: 7px;left: 10px;}/*右眼珠*/.face>div:last-child div{width: 20px;height: 25px;background: #000;border-radius: 50%;position: absolute;top: 45px;}/*右瞳孔*/.face>div:last-child div div{width: 10px;height: 10px;background: #ffffff;border-radius: 50%;position: absolute;top: 7px;}.nose{width: 30px;height: 30px;border-radius: 50%;background: #c70000;position: absolute;top: 130px;left: 50%;margin-left: -15px;z-index: 10;}.nose div{width: 10px;height: 10px;border-radius: 50%;position: absolute;background: #ffffff;top: 10px;margin-left: 20px;z-index: 10;}.nose1{width: 2px;height: 130px;background: #000;position: absolute;top: 160px;left: 50%;margin-left: -1px;z-index: 10;}.mouth{width: 250px;height: 200px;border-radius: 50%;background: snow;border-bottom: 2px #000 solid;margin: -230px auto;position: relative;}.mouth div:first-child{width: 82px;height: 2px;background: #000;position: absolute;z-index: 1000;top: -25px;left: 6px;display: none;}.mouth div:nth-child(2){width: 82px;height: 2px;background: #000;position: absolute;z-index: 1000;top: -25px;left: 90px;display: none;}.mouth:hover{border-radius: 0;width: 180px;height: 200px;}.mouth:hover div:first-child,.mouth:hover div:nth-child(2){display: block;}.neck{width: 330px;height: 200px;border-radius: 50% 50% 20% 20% / 50% 50% 50% 50%;background: #e30000;margin: 80px auto;z-index: 100;}.neck div:first-child{border: 2px #000 solid;border-radius: 50%;width: 40px;height: 40px;background: #ffdd2e;position: absolute;top: 350px;left: 50%;margin-left: -22px;transition: all 1s;}.neck div:nth-child(2){border: 2px #000 solid;width: 44px;height: 5px;background: #ffdd2e;position: absolute;left: 50%;margin-left: -24px;top: 363px;border-radius: 5px;transition: all 1s;}.neck div:nth-child(3){width: 8px;height: 8px;border: 2px #000 solid;position: absolute;background: #6c5844;border-radius: 50%;left: 50%;margin-left: -6px;top: 375px;transition: all 1s;}.neck div:nth-child(4){width: 2px;height: 8px;background: #000;position: absolute;left: 50%;margin-left: -1px;top: 385px;transition: all 1s;}.neck:hover div:first-child{width: 60px;height: 60px;left: 50%;margin-left: -30px;}.neck:hover div:nth-child(2){width: 66px;height: 7.5px;left: 50%;margin-left: -33px;}.neck:hover div:nth-child(3){width: 12px;height: 12px;left: 50%;margin-left: -6px;top: 385px;}.neck:hover div:nth-child(4){width: 2px;height: 12px;left: 50%;margin-left: 1px;top: 400px;}.beard .left div:first-child{width: 120px;height: 40px;border-top: 2px #000 solid;border-radius: 10% 90% 10% 90% / 10% 90% 10% 90%;position: absolute;left: 50%;top: 140px;margin-left: -170px;z-index: 100;}.beard .left div:nth-child(2){width: 120px;height: 40px;border-top: 2px #000 solid;border-radius: 10% 90% 10% 90% / 30% 70% 40% 60%;position: absolute;left: 50%;top: 170px;margin-left: -170px;z-index: 100;}.beard .left div:last-child{width: 120px;height: 40px;border-top: 2px #000 solid;border-radius: 10% 90% 10% 90% / 40% 60% 10% 90%;position: absolute;left: 50%;top: 200px;margin-left: -170px;z-index: 100;}.beard .right div:first-child{width: 120px;height: 40px;border-top: 2px #000 solid;border-radius: 90% 10% 90% 10% / 90% 10% 90% 10%;position: absolute;left: 50%;top: 140px;margin-left: 50px;z-index: 100;}.beard .right div:nth-child(2){width: 120px;height: 40px;border-top: 2px #000 solid;border-radius: 90% 10% 90% 10% / 70% 30% 60% 40%;position: absolute;left: 50%;top: 170px;margin-left: 50px;z-index: 100;}.beard .right div:last-child{width: 120px;height: 40px;border-top: 2px #000 solid;border-radius: 90% 10% 90% 10% / 60% 40% 90% 10%;position: absolute;left: 50%;top: 200px;margin-left: 50px;z-index: 100;}.beard span{display: block;width: 60px;height: 3.5px;background: #ffffff;border-radius: 4px;position: absolute;top: 352px;left: 50%;margin-left: -105px;}

CSS3，哆啦A梦动画特效相关推荐

用纯css3绘制的能自适应屏幕宽度的哆啦a梦动画
本人是学生,正在想深入学习html5和css3,所以最近在研究用css3绘制矢量图,于是就用纯css3基于百分比方案绘制了能自适应浏览器宽度而自动变化比例的哆啦a梦动画, 动画的宽高比例为:" ...
jQuery+CSS3实现404背景动画特效【转】
jQuery+CSS3实现404背景动画特效效果: http://hovertree.com/texiao/jquery/74/ 源码下载: http://hovertree.com/h/bjaf/ ...
HTML中淡入的动画效果,CSS3实现页面淡入动画特效代码
现在的css3有很多效果可以直接替换flash了,下面我来给大家介绍一个利用CSS3实现页面淡入动画特效代码,希望此教程对各位同学会有所帮助. 利用CSS3动画属性"@keyframes ...
css滑动星星评分,纯css3滑动星星打分动画特效
特效描述:纯css3 滑动星星打分动画.纯css3滑动星星打分动画特效代码结构 1. 引入CSS 2. HTML代码基本样式: Basic star rating: 5 stars 4 stars ...
html5倒计时效果,html5+css3进度条倒计时动画特效代码【推荐】
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...
html进度条倒计时代码,html5+css3进度条倒计时动画特效代码【推荐】_html5教程技巧...
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...
android窗帘拉开动画,H5+CSS3窗帘拉开收起动画特效源码
效果图今天给大家带来了一个简单的特效源码 H5+CSS3窗帘拉开收起动画特效源码废话不多说,上源码! html { box-sizing: border-box; } *, *::after, * ...
html 开关窗效果,逼真的HTML5+CSS3窗帘拉开收起动画特效
逼真的HTML5+CSS3窗帘拉开收起动画特效 html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inheri ...
母亲节html页面,css3母亲节主题文字动画特效
特效描述:css3 母亲节主题文字动画特效,一段简单的css3文字动画代码,对即将到来的母亲节主题文字背景动画,妈妈您辛苦了. 代码结构 1. HTML代码妈妈您辛苦了 @keyframes lo ...

CSS3，哆啦A梦动画特效

1、效果图：

CSS3，哆啦A梦动画特效相关推荐

最新文章

热门文章