热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用CSS实现皮卡丘

当我学完css和js后,冒出来一个想法。自己去实现一个可爱的卡通人物。于是我就去codepen找素材,最终选择了皮卡丘,本篇文章教大家实现一个皮卡丘。

准备工作

在开始写皮卡丘之前,我先观察了皮卡丘的整个页面。发现如果要很好的实现这个皮卡丘你不能像写传统网页那样从左到右布局,而是要从中间布局,因为左右两边对称。理清楚了思路之后现在开始编写页面结构。

    

flash

flash

页面结构如上图所示,当我们编写完html结构,就可以动手去写css。

CSS的实现

在这个地方我们可以暂时先停一下,再次理清思路。这个皮卡丘的最难点的部分在哪里?在于皮卡丘嘴巴上的弧线以及下面椭圆形的舌头。

在实现皮卡丘嘴巴上的弧线时,我产生了两个想法。第一用一个标签包裹实现这个弧线,第二分别用两个标签去包裹实现这两个弧线。最终我选择了第二种。在这里我观察皮卡丘嘴巴上的弧线发现这个弧线就是圆角矩形的四分之一,加上旋转就可以实现这两个弧线。

具体实现如下

.mouth .up {    position: relative;    top: -20px;    z-index: 1;
}.mouth .up .lip {    border: 3px solid black;    height: 30px;    width: 100px;    background: #ffe600;    border-top-color: transparent;    border-right-color: transparent;    position: relative;    position: absolute;    left: 50%;    margin-left: -50px;
}.mouth .up .lip.left {    border-radius: 0 0 0 35px;    transform: rotate(-20deg) translateX(-53px);
}.mouth .up .lip.right {    border-radius: 0 0 35px 0;    transform: rotate(20deg) translateX(53px);
}.mouth .up .lip::before {    content: '';    display: block;    width: 7px;    height: 30px;    position: absolute;    bottom: 0;    background: #ffe600;
}.mouth .up .lip.left::before {    right: -6px;
}.mouth .up .lip.right::before {    left:  -6px;
}

第一个大难点已经解决,接下来解决第二个难点。如何实现皮卡丘的下嘴唇。

观察皮卡丘的舌头我发现这实际上是一个椭圆的一部分或者圆角矩形的一部分,那我就需要截取一部分的椭圆或者圆角矩形就能实现皮卡丘的舌头。第二个解决点怎么实现皮卡丘舌头粉色的部分,有了上面的思路之后,沿着这个思路继续想,实际上这就是两个圆角矩形或者椭圆形的交界处实现的。

画的不是太好各位客官见谅了。

具体的代码的实现如下

.mouth .down {    height: 180px;    position: absolute;    top: 5px;    width: 100%;    overflow: hidden;
}.mouth .down .yuan1 {    border: 3px solid black;    width: 150px;    height: 1000px;    position: absolute;    bottom: 0;    left: 50%;    margin-left: -75px;    border-radius: 75px/300px;    background: #9b000a;    overflow: hidden;
}.mouth .down .yuan1 .yuan2 {    width: 200px;    height: 300px;    background: #ff485f;    position: absolute;    bottom: -160px;    left: 50%;    margin-left: -100px;    border-radius: 100px;
}

这两个难点解决了差不多就完成了整个皮卡丘的一半,剩下的就可以自己去完成了。

结尾

当我写完了皮卡丘的css之后只能感叹于css的神奇,也让我更加深刻的理解了css。在此之前我认为css很简单,但是真正做皮卡丘的时候,还是特别特别难,这个难在于需要你用各种各样的方法去实现你想要的效果,这就需要很好的基础以及想法,在此感谢指导我的各位老师和同学了。

推荐教程:《CSS》

以上就是使用CSS实现皮卡丘的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 深入解析Android Activity生命周期
    本文详细探讨了Android中Activity的生命周期,通过实例代码和详细的步骤说明,帮助开发者更好地理解和掌握Activity各个阶段的行为。 ... [详细]
  • 探讨并提供解决方案以应对 'view is not in the window hierarchy' 的错误提示。 ... [详细]
  • 本文介绍了如何处理MySQL数据库中表 'xdb.auditlog' 被标记为已损坏的问题,并提供了解决方案。 ... [详细]
  • 本文介绍了多种Eclipse插件,包括XML Schema Infoset Model (XSD)、Graphical Editing Framework (GEF)、Eclipse Modeling Framework (EMF)等,涵盖了从Web开发到图形界面编辑的多个方面。 ... [详细]
  • 本文详细介绍了一种实现PopupWindow全屏显示且能有效隐藏虚拟按键的技术方案,适用于Android开发。此方法经过实际测试,表现良好,兼容性优秀。 ... [详细]
  • BeautifulSoup4 是一个功能强大的HTML和XML解析库,它能够帮助开发者轻松地从网页中提取信息。本文将介绍BeautifulSoup4的基本功能、安装方法、与其他解析工具的对比以及简单的使用示例。 ... [详细]
  • 本文介绍了如何使用Maven命令对Spring Boot项目中的子模块进行独立打包,包括依赖树的查看、项目的运行和打包等基本操作。 ... [详细]
  • 深入理解异步多线程编程模型
    现代计算机系统中的CPU通过并行处理提高效率,但所谓的并发处理实际上是一种基于轮询的模拟并行。本文探讨了现代处理器如何通过虚拟化技术实现更高的并发性能,以及在.NET框架中如何有效利用线程和异步编程模式。 ... [详细]
  • 本文探讨了 Boost 库中的 Program Options 组件,这是一个强大的工具,用于解析命令行参数和配置文件。文章介绍了如何正确设置和使用该组件,包括处理复杂选项和负数值的方法。 ... [详细]
  • 本文通过具体示例详细介绍了 Python 中的装饰器和装饰类的使用方法,包括带参数的装饰器和装饰类的应用场景。 ... [详细]
  • 解决 Pytest 运行时出现 FileNotFoundError 的方法
    在使用 Pytest 进行测试时,可能会遇到 FileNotFoundError 错误,提示无法找到指定的文件或目录。本文将探讨该错误的原因及解决方案。 ... [详细]
  • HDU1085 捕获本·拉登!
    问题描述众所周知,本·拉登是一位臭名昭著的恐怖分子,他已失踪多年。但最近有报道称,他藏匿在中国杭州!虽然他躲在杭州的一个洞穴中不敢外出,但近年来他因无聊而沉迷于数学问题,并声称如果有人能解出他的题目,他就自首。 ... [详细]
  • SpringBoot新手入门指南
    本文旨在为初次接触SpringBoot的开发者提供一份详细的入门指导,包括如何快速搭建并运行一个简单的SpringBoot应用。通过本文,读者将了解Maven项目的构建、必要的配置文件设置以及基本的应用开发流程。 ... [详细]
  • 本文深入探讨了HTML5中十五个重要的新特性,为开发者提供了详细的指南。 ... [详细]
  • 本文介绍了JSP的基本概念、常用标签及其功能,并通过示例详细说明了如何在JSP页面中使用Java代码。 ... [详细]
author-avatar
峰子
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有