div+css制作哆啦A梦
纯CSS代码加上
哆啦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）——DIV+CSS3制作哆啦A梦头像
先展示一下我的头像吧. 作为一个前端ER,我的头像当然不能是绘画工具画出来的.没错,这个玩意是由HTML+CSS代码实现的,过年的某一天晚上无聊花了一个小时敲出来的.来看看它原本的样子: 为什么会变成 ...
- DIV+CSS制作二级横向弹出菜单，略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 纯Div+Css制作的漂亮点击按钮和关闭按钮
纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.
- Div+Css制作圆
Div+Css制作四分之一圆主要是使用Css3.0中的border-radius这个圆角隐藏属性.利用这一属性,我们可以画圆,画半圆,四分之三圆,四分之一圆等.以后我会更新…… 如何使用border- ...
- 纯css画哆啦A梦
今天有点无聊,照着网上的图写了个哆啦A梦,无技术可言,纯考耐心. <!doctype html> <html lang="en"> <head> ...
- 项目实战之玩转div+css制作自己定义形状
项目需求 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...
- 使用div+css制作简单导航 以及要注意问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- golang ---常用函数：make
简介 内建函数 make 用来为 slice,map 或 chan 类型分配内存和初始化一个对象(注意:只能用在这三种类型上) slice // 长度为5,容量为10的slice,slice中的元素是 ...
- 资料汇总_Gitlab使用记录
1)搭建并配置本地GitLab服务器教程 https://www.cnblogs.com/yinkemeng/p/10144782.html 2)记一次为gitlab启用CI的过程 https://w ...
- .NET Core随笔把数据库数据查出来转JSON并输出
直接创建WEB项目即可: public class Startup { //startup.cs是站点启动时具体做了哪些事情,主要是开启了一个mvc服务. public Startup(IConfig ...
- C# vb .net实现淡出效果特效滤镜
在.net中,如何简单快捷地实现Photoshop滤镜组中的淡出效果特效呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...
- Parameter 0 of method sqlSessionTemplate in org.mybatis.spring.boot.autoconfigure.MybatisAutoConfiguration required a single bean, but 2 were found:
Parameter 0 of method orderSqlSessionFactory in com.config.MultipleDBConfig required a single bean, ...
- 强大的Grafana k8s 插件
原文参考: https://i4t.com/4152.html 参考:https://blog.csdn.net/mailjoin/article/details/81389700 插件链接:http ...
- CSP J/S 2019受虐记
一枚蒟蒻的游记~ 提高组DAY1 不是说每场考试都有一道签到题吗 那我tm读了三遍题硬是没找到一道水题是怎么回事(是我太弱了吗) 没办法,硬着头皮做T1 暴力写法...期望得分30pts 于是...在 ...
- react native错误排查-TypeError: window.deltaUrlToBlobUrl is not a function
错误现象:window.deltaUrlToBlobUrl is not a function 最近在调试react-native时,打开浏览器调试时发现报错window.deltaUrlToBlob ...
- java程序员常用的cmd命令
1.查看端口号或者进程号使用情况 1.1.查看所有端口占用情况 C:\Users\Administrator>netstat -ano 活动连接 协议 本地地址 (ip:端口) 外部地址 状态 ...
- dom4j 解析字符串成树形结构
引入maven依赖: <dependency> <groupId>dom4j</groupId> <artifactId>dom4j</artif ...