纯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>

转载于:https://www.cnblogs.com/zhaohongcheng/p/10843155.html

纯CSS制作加div制作动画版哆啦A梦相关推荐

html 载入中,用纯CSS实现加载中动画效果
今天要介绍的是用简单的CSS--只用CSS,不用Gif--制作"加载中-"动画效果.先看看效果: 上面的这个加载中效果,以前是用gif动图实现的,但随着CSS的进步,CSS动画功能 ...
css 跳跃动画,如何使用纯CSS实现方块跳跃的动画（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现方块跳跃的动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com/ ...
html 数据交互动画,纯css实现可交互的动画
如题,不借助JavaScript,只利用CSS,如何实现可交互式的动画呢?或许该需求仅此一种解决方案,绝无仅有.不知该方案是否是第一次找到. 什么是可交互动画? 就是可以响应用户的动画,直接上图吧,更 ...
转圈加载html,web前端入门到实战：纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
82.纯CSS液体加载特效
效果 (源码网盘地址在最后) 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. 演示视频 [前端特效 82]纯CSS液体加载特效视频地址一:https://www.ixigua.c ...
纯css实现背景颜色渐变动画
纯css实现背景颜色渐变动画,代码及效果图如下. body {width: 100wh;height: 100vh;color: #fff;background: linear-gradient(-4 ...
小米10青春版哆啦A梦限定款明日开售
小米10青春版哆啦A梦限定款已于8月28日也开启预售,并将于9月1日也就是明天正式上市发售. 小米手机新品活动优惠力度空前 https://www.xiaomi.com 从官方同步晒出的预热海报显示, ...
5分钟实现漂亮的CSS加载动画，纯CSS实现加载动画
目录 1 视频 2 知识点 2.1 CSS calc() 函数 2.2 CSS var() 函数 2.3 CSS3 box-shadow 属性 2.4 CSS3 box-sizing 属性 2.5 C ...
纯CSS实现beautiful的3D动画
大家好,我是"前端点线面",一位新生代农民工,欢迎关注我获取最新前端知识和大量思维导图("百题斩"获取<前端百题斩>pdf版:分别回复"g ...

纯CSS制作加div制作动画版哆啦A梦

纯CSS代码加上<div>制作动画版哆啦A梦（机器猫）

哆啦A梦（机器猫）我们大家一定都很熟悉，今天给大家演示怎么用纯CSS代码，来做一个动画版的哆啦A梦.

效果图：

首先分析结构

根据原图，将哆啦A梦分为几个结构，然后再分解其他部位。

html代码如下：

css代码如下：

纯CSS制作加div制作动画版哆啦A梦相关推荐

最新文章

热门文章