纯CSS代码加上

制作动画版哆啦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>

div+css制作哆啦A梦的更多相关文章

  1. 一言不合敲代码(1)——DIV+CSS3制作哆啦A梦头像

    先展示一下我的头像吧. 作为一个前端ER,我的头像当然不能是绘画工具画出来的.没错,这个玩意是由HTML+CSS代码实现的,过年的某一天晚上无聊花了一个小时敲出来的.来看看它原本的样子: 为什么会变成 ...

  2. DIV+CSS制作二级横向弹出菜单,略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  3. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  4. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  5. 纯Div+Css制作的漂亮点击按钮和关闭按钮

    纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.

  6. Div+Css制作圆

    Div+Css制作四分之一圆主要是使用Css3.0中的border-radius这个圆角隐藏属性.利用这一属性,我们可以画圆,画半圆,四分之三圆,四分之一圆等.以后我会更新…… 如何使用border- ...

  7. 纯css画哆啦A梦

    今天有点无聊,照着网上的图写了个哆啦A梦,无技术可言,纯考耐心. <!doctype html> <html lang="en"> <head> ...

  8. 项目实战之玩转div+css制作自己定义形状

    项目需求 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...

  9. 使用div+css制作简单导航 以及要注意问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. SAS学习笔记1

    数据采样 简单随机抽样,从sashelp数据集中air数据文件中选取30个数 数据探索 数字特征的探索:均值.频数.最大值.最小值.众数.中位数.方差.标准差 数字分布的探索:是否服从正态分布 连续型 ...

  2. python_封装redis_list方法

    xshell 进入 虚拟环境 安装 redis workon py3env # 进入虚拟环境 pip install redis # 安装redis deactivate # 退出虚拟环境 简单的封装 ...

  3. C#录制声卡声音喇叭声音音箱声音

    在项目中,我们会需要录制电脑播放的声音,比如歌曲,电影声音,聊天声音等通过声卡音箱发出的声音.那么如何采集呢?当然是采用SharpCapture!下面开始演示关键代码,您也可以在文末下载全部源码: 设 ...

  4. python-tyoira基本

    目录 .Typora安装 我们在之前的时候记录笔记就是使用word和记事本,但是从今天开始我们要更换软件,记录笔记使用Typora软件,为什么要使用Typora的软件呢,是因为我们程序员不只是写代码这 ...

  5. JQ实现购物车全选跟总计全选

    //GoodsCheck购物车每个店铺的checkBox//goods-check购物车所有的checkBox//ShopCheck店铺全选的按钮//commlistFrm店铺商品的模块//allCh ...

  6. 【GLG Toolkit 行业案例】Baltic Information Systems, Ltd.公司选择使用GLG Toolkit

    BIS (Baltic Information Systems, Ltd.)是一家专门为核电厂开发安全和过程监控系统的软件公司. BIS的新产品 BISMARC 是一个通用过程控制和监控的SCADA系 ...

  7. 1M大概多少个字

    <?php echo strlen("你"); 保存文件为gbk 输出2 保存文件为utf-8 输出3 说明不同编码占用字节不同 1M=1024kB 1KB = 1024B ...

  8. CAS 的问题

    cas这么好用,那么有没有什么问题呢?还真有 ABA问题 CAS需要在操作值的时候检查下值有没有发生变化,如果没有发生变化则更新,但是如果一个值原来是A,变成了B,又变成了A,那么使用CAS进行检查时 ...

  9. select下拉框小DemoA

    <html> <head> <meta charset="utf-8"> <script src="jquery-1.9.1.m ...

  10. 从零搭建consul

    从零搭建consul 原文链接:https://blog.csdn.net/weixin_42107541/article/details/87640807#2linux_25 从零搭建consul1 ...