每天坚持一个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属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...
随机推荐
- burpsuite常见问题
中文乱码问题:https://www.cnblogs.com/bk76120/p/12400092.html 无法抓取本地或局域网其他主机的包 去掉"对于本地地址不使用代理服务器" ...
- Json字符串和Json对象相互转换
字符串-->json对象:JSON.parse() var str = '{"code":"A001","name":"张三 ...
- LeetCode-081-搜索旋转排序数组 II
搜索旋转排序数组 II 题目描述:已知存在一个按非降序排列的整数数组 nums ,数组中的值不必互不相同. 在传递给函数之前,nums 在预先未知的某个下标 k(0 <= k < nums ...
- vue的拖拽vuedraggable组件使用方法
<template> <div id="app"> <vuedraggable class="wrapper" ...
- Winform调用存储过程
数据表及数据准备: create table Member ( MemberId int primary key identity(1,1), MemberAccount nvarchar(20) u ...
- 【译】ASP.NET Core 6 中的性能改进
原文 | Brennan Conroy 翻译 | 郑子铭 受到 Stephen Toub 关于 .NET 性能的博文的启发,我们正在写一篇类似的文章来强调 6.0 中对 ASP.NET Core 所做 ...
- Linux 磁盘inode字节数占满的问题
查看ext系列文件系统的信息 #dumpe2fs /dev/sdc1 Inode count: 65536 inode号数量 Block count: 262144 块数量 Reserved bloc ...
- 大作业:开发一个精美的 Web 网站
大作业:开发一个精美的 Web 网站 实验目的: 掌握一个完整精美网页开发的基本方法 实验要求: 1.开发一个 Web 站点,至少有 3 个以上的页面: 2.采用 CSS 和 HTML 文件分开方法: ...
- python 之 matplotlib 练习
import numpy as npimport matplotlib.pyplot as plt x = np.linspace(0,10,1000)# 自变量y = np.sin(x) + 1 # ...
- ZYNQ 双CPU裸机运行例程
vivado 2014.4 特殊情况:总DDR内存大于512MB,且CPU0已经占用了超过512MB,这时按以下步骤CPU1无法启动. 原因:启动入口地址限制.更改方法如下: 打开cpu1_bsp\p ...