我让ChatGPT用CSS3画一个皮卡丘，还是自己画的可爱

news2024/10/6 18:23:19

突然想到了小时候看过的动画片《皮卡丘》，于是突然就想，ChatGPT肯定也看过，他哪有不知道的东西啊，于是就想着让他帮我画一个，他画出来之后，我笑了，这啥玩意儿啊。

 

目录

一、第一次尝试让ChatGPT用CSS3画皮卡丘

1. 绘制皮卡丘的耳朵：

2. 绘制皮卡丘的眼睛：

3. 绘制皮卡丘的嘴巴：

4. 绘制皮卡丘的尾巴：

二、第二次尝试ChatGPT完整版皮卡丘 

CSS3代码如下

三、自己动手用CSS3画皮卡丘吧

1. 实现思路

2. HTML部分源代码

3. CSS3部分源代码

一、第一次尝试让ChatGPT用CSS3画皮卡丘

 

很抱歉，作为一名语言模型，我无法直接向您呈现一个用CSS3画皮卡丘的过程。不过，我可以提供一些指导和思路，帮助您开始这个项目。

首先，您需要了解如何使用CSS3来绘制基本的形状和动画。以下是一些您可能需要用到的基本属性：

  1. border-radius：用于创建圆角矩形。
  2. transform：用于旋转、缩放和平移元素。
  3. animation：用于创建动画效果。
  4. box-shadow：用于添加阴影效果。

绘制皮卡丘的关键在于绘制它的耳朵、眼睛、嘴巴和尾巴等特征。以下是一些可能有用的CSS3代码片段：

1. 绘制皮卡丘的耳朵：

 

.ear {
  width: 50px;
  height: 80px;
  background-color: #FEE440;
  border-radius: 50% 50% 0 0;
  transform: rotate(-45deg);
}

2. 绘制皮卡丘的眼睛：

.eye {
  width: 30px;
  height: 30px;
  background-color: #000000;
  border-radius: 50%;
  position: relative;
  animation: blink 5s infinite;
}

.eye::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: #FFFFFF;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 5px;
}

3. 绘制皮卡丘的嘴巴：

.mouth {
  width: 60px;
  height: 30px;
  border: 2px solid #000000;
  border-top: none;
  border-radius: 0 0 50px 50px;
  position: relative;
  top: 20px;
}

.tongue {
  width: 30px;
  height: 30px;
  background-color: #FF4F6F;
  border-radius: 50%;
  position: absolute;
  bottom: -15px;
  left: 15px;
}

4. 绘制皮卡丘的尾巴：

.tail {
  width: 120px;
  height: 30px;
  background-color: #FEE440;
  border-radius: 15px;
  transform: rotate(-30deg);
  position: relative;
  top: -40px;
  left: 50px;
}

.tail::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #000000;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 90px;
}

以上代码片段只是皮卡丘的一部分，您需要自己根据需要进行修改和调整。希望这些代码片段能够帮助您开始这个有趣的项目！

刚开始他并没有给出我HTML代码，我就自己试着写了几个DIV，于是效果是这样子的，请看

二、第二次尝试ChatGPT完整版皮卡丘 

我想着肯定是我HTML元素弄得不对，处于开发人员自己不动手，靠工具去创造的精神，我跟ChatGPT说，你把这些代码片段组合起来，给我形成一个完整的皮卡丘。于是， 

 

将这些代码片段组合在一起，形成一个完整的皮卡丘需要以下步骤：

  1. 在 HTML 文件中创建一个 <div> 元素，作为皮卡丘的容器，设置它的样式，例如 position: relative;。
  2. 在容器中创建一个 <div> 元素，作为皮卡丘的身体，设置它的样式，例如 width: 200px; height: 200px; background-color: #FEE440; border-radius: 50%;。
  3. 在身体中创建两个 <div> 元素，作为皮卡丘的耳朵，设置它们的样式，例如根据上面的代码片段设置。
  4. 在身体中创建两个 <div> 元素，作为皮卡丘的眼睛，设置它们的样式，例如根据上面的代码片段设置。
  5. 在身体中创建一个 <div> 元素，作为皮卡丘的鼻子，设置它的样式，例如 width: 30px; height: 30px; background-color: #FFA200; border-radius: 50%; position: absolute; top: 70px; left: 85px;。
  6. 在身体中创建一个 <div> 元素，作为皮卡丘的嘴巴，设置它的样式，例如根据上面的代码片段设置。
  7. 在嘴巴中创建一个 <div> 元素，作为皮卡丘的舌头，设置它的样式，例如根据上面的代码片段设置。
  8. 在身体中创建一个 <div> 元素，作为皮卡丘的尾巴，设置它的样式，例如根据上面的代码片段设置。
  9. 根据需要调整各元素的位置和大小，以形成一个完整的皮卡丘。

以下是一个简单的示例代码，可以帮助您更好地理解：

HTML代码如下

<div class="pikachu">
  <div class="body"></div>
  <div class="ear left"></div>
  <div class="ear right"></div>
  <div class="eye left"></div>
  <div class="eye right"></div>
  <div class="nose"></div>
  <div class="mouth">
    <div class="tongue"></div>
  </div>
  <div class="tail"></div>
</div>

CSS3代码如下

.pikachu {
  position: relative;
  width: 200px;
  height: 200px;
}

.body {
  width: 200px;
  height: 200px;
  background-color: #FEE440;
  border-radius: 50%;
}

.ear {
  width: 50px;
  height: 80px;
  background-color: #FEE440;
  border-radius: 50% 50% 0 0;
  transform: rotate(-45deg);
  position: absolute;
  top: -30px;
}

.left {
  left: 40px;
}

.right {
  right: 40px;
}

.eye {
  width: 30px;
  height: 30px;
  background-color: #000000;
  border-radius: 50%;
  position: absolute;
  top: 40px;
  animation: blink 5s infinite;
}

.nose {
  width: 30px;
  height: 30px;
  background-color: #FFA200;
  border-radius: 50%;
  position: absolute;
  top: 70px;
  left: 85px;
}

.mouth {
  width: 60px;
  height: 30px;
  border: 2px solid #000000;
  border-top: none;
  border-radius: 0 0 50px 50px;
  position: absolute;
  top: 90px;
  left: 70px;
}

.tongue {
  width: 30px;
  height: 30px;
  background-color: #FF4F6F;
  border-radius: 50%;
  position: absolute;
  bottom: -15px;
  left: 15px;
}

.tail {
  width: 120px;
  height: 30px;
  background-color: #FEE440;
  border-radius: 15px;
  transform: rotate(-30deg);
  position: absolute;
  top: 130px;
  left: -10px;
}

.tail::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #000000;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 90px;
}

 请看结果：这是皮卡丘？莫非他进化了？

 

三、自己动手用CSS3画皮卡丘吧

1. 实现思路

耳朵，耳朵尖，头部，脸夹，眼睛，眼珠子，鼻子，可爱的小嘴，舌头

涉及到的CSS3属性，radial-gradient 的背景填充，animation 的耳朵尖动画，头部border-radius的圆角边框，右下角box-shadow的阴影显示，眼睛和眼珠子的定位，这里采用了::before，鼻子类似于用css实现一个三角形的写法，15px solid transparent ，脸夹是背景颜色的设置，圆角边框的实现，以及定位，小嘴巴涉及到了 box-shadow ： inset 0px -4px 0 #1b1919 的阴影，或者做一个圆角也可以实现

2. HTML部分源代码

<div class="pikachu">
  <div class="left-ear"></div>
  <div class="right-ear"></div>
  <div class="head">
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    <div class="nose"></div>
    <div class="left-cheek"></div>
    <div class="right-cheek"></div>
    <div class="lips"></div>
    <div class="mouth"></div>
  </div>
</div>

3. CSS3部分源代码

<style>
body {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#f2fcff, #b9e4f7);
  overflow:hidden;
}

.pikachu {
  position: relative;
}
@media (max-width: 600px) {
  .pikachu {
    transform: scale(0.5);
  }
}

.head {
  position: relative;
  margin-top: 200px;
  width: 370px;
  height: 330px;
  background: #ffd01c;
  border: 4px solid #1b1919;
  border-radius: 45%;
  overflow: hidden;
  box-shadow: inset -10px -8px 0 #d8851c;
}

.left-eye,
.right-eye {
  position: absolute;
  width: 70px;
  height: 70px;
  background-color: #1b1919;
  border-radius: 50%;
  top: 40%;
}
.left-eye::before,
.right-eye::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  top: 10%;
  animation: 0.2s infinite shaking;
}

.left-eye {
  left: 20%;
}
.left-eye::before {
  left: 40%;
}

.right-eye {
  right: 20%;
}
.right-eye::before {
  right: 40%;
}

.nose {
  position: relative;
  width: 0;
  height: 0;
  border-top: 10px solid #1b1919;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 10px solid transparent;
  border-radius: 8px;
  margin: auto;
  top: 60%;
}

.left-cheek,
.right-cheek {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: #fb1412;
  border: 4px solid #1b1919;
  border-radius: 50%;
  top: 60%;
}

.left-cheek {
  left: -5%;
}

.right-cheek {
  right: -5%;
}

.lips {
  display: block;
  position: relative;
  margin: auto;
  width: 1px;
  height: 1px;
  top: 60%;
  z-index: 2;
}

.lips::after, .lips::before {
  position: absolute;
  content: "";
  top: -20px;
  width: 50px;
  height: 40px;
  border-radius: 50%;
  box-shadow: inset 0px -4px 0 #1b1919;
  background-color: #ffd01c;
}

.lips::before {
  right: 0px;
}

.lips::after {
  left: 0px;
}

.mouth {
  position: relative;
  height: 60px;
  width: 60px;
  margin: auto;
  top: 60%;
  border: 4px solid #1b1919;
  border-radius: 0 0 50% 50%;
  z-index: 1;
  background-image: radial-gradient(circle at center 80%, #e93c4e 0%, #e93c4e 50%, #9e2d38 50%, #9e2d38 60%, #1b1919 60%, #1b1919 65%, #5c0009 65%);
  background-position: 80% center;
}

.left-ear,
.right-ear {
  position: absolute;
  height: 450px;
  width: 70px;
  background: #ffd01c;
  border-radius: 50%;
  border: 4px solid #1b1919;
  box-shadow: inset -4px -120px 0 #d8851c;
}

.right-ear {
  right: 10px;
  transform: rotate(12deg);
  background-image: radial-gradient(circle at -100% 45%, #ffd01c 0%, #ffd01c 60%, black 60%);
}

.left-ear {
  left: 10px;
  transform: rotate(-50deg);
  background-image: radial-gradient(circle at 200% 45%, #ffd01c 0%, #ffd01c 60%, black 60%);
  animation: 5s 5s infinite wiggle;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

@keyframes shaking {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(2%);
  }
}
@keyframes wiggle {
  0% {
    transform: rotate(-50deg);
  }
  5% {
    transform: rotate(-60deg);
  }
  10% {
    transform: rotate(-50deg);
  }
  12% {
    transform: rotate(-55deg);
  }
  15% {
    transform: rotate(-50deg);
  }
  100% {
    transform: rotate(-50deg);
  }
}</style>

最终画出了可爱的皮卡丘，快拿到代码去感受一下吧。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/514290.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

智安网络|怎么预防大大小小的网络入侵及信息泄露？五招值得收藏

智安网络|怎么预防大大小小的网络入侵及信息泄露？五招值得收藏

网络安全是一个涵盖广泛、变幻多端的领域。网络风险防范需要多种措施&#xff0c;从教育人员如何正确处理机密信息到定期检查系统的安全性。 在现代网络环境下&#xff0c;网络安全成为防护重点&#xff0c;网络环境下出现的安全隐患可能会直接影响业务&#xff0c;甚至生命财…
阅读更多...
【fiddler+burp+雷神模拟器联动抓包】

【fiddler+burp+雷神模拟器联动抓包】

0x00 常用抓包工具 常用的抓包工具​有fiddler、wireshark、httpwatch、 firebug、F12/等。抓包抓的是协议&#xff0c;fiddler抓的是HTTP、HTTPS协议&#xff0c;wireshark抓的是其他协议。fiddler、wireshark可以修改接口的参数和返回值&#xff0c;常用的F12调试工具只可以…
阅读更多...
npm 知识点

npm 知识点

1 ~会匹配最近的小版本依赖包&#xff0c;比如~1.1.3会匹配所有1.1.x版本&#xff0c;但是不包括1.2.0 ^会匹配最新的大版本依赖包&#xff0c;比如^1.3.4会匹配所有1.x.x的包&#xff0c;包括1.3.4&#xff0c;但是不包括2.0.0 *会匹配最新版本 2 ant-design/pro-table 前面…
阅读更多...
EndNote X9 引用参考 单击文献编号，不能跳转到文尾文献列表处，咋解决？文献编号 不能跳转 ，怎么办？

EndNote X9 引用参考 单击文献编号，不能跳转到文尾文献列表处，咋解决？文献编号 不能跳转 ，怎么办？

文章目录 1 正常情况下 引用文献编号 是可以跳转的2 问题分析3 解决方法4 EndNote X9 插入参考文献常见问题总结5 EndNote X9 快速上手教程&#xff08;毕业论文参考文献管理器&#xff09; 1 正常情况下 引用文献编号 是可以跳转的 正确的插入文献后&#xff0c; 正常情况下&a…
阅读更多...
公告 | FISCO BCOS v3.3.0发布，新增块内分片技术，单链性能突破10万TPS

公告 | FISCO BCOS v3.3.0发布，新增块内分片技术，单链性能突破10万TPS

FISCO BCOS开源社区一贯秉承开源、开放、联合共建的原则&#xff0c;致力于链接社区力量将FISCO BCOS打造成更加完美的区块链底层平台。 在社区通力协作下&#xff0c;FISCO BCOS v3.3.0已经发布&#xff0c;块内分片作为本次更新的核心亮点&#xff0c;实现了应用间交易执行的…
阅读更多...
PyMuPDF pdf神奇处理工具

PyMuPDF pdf神奇处理工具

可将pdf转图片&#xff0c;图片转pdf&#xff0c;可拼接pdf&#xff0c;可提取固定的内容。 详细参考下面文章&#xff1a; PyMuPDF关键字标注&#xff1a;https://www.cnpython.com/qa/1436855 PyMuPDF去水印&#xff1a;https://sunnysab.cn/2022/06/29/Clean-Watermarks-…
阅读更多...
BlockingQueue（阻塞队列）基本使用指南

BlockingQueue（阻塞队列）基本使用指南

概述 BlockingQueue 是 java.util.concurrent 包提供的用于解决并发生产者 - 消费者问题的最有用的类。 BlockingQueue 的特性是在任意时刻只有一个线程可以进行 take 或者 put 操作&#xff0c;并且 BlockingQueue 提供了超时 return null 的机制&#xff0c;在许多生产场景…
阅读更多...
哪些行业适合开发微信小程序？

哪些行业适合开发微信小程序？

随着电子商务的进一步发展&#xff0c;很多行业都开始开发自己的系统软件&#xff0c;企图通过线上线下结合的方式来达到更好的宣传效果&#xff0c;拓客引流。微信小程序凭借成本低、使用方便等优点成为很多商家的首选。那么究竟哪些行业适合开发微信小程序呢&#xff1f; …
阅读更多...
springboot项目，localhost:port 可以访问，但是外网IP:port不行

springboot项目，localhost:port 可以访问，但是外网IP:port不行

springboot 项目启动后&#xff0c;localhost:port 可以访问&#xff0c;但是外网IP:port不行 现象原因及解决方法解决方法&#xff1a;规则1&#xff1a;规则2&#xff1a;规则3&#xff1a; 现象 springboot项目&#xff0c;localhost:port 可以访问&#xff0c;但是外网IP:…
阅读更多...
Java多线程基础-9：代码案例之阻塞队列

Java多线程基础-9：代码案例之阻塞队列

阻塞队列是一种特殊的队列&#xff0c;带有“阻塞特性”&#xff0c;也遵守队列 “先进先出” 的原则。阻塞队列是一种线程安全的数据结构&#xff0c;并且具有以下特性&#xff1a; 当队列满时&#xff0c;继续入队列就会阻塞&#xff0c;直到有其他线程从队列中取走元素。当…
阅读更多...
协程Flow原理

协程Flow原理

什么是Flow Flow直译过来就是“流”的意思&#xff0c;也就是将我们我们任务如同水流一样一步一步分割做处理。想象一下&#xff0c;现在有一个任务需要从山里取水来用你需要怎么做&#xff1f; 扛上扁担走几十里山路把水挑回来。简单粗暴&#xff0c;但是有可能当你走了几十…
阅读更多...
Java项目经验二：二手车系统

Java项目经验二：二手车系统

1、项目简介 开发环境&#xff1a;IDEA MySQL JDK1.8 Git Maven 使用技术&#xff1a;Spring Cloud Mybatis Plus MySQL RocketMQ Nginx Nacos Redis MongoDB ElasticSearch Shiro 项目描述&#xff1a; XX二手车的服务贯穿二手车交易各个环节&#xff0c;运用成熟…
阅读更多...
穿越数据智能“海峡”，企业更需要什么样的数智底座？

穿越数据智能“海峡”，企业更需要什么样的数智底座？

导读&#xff1a;更懂业务&#xff0c;是用友iuap数智中台多年打磨的核心能力。 如果将数智化转型比作企业的大航海旅程&#xff0c;数据和智能就像是大航海过程中企业必须穿越的海峡。随着数智化转型的不断深入&#xff0c;很多企业驶进数据智能海峡后发现&#xff0c;要用好数…
阅读更多...
外观数列、文本左右对齐----2023/5/11

外观数列、文本左右对齐----2023/5/11

外观数列----2023/5/11 给定一个正整数 n &#xff0c;输出外观数列的第 n 项。 「外观数列」是一个整数序列&#xff0c;从数字 1 开始&#xff0c;序列中的每一项都是对前一项的描述。 你可以将其视作是由递归公式定义的数字字符串序列&#xff1a; countAndSay(1) “1”…
阅读更多...
分享两款好用的软件

分享两款好用的软件

软件一&#xff1a;去水印神器——Inpaint Inpaint是一款功能强大的图像处理软件&#xff0c;它的主要功能是去除图片中的水印。除此之外&#xff0c;它还可以帮助用户修复照片中的缺陷&#xff0c;例如划痕、斑点、红眼等&#xff0c;删除照片中的不必要的元素&#xff0c;例…
阅读更多...
Meta最新模型LLaMA详解（含部署+论文）

Meta最新模型LLaMA详解（含部署+论文）

来源&#xff1a;投稿 作者&#xff1a;毛华庆 编辑&#xff1a;学姐 前言 本课程来自深度之眼《大模型——前沿论文带读训练营》公开课&#xff0c;部分截图来自课程视频。 文章标题&#xff1a;LLaMA: Open and Efficient Foundation Language Models 向量空间中词表示的有效…
阅读更多...
ios打包ipa的四种实用方法(.app转.ipa)

ios打包ipa的四种实用方法(.app转.ipa)

总结一下&#xff0c;目前.app包转为.ipa包的方法有以下几种&#xff1a; 1、Apple推荐的方式&#xff0c;即实用xcode的archive功能 Xcode菜单栏->Product->Archive->三选一&#xff0c;一般选后两个。 局限性&#xff1a;个人开发一般采用这种方法&#xff0c;但…
阅读更多...
linux内核网络子系统初探2---socket层

linux内核网络子系统初探2---socket层

linux内核网络子系统初探2—socket层 一、内核网络socket层相关 接着上文&#xff0c;从这章开始&#xff0c;将按照五层网络模型的顺序逐层分析内核代码。 linux1.0网络协议栈部分代码如下&#xff1a; [rootlocalhost linux-1.0]# ls net/ ddi.c inet Makefile socket.…
阅读更多...
uniapp安装uview-ui踏坑

uniapp安装uview-ui踏坑

1. 安装uview-ui npm install uview-ui -S 2. 创建vue.config.js 填写如下代码 module.exports {transpileDependencies: [uview-ui] }3. 配置main.js //uview import uView from "uview-ui" Vue.use(uView)4. App.vue中引入样式 <style lang"scss"…
阅读更多...
文案智能改写-AI智能文章改写软件

文案智能改写-AI智能文章改写软件

随着人工智能技术的不断发展&#xff0c;越来越多的智能写作软件相继面世&#xff0c;其中&#xff0c;AI智能改写工具是一款非常有实用价值的工具。本文将从全自动批量改写、没有错别字和标准语法、支持图文模式改写、支持各种语言改写以及严格按照标准格式结构改写几个方面&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023