纯CSS制作加<div>制作动画版哆啦A梦
纯CSS代码加上<div>制作动画版哆啦A梦（机器猫）
哆啦A梦（机器猫）我们大家一定都很熟悉，今天给大家演示怎么用纯CSS代码，来做一个动画版的哆啦A梦.
效果图：
下面代码同学可以查看一下，每个线条及椭圆都是纯CSS代码生成。
首先分析结构
根据原图，将哆啦A梦分为几个结构，然后再分解其他部位。
画出各部分的形状和颜色，然后使用绝对定位（absolute）和相对定位（relative）改变其位置。
各种带弧度形状，使用border-radius属性实现。
倾斜角度，使用transform属性实现。
使用background属性的-webkit-gradient() / -moz-linear-gradient() 画出身体部分的线性色彩变化。
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>哆啦A梦（机器猫）动画版</title>
</head>
<body>
<!-- content是整个哆啦A梦的主体 -->
<div class="content">
<!-- 哆啦A梦的头部 -->
<div class="head"></div>
<!-- 哆啦A梦的脸部 -->
<div class="face">
</div>
<div class="eye">
<div></div>
<div></div>
</div>
<div class="eye-2">
<div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
<!-- 哆啦A梦的鼻子 -->
<div class="nose">
<div class="nose-2"></div>
<div class="nose-3"></div>
</div>
<!-- 哆啦A梦的胡子 -->
<div class="huzi">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="huzi2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- 哆啦A梦围巾 -->
<div class="weijin"></div>
</div>
</body>
</html>
css代码如下：
<style>
/*给背景设置渐变色*/
body {
background-image:linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
}
/*给哆啦A梦整体设置宽度*/
.content{
width: 333px;
height: 350px;
position: relative;
margin: 50px auto;
/*让content 执行keyframes动画*/
animation: play 5s linear infinite;
}
/*头设置*/
.head {
width: 325px;
height: 325px;
border-radius: 50%;
background-color: #0dacd7;
border: 2px solid #555555;
transition: 3s;
}
/*脸设置*/
.face{
width: 270px;
height: 200px;
background-color: white;
border-radius: 130px;
position: absolute;
top: 115px;
left: 31px;
transition: 3s;
}
/*眼睛设置*/
.eye {
width: 158px;
position: absolute;
top: 82px;
left: 90px;
transition: 3s;
}
.eye>div{
width: 75px;
height: 90px;
background-color: white;
border: 2px solid black;
border-radius: 40px;
float: left;
transition: 3s;
}
.eye-2>div{
width: 17px;
height: 30px;
border-radius: 50%;
background-color: black;
position: relative;
}
.eye-2>div:nth-child(1){
position: absolute;
top: 116px;
left: 136px;
}
.eye-2>div:nth-child(2){
position: absolute;
top: 116px;
left: 184px;
}
.eye-2>div>div {
width: 9px;
height: 9px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 13px;
left: 5px;
}
/*鼻子设置*/
.nose{
width: 32px;
height: 32px;
background-color: #c93300;
border-radius: 50%;
position: absolute;
top: 159px;
left: 153px;
}
.nose-2 {
width: 3px;
height: 80px;
background-color: black;
position: absolute;
top: 32px;
left: 14px;
}
.nose-3 {
width: 147px;
height: 77px;
border-bottom: 3px solid black;
border-radius: 50%;
position: absolute;
top: 35px;
left: -58px;
}
/*围巾设置*/
.weijin{
width: 240px;
height: 24px;
background-color: #ab2800;
border-radius: 9px;
position: absolute;
top: 305px;
left: 45px;
}
/*胡子设置*/
.huzi {
position: absolute;
top: 186px;
left: 54px;
}
.huzi>div:nth-child(1){
width: 60px;
height: 2px;
background-color: black;
transform: rotate(15deg);
transition: 3s;
}
.huzi>div:nth-child(2){
width: 60px;
height: 2px;
background-color: black;
margin-top: 20px;
margin-bottom: 20px;
transition: 3s;
}
.huzi>div:nth-child(3){
width: 60px;
height: 2px;
background-color: black;
transform: rotate(-15deg);
}
.huzi2 {
position: absolute;
top: 186px;
left: 224px;
}
.huzi2>div:nth-child(1){
width: 60px;
height: 2px;
background-color: black;
transform: rotate(165deg);
}
.huzi2>div:nth-child(2){
width: 60px;
height: 2px;
background-color: black;
margin-top: 20px;
margin-bottom: 20px;
}
.huzi2>div:nth-child(3){
width: 60px;
height: 2px;
background-color: black;
transform: rotate(-165deg);
}
/*设置哆啦A梦移动路径的动画*/
@keyframes play {
0{
transform: rotate(0deg) translateX(0);
}
15%{
transform: translateX(400px) rotate(190deg);
}
30%{
transform: translateX(0px) rotate(-80deg);
}
45%{
transform: translateX(-400px) rotate(-175deg);
}
60%{
transform: translateX(-100px) rotate(-20deg);
}
80%{
transform: rotate(190deg) translateY(-300px);
}
100%{
transform: rotate(-20 deg) translateY(200px);
}
}
</style>
纯CSS制作加<div>制作动画版哆啦A梦的更多相关文章
- 用纯CSS实现加载中动画效果
HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut&quo ...
- 用CSS实现加载的动画效果
用纯CSS实现加载的一些动态效果,可以把加载效果中的元素分成很多个小部分,每个部分都有动画,每个部分的动画再设置相应的延迟效果,这样,看起来就是连贯的加载动画效果.代码如下: 1.效果1 <di ...
- 纯css做的安卓开机动画
随着css3的发展,越来越多的负责绚丽的效果可以由纯css来完成了.用css3实现的动画效果丝毫不必js实现的逊色,而且浏览器对css渲染的速度远比js快,大多数时候css的体积也不js小.其中css ...
- 纯CSS实现加载转圈样式
不同的项目中对于等待加载时转圈圈的样式是不同的,有的是传统的转圈的gif图片,见得比较多的是将转圈圈的换成了可爱的图标.有时候项目中加入等待加载的图片会很违和,不符合美观,所以需要用CSS做一个.下面 ...
- 使用纯css代码实现div的“回”字型“叠放”效果
正如大家所知道的那样,div是一个块级元素,也是网页编写过程中使用频率最高的一个元素,通过不同的样式控制可以实现一些最常见的页面效果,当然也可以实现一些比较复杂的页面效果,这里就展示一个本人面试过程中 ...
- 42.纯 CSS 创作一个均衡器 loader 动画
原文地址: https://segmentfault.com/a/1190000015157160 感想: 不难,最简单的动画.拓展地址: https://scrimba.com/c/cWqVv9hd ...
- 51.纯 CSS 创作一个雷达扫描动画
原文地址:https://segmentfault.com/a/1190000015283286 感想:linear-gradient() 刷新了我的认知,它可以并列多个而不会被覆盖,并列使用时用 , ...
- 45.纯 CSS 创作一个菱形 loader 动画
原文地址:https://segmentfault.com/a/1190000015208027#articleHeader3 感想: 网格布局-> display: grid; HTML co ...
- 如何用纯 CSS 创作一个变色旋转动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejZWKL 可交互视频 ...
随机推荐
- uwp - 获取当前屏幕宽高/应用宽高
原文:uwp - 获取当前屏幕宽高/应用宽高 public static Size GetScreen() { var applicationView = ApplicationView.GetFor ...
- 机器学习: TensorFlow with MLP 笑脸识别
Tensor Flow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库.节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数 ...
- OpenGL（三） RGBA颜色设置
OpenGL支持两种颜色模式:一种是RGBA,一种是颜色索引模式. 像素点附加颜色信息之后,就必须为每一个像素点额外分配一个内存空间保存该点的颜色信息,对于RGBA颜色模式,保存的数据直接代表了颜色, ...
- WPF 画线动画效果实现
原文:WPF 画线动画效果实现 弄了将近三天才搞定的,真是艰辛的实现. 看了很多博客,都太高深了,而且想要实现的功能都太强大了,结果基础部分一直实现不了,郁闷啊~ 千辛万苦终于找到了一个Demo,打开 ...
- SQL查询表结构 相关语句
--查看列注释select * from all_col_comments where table_name=upper('XXXXX')--查看表结构select * from user_tab_c ...
- DOM解析xml实现读、写、增、删、改
qt提供了三种方式解析xml,不过如果想实现对xml文件进行增.删.改等操作,还是DOM方式最方便. 项目配置 pro文件里面添加QT+=xml include <QtXml>,也可以in ...
- c# 全局钩子实现扫码枪获取信息。
原文:c# 全局钩子实现扫码枪获取信息. 1.扫描枪获取数据原理基本相当于键盘数据,获取扫描枪扫描出来的数据,一般分为两种实现方式. a)文本框输入获取焦点,扫描后自动显示在文本框内. b)使用键盘钩 ...
- Qt MVC设计模式（五篇）
http://blog.csdn.net/qq_19672579/article/details/46952675http://blog.csdn.net/qq_19672579/article/de ...
- 关于Android 7.0更新后调用系统相机及电筒问题
android升级到7.0后对权限又做了一个更新即不允许出现以file://的形式调用隐式APP,需要用共享文件的形式:content:// URI 因为系统相机是提供的共享 Provider , C ...
- Ubuntu16.04下配置laravel
参考 http://tecadmin.net/install-laravel-framework-on-ubuntu/# 本人亲试,完全正确 注意: Step 4 – Set Encryption K ...