每天一个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. Qt:QJsonValue

    0.说明 QJsonValue类用于操作JSON中的各种数据. JSON是用于存储结构化数据的格式,JSON中的数据可以是六种类型: 基本类型 存储类型 bool QJsonValue::Bool d ...

  2. Pandas:读取数据库read_sql

    学习自:pandas.read_sql - pandas 1.2.4 documentation (10条消息) pd.read_sql()参数详解_pandas.read_csv()参数详解-CSD ...

  3. k8s-coredns 介绍和部署

    1.k8s-coredns 实现了集群内部通过服务名进行可以访问.添加服务后,会自动添加一条解析记录 cat /etc/resolv.conf nameserver 10.0.0.2 search k ...

  4. 大学英语四级之听力Key Words

    Key Words关键词 所谓关键词,指的是短文中能够标志着正确答案的词,也就是说,关键词后面往往是正确答案 听力中的关键词可为宏观和微观两方面,一般出现在如下10种位置. 一.宏观方向(主旨大意) ...

  5. swoole 聊天室

    1:宝塔终端安装php 2:宝塔终端检测是否安装好 php-v 3:宝塔面板安装swoole扩展,终端检测 php -m  查看扩展 扩展已经安装完毕

  6. https 加密原理

    转载于 https://www.cnblogs.com/imteck4713/p/12016313.html 补充: <图解HTTP> 1.引言 随着互联网安全意识的普遍提高,对安全要求稍 ...

  7. docker学习(四) - docker构建redis主从结构

    此文章假设你已经安装了docker,如果没有安装请查询本博客docker安装章节 容器网络 docker network ls  查看默认的网络 Docker安装后,默认会创建下面三种网络类型 在启动 ...

  8. mysql使用group by分组时出现错误ERROR 1055 (42000): Expression #1 of SELECT list is not in GROUP BY clause and

    问题: 1055 - Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column ...

  9. vue2.x结合echarts2实现显示具体省份热力图

    最近研究了一下VUE2.X结合ehcarts实现热力图,先看下最终: 效果话不多说,直接上代码: 1 <!DOCTYPE html> 2 <html> 3 <head&g ...

  10. Excel 使用 公式

    1. 查询单元数据在另一列中是否存在 =VLOOKUP(E2,F:F,1,FALSE) 2.判断一列数据是否重复 =IF(COUNTIF(A:A,A2)>1,"重复",&qu ...