每天一个CSS-社会人

实现效果

想法

之前看到一篇博客,使用python绘制出了小猪佩奇,所以自己想试一试,采用纯html + CSS绘制出低配版的小猪佩奇。

实现思路

使用上一篇,圆与边框实现。最后是一个组合图形,初学者都可以完成,可尝试。

缺点

1、低配版的小猪太圆润,后面会对整体图形进行修改。
2、在布局上,没有坚持div嵌套,导致缩放时位置错位,如果想实行缩放一致,可采用小猪的头部嵌套布局实现。
3、途中可看到小猪没有穿鞋子。

后面的想法

1、给小猪穿上鞋子。
2、加上小猪行走动画。
3、加上小猪手摆动画。

想法很重要,但是有想法就去完成,无关事的大小,都会努力去完成。

代码地地址

https://github.com/webfeat/css3-everyday/blob/master/%E6%AF%8F%E5%A4%A9%E4%B8%80%E4%B8%AAcss/%E5%B0%8F%E7%8C%AA%E4%BD%A9%E5%A5%87.html

tips:这段时间忙完之后,将会继续每天的CSS

每天坚持一个CSS——社会人的更多相关文章

  1. 用CSS画小猪佩奇,你就是下一个社会人!

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这是我的爸爸,嚯~ 背景 小猪佩奇已经火了好 ...

  2. 用CSS画小猪佩奇,你就是下一个社会人! js将“I am a coder”反转成 “coder a am I”,不许用split,join,subString,reverse;求解方法三

    用CSS画小猪佩奇,你就是下一个社会人!   欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯 ...

  3. [转]一个普通IT人的十年回顾---金旭亮

    金旭亮老师十年体会,很有收获.转自网络. 金旭亮于1989年与超级解霸的开发者梁肇新同时迈入广西大学的校门,却走了一条与其不同的路. 1994年起开始自学计算机专业本科课程,并开始编程,从未间断,迄今 ...

  4. 金老师的经典著作《一个普通IT人的十年回顾》

    学习人生             -------一个普通IT人的十年回顾(上)序从1994到2003,不知不觉之间,我已在计算机技术的世界里沉浸了十年.有位哲人说过:如果一个人能用十年的时间专心致志地 ...

  5. turtle 20秒画完小猪佩奇“社会人”

    转载:https://blog.csdn.net/csdnsevenn/article/details/80650456 图片源自网络 作者 丁彦军 如需转载,请联系原作者授权. 今年社交平台上最火的 ...

  6. 如何判断一个DOM元素正在动画,一个CSS“阻塞”JS的例子

    一般情况下CSS不会直接影响JS的程序逻辑,但是以CSS实现动画的话,这个便不太确定了,这个故事发生在与UED迁移全局样式的过程. 曾经我有一段实现弹出层隐藏动画的代码是这个样子的: if (this ...

  7. 怎样将多个CSS文件导入一个CSS文件中

    问题: 在HTML中引入css的其中的两个方法:    导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...

  8. 第一个CSS变量:currentColor

    一.基本介绍 CSS变量正慢慢地从最初的草案到浏览器实现.但规范中有个已经存在多年的变量:currentColor.这个CSS特性具有良好的浏览器支持和一些实际的应用,本篇文章,我们来学习和了解它. ...

  9. 一个CSS中Z-index的用法

    一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性     大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...

随机推荐

  1. iOS桌面小插件 Widget Extension

    iOS桌面小插件 Widget Extension 这个插件时iOS14以后才出现的,基于SwiftUI 旧项目新建时可能一堆错误,其中一个时要把插件target 开发sdk版本设置为14.0以上 新 ...

  2. 哈工大 信息安全实验 XSS跨站脚本攻击原理与实践

    XX大学XX学院 <网络攻击与防御> 实验报告 实验报告撰写要求 实验操作是教学过程中理论联系实际的重要环节,而实验报告的撰写又是知识系统化的吸收和升华过程,因此,实验报告应该体现完整性. ...

  3. vue项目环境搭建(webpack4从零搭建)--仅个人记录

    一.nodejs环境搭建 首先需要下载node.js(推荐直接官网找最新的版本),下载完成后会自带npm包管理工具,打开cmd命令行界面,输入npm -v .node -v检查node.js与npm是 ...

  4. 二、python数据类型详解

    基本概念 迭代(iteration):如果给定一个list或tuple,我们可以通过for循环来遍历,这种遍历我们称为迭代(iteration) 可变:value改变,id不变,可变类型是不可hash ...

  5. SoapUI软件-测试Web Service接口

    一.新建项目 New SOAP Project Project Name填入项目名称:Initial WSDL中填入接口地址,或后缀为.wsdl的文件:OK: 添加后可在左侧看到接口详情: 二.测试接 ...

  6. python列表的操作(添加)

    1. 向列表里面加元素: 向python列表里面添加元素主要有三种方法: (1)append() append()对于列表的操作主要实现的是在特定的列表最后添加一个元素,并且只能一次添加一个元素,并且 ...

  7. vm虚拟机安装CentOS8.2服务器系统

    前言   开发服务器应用,需要使用到CentOS8.2,安装到虚拟机上方便快捷.   提前准备 Vmware 16虚拟机软件  下载VM16版本及以上的vmware虚拟机版本,否则没有CentOs8选 ...

  8. composer.json和composer.lock到底是什么以及区别?

    composer方文档:https://docs.phpcomposer.com/04-schema.html我们在做项目的时候,总是要安装一些依赖.composer给我们提供了很多方便.直接运行co ...

  9. 5. 堪比JMeter的.Net压测工具 - Crank 实战篇 - 接口以及场景压测

    目录 堪比JMeter的.Net压测工具 - Crank 入门篇 堪比JMeter的.Net压测工具 - Crank 进阶篇 - 认识yml 堪比JMeter的.Net压测工具 - Crank 进阶篇 ...

  10. VMWare ESXi 6.0如何复制虚拟机

    1.复制前建议将待复制的虚拟机电源关闭. 2.登录ESXi 6.0主机后,点击"配置"选项卡,再点击"存储器". 3.能看得相关的数据存储,然后右键点击存储器如 ...