每天一个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. 实现按钮跳转&下划线等

    按钮点击跳转页面:(在java文件里写) 1 public class MainActivity extends AppCompatActivity { 2 3 private Button mbtn ...

  2. 报错:net::err_unknown_url_scheme的解决办法

    在项目中设置了api请求和web页面请求的地址,如下图: 控制台报错,如下图: 问题是:没有加入"http://"这个头,因此访问不到. 解决办法: 再次访问正常

  3. JZ-067-剪绳子

    剪绳子 题目描述 给你一根长度为n的绳子,请把绳子剪成整数长的m段(m.n都是整数,n>1并且m>1,m<=n),每段绳子的长度记为k[1],...,k[m]. 请问k[1]x... ...

  4. C#控制台输入密码星号显示

    在Program类中的Main方法里: 1 public class Program 2 { 3 static void Main(string[] args) 4 { 5 Console.Write ...

  5. linux作业--第五周

    1.简述osi七层模型和TCP/IP五层模型 一.OSI参考模型 (1) OSI的来源 OSI(Open System Interconnect),即开放式系统互联. 一般都叫OSI参考模型,是ISO ...

  6. Thinkphp3.2数据库字段自动转小写,字段大小写自动转换,以及thinkphp3一些bug

    公司在使用thinkphp框架,版本也有些老,被一些bug坑了,记录一下 自动转小写解决办法,最简单的就是在配置文件加上 'DB_PARAMS' => [\PDO::ATTR_CASE => ...

  7. vue轻量进度条

    **### vue------ mode 好玩东西+1: 轻量级进度条: 1.引入 import NProgress from 'nprogress'; // progress bar import ...

  8. [] == ![] 返回 true

    对于==来说,如果数据类型不同,就会进行隐式类型转换. 首先判断是否在对比 null 和 undefined,是的话就会返回 true: 判断其中一方是否为 string ,在与 number进行比较 ...

  9. DirectX11 With Windows SDK--37 延迟渲染：光源剔除

    前言 在上一章,我们主要介绍了如何使用延迟渲染,以及如何对G-Buffer进行一系列优化.而在这一章里,我们将从光源入手,讨论如何对大量的动态光源进行剔除,从而获得显著的性能提升. 在此之前假定读者已 ...

  10. CentOS 7.5 安装配置tigervnc-server

    系统版本: [root@s10 ~]# cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core) 1.安装 Gnome 包 [root@ ...