每天坚持一个CSS——社会人
每天一个CSS-社会人
实现效果
想法
之前看到一篇博客,使用python绘制出了小猪佩奇,所以自己想试一试,采用纯html + CSS绘制出低配版的小猪佩奇。
实现思路
使用上一篇,圆与边框实现。最后是一个组合图形,初学者都可以完成,可尝试。
缺点
1、低配版的小猪太圆润,后面会对整体图形进行修改。
2、在布局上,没有坚持div嵌套,导致缩放时位置错位,如果想实行缩放一致,可采用小猪的头部嵌套布局实现。
3、途中可看到小猪没有穿鞋子。
后面的想法
1、给小猪穿上鞋子。
2、加上小猪行走动画。
3、加上小猪手摆动画。
想法很重要,但是有想法就去完成,无关事的大小,都会努力去完成。
代码地地址
tips:这段时间忙完之后,将会继续每天的CSS
每天坚持一个CSS——社会人的更多相关文章
- 用CSS画小猪佩奇,你就是下一个社会人!
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这是我的爸爸,嚯~ 背景 小猪佩奇已经火了好 ...
- 用CSS画小猪佩奇,你就是下一个社会人! js将“I am a coder”反转成 “coder a am I”,不许用split,join,subString,reverse;求解方法三
用CSS画小猪佩奇,你就是下一个社会人! 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯 ...
- [转]一个普通IT人的十年回顾---金旭亮
金旭亮老师十年体会,很有收获.转自网络. 金旭亮于1989年与超级解霸的开发者梁肇新同时迈入广西大学的校门,却走了一条与其不同的路. 1994年起开始自学计算机专业本科课程,并开始编程,从未间断,迄今 ...
- 金老师的经典著作《一个普通IT人的十年回顾》
学习人生 -------一个普通IT人的十年回顾(上)序从1994到2003,不知不觉之间,我已在计算机技术的世界里沉浸了十年.有位哲人说过:如果一个人能用十年的时间专心致志地 ...
- turtle 20秒画完小猪佩奇“社会人”
转载:https://blog.csdn.net/csdnsevenn/article/details/80650456 图片源自网络 作者 丁彦军 如需转载,请联系原作者授权. 今年社交平台上最火的 ...
- 如何判断一个DOM元素正在动画,一个CSS“阻塞”JS的例子
一般情况下CSS不会直接影响JS的程序逻辑,但是以CSS实现动画的话,这个便不太确定了,这个故事发生在与UED迁移全局样式的过程. 曾经我有一段实现弹出层隐藏动画的代码是这个样子的: if (this ...
- 怎样将多个CSS文件导入一个CSS文件中
问题: 在HTML中引入css的其中的两个方法: 导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...
- 第一个CSS变量:currentColor
一.基本介绍 CSS变量正慢慢地从最初的草案到浏览器实现.但规范中有个已经存在多年的变量:currentColor.这个CSS特性具有良好的浏览器支持和一些实际的应用,本篇文章,我们来学习和了解它. ...
- 一个CSS中Z-index的用法
一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性 大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...
随机推荐
- iOS桌面小插件 Widget Extension
iOS桌面小插件 Widget Extension 这个插件时iOS14以后才出现的,基于SwiftUI 旧项目新建时可能一堆错误,其中一个时要把插件target 开发sdk版本设置为14.0以上 新 ...
- 哈工大 信息安全实验 XSS跨站脚本攻击原理与实践
XX大学XX学院 <网络攻击与防御> 实验报告 实验报告撰写要求 实验操作是教学过程中理论联系实际的重要环节,而实验报告的撰写又是知识系统化的吸收和升华过程,因此,实验报告应该体现完整性. ...
- vue项目环境搭建(webpack4从零搭建)--仅个人记录
一.nodejs环境搭建 首先需要下载node.js(推荐直接官网找最新的版本),下载完成后会自带npm包管理工具,打开cmd命令行界面,输入npm -v .node -v检查node.js与npm是 ...
- 二、python数据类型详解
基本概念 迭代(iteration):如果给定一个list或tuple,我们可以通过for循环来遍历,这种遍历我们称为迭代(iteration) 可变:value改变,id不变,可变类型是不可hash ...
- SoapUI软件-测试Web Service接口
一.新建项目 New SOAP Project Project Name填入项目名称:Initial WSDL中填入接口地址,或后缀为.wsdl的文件:OK: 添加后可在左侧看到接口详情: 二.测试接 ...
- python列表的操作(添加)
1. 向列表里面加元素: 向python列表里面添加元素主要有三种方法: (1)append() append()对于列表的操作主要实现的是在特定的列表最后添加一个元素,并且只能一次添加一个元素,并且 ...
- vm虚拟机安装CentOS8.2服务器系统
前言 开发服务器应用,需要使用到CentOS8.2,安装到虚拟机上方便快捷. 提前准备 Vmware 16虚拟机软件 下载VM16版本及以上的vmware虚拟机版本,否则没有CentOs8选 ...
- composer.json和composer.lock到底是什么以及区别?
composer方文档:https://docs.phpcomposer.com/04-schema.html我们在做项目的时候,总是要安装一些依赖.composer给我们提供了很多方便.直接运行co ...
- 5. 堪比JMeter的.Net压测工具 - Crank 实战篇 - 接口以及场景压测
目录 堪比JMeter的.Net压测工具 - Crank 入门篇 堪比JMeter的.Net压测工具 - Crank 进阶篇 - 认识yml 堪比JMeter的.Net压测工具 - Crank 进阶篇 ...
- VMWare ESXi 6.0如何复制虚拟机
1.复制前建议将待复制的虚拟机电源关闭. 2.登录ESXi 6.0主机后,点击"配置"选项卡,再点击"存储器". 3.能看得相关的数据存储,然后右键点击存储器如 ...