css 手抓,CSS 像素画 - 手和箭头
CSS
语言：
CSSSCSS
确定
/* configuration */
/* print pixels */
.pointer {
background: #333;
box-shadow: 1em 0 0 0em #333, 2em 1em 0 0 #333, 2em 2em 0 0 #333, 2em 3em 0 0 #333, 2em 4em 0 0 #333, 2em 5em 0 0 #333, 2em 6em 0 0 #333, 2em 7em 0 0 #333, 2em 8em 0 0 #333, 2em 9em 0 0 #333, 3em 5em 0 0 #333, 4em 5em 0 0 #333, 5em 6em 0 0 #333, 5em 7em 0 0 #333, 5em 8em 0 0 #333, 5em 9em 0 0 #333, 6em 6em 0 0 #333, 7em 6em 0 0 #333, 8em 7em 0 0 #333, 8em 8em 0 0 #333, 8em 9em 0 0 #333, 8em 10em 0 0 #333, 9em 7em 0 0 #333, 10em 8em 0 0 #333, 11em 9em 0 0 #333, 11em 10em 0 0 #333, 11em 11em 0 0 #333, 11em 12em 0 0 #333, 11em 13em 0 0 #333, 11em 14em 0 0 #333, 11em 15em 0 0 #333, 10em 16em 0 0 #333, 10em 17em 0 0 #333, 10em 18em 0 0 #333, 9em 19em 0 0 #333, 9em 20em 0 0 #333, 9em 21em 0 0 #333, 8em 21em 0 0 #333, 7em 21em 0 0 #333, 6em 21em 0 0 #333, 5em 21em 0 0 #333, 4em 21em 0 0 #333, 3em 21em 0 0 #333, 2em 21em 0 0 #333, 1em 21em 0 0 #333, 0em 21em 0 0 #333, 0em 20em 0 0 #333, 0em 19em 0 0 #333, -1em 18em 0 0 #333, -1em 17em 0 0 #333, -2em 16em 0 0 #333, -2em 15em 0 0 #333, -3em 14em 0 0 #333, -3em 13em 0 0 #333, -4em 12em 0 0 #333, -5em 11em 0 0 #333, -5em 10em 0 0 #333, -5em 9em 0 0 #333, -4em 9em 0 0 #333, -3em 9em 0 0 #333, -2em 10em 0 0 #333, -1em 11em 0 0 #333, -1em 10em 0 0 #333, -1em 9em 0 0 #333, -1em 8em 0 0 #333, -1em 7em 0 0 #333, -1em 6em 0 0 #333, -1em 5em 0 0 #333, -1em 4em 0 0 #333, -1em 3em 0 0 #333, -1em 2em 0 0 #333, -1em 1em 0 0 #333, 0.5em 1.5em 0 0.5em #fff, 0.5em 3.5em 0 0.5em #fff, 0.5em 5.5em 0 0.5em #fff, 0.5em 7.5em 0 0.5em #fff, 0.5em 9.5em 0 0.5em #fff, 3.5em 6.5em 0 0.5em #fff, 3.5em 8.5em 0 0.5em #fff, 6.5em 7.5em 0 0.5em #fff, 6.5em 9.5em 0 0.5em #fff, 9.5em 9.5em 0 0.5em #fff, -3.5em 10.5em 0 0.5em #fff, -2.5em 11.5em 0 0.5em #fff, -1em 13em 0 1em #fff, -0.5em 15.5em 0 0.5em #fff, 8em 13em 0 2em #fff, 3.5em 11.5em 0 1.5em #fff, 9em 8em 0 0 #fff, 4.5em 16.5em 0 3.5em #fff, 5.5em 14.5em 0 3.5em #fff, 3.5em 14.5em 0 3.5em #fff;
width: 1em;
height: 1em;
margin: 60px 0 0 100px;
font-size: 8px;
/* transform: rotate(-25deg); */
}
.default {
background: transparent;
box-shadow: 1em 1em 0 0em #333, 2em 2em 0 0 #333, 3em 3em 0 0 #333, 4em 4em 0 0 #333, 5em 5em 0 0 #333, 6em 6em 0 0 #333, 7em 7em 0 0 #333, 8em 8em 0 0 #333, 9em 9em 0 0 #333, 10em 10em 0 0 #333, 11em 11em 0 0 #333, 12em 12em 0 0 #333, 12em 13em 0 0 #333, 11em 13em 0 0 #333, 10em 13em 0 0 #333, 9em 13em 0 0 #333, 8em 13em 0 0 #333, 8em 14em 0 0 #333, 9em 15em 0 0 #333, 9em 16em 0 0 #333, 10em 17em 0 0 #333, 10em 18em 0 0 #333, 9em 19em 0 0 #333, 8em 19em 0 0 #333, 7em 18em 0 0 #333, 7em 17em 0 0 #333, 6em 16em 0 0 #333, 6em 15em 0 0 #333, 5em 14em 0 0 #333, 4em 15em 0 0 #333, 3em 16em 0 0 #333, 2em 17em 0 0 #333, 1em 17em 0 0 #333, 1em 16em 0 0 #333, 1em 15em 0 0 #333, 1em 14em 0 0 #333, 1em 13em 0 0 #333, 1em 12em 0 0 #333, 1em 11em 0 0 #333, 1em 10em 0 0 #333, 1em 9em 0 0 #333, 1em 8em 0 0 #333, 1em 7em 0 0 #333, 1em 6em 0 0 #333, 1em 5em 0 0 #333, 1em 4em 0 0 #333, 1em 3em 0 0 #333, 1em 2em 0 0 #333, 2em 3em 0 0 #fff, 2.5em 4.5em 0 0.5em #fff, 3em 6em 0 1em #fff, 3.5em 7.5em 0 1.5em #fff, 4em 9em 0 2em #fff, 4.5em 10.5em 0 2.5em #fff, 3em 13em 0 1em #fff, 2.5em 14.5em 0 0.5em #fff, 2em 16em 0 0 #fff, 6.5em 10.5em 0 1.5em #fff, 8em 11em 0 1em #fff, 9.5em 11.5em 0 0.5em #fff, 11em 12em 0 0 #fff, 6.5em 13.5em 0 0.5em #fff, 7.5em 15.5em 0 0.5em #fff, 8.5em 17.5em 0 0.5em #fff;
width: 1em;
height: 1em;
margin: 0 0 0 280px;
font-size: 8px;
}
html {
height: 100%;
background: #abcdef;
}
css 手抓,CSS 像素画 - 手和箭头相关推荐
- python 生成excel像素画_【译】只用 CSS 就能做到的像素画/像素动画
只用 CSS 就能做到的像素画/像素动画 这篇文章将会介绍只用 CSS 就能制作像素画·像素动画的方法.虽说纯 CSS 就能做到,但是为了更高的可维护性,也会顺便介绍使用 Sass 的制作方法. 上面 ...
- 【转载】只用 CSS 就能做到的像素画/像素动画
[转载]只用 CSS 就能做到的像素画/像素动画 如图: 原文链接:box-shadowを使ってCSSだけでドット絵を描き.アニメーションさせる 作者推特:bc_rikko 作者的推特里面有不少例子, ...
- 辛星和您一起手写CSS气泡
上文中我公布了一篇手写导航条的博客,那么这一篇博客我将和大家一起手写气泡.那么什么是气泡呢?先给那些刚入门的童鞋一个截图,来更好的认识一下什么是气泡把: 这就是一个简单的气泡啦,那么它主要用来干什么呢 ...
- html+css+js之20个练手小项目（一）
html+css+js之20个练手小项目(一)--Hangman 前言 一.HTML 二.CSS 三.JS 前言 前端新手练习,记录不迷失. 主要练习html和CSS布局以及JS. 来源github, ...
- 原创：纯手工打造CSS像素画--笨笨熊系列图标
纯手工打造CSS像素画--笨笨熊系列图标 作者:冰极峰 转载请注明出处 在cssplay网站看到有一组CSS像素画,于是也想摩仿一下,于是在网络上找到一组头像图标,看其结构比较简单,就拿它开刀吧!先看 ...
- html编写气泡对话框,HTML+CSS入门 纯CSS手写圆角气泡对话框
本篇教程介绍了HTML+CSS入门 纯CSS手写圆角气泡对话框,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 嗯--我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那 ...
- html格子像素画,有趣的CSS像素
如今很多艺术被超清,高像素图片掩盖了光芒,像素艺术就是其中之一.我在逛CodePen的时候被一些像素作品惊呆了,它们又一次告诉了我像素艺术多么的了不起. 很酷不是吗?像素图案是在高清和高分辨率的图片或 ...
- html格子像素画,HTML_纯手工打造CSS像素画，在cssplay网站看到有一组CSS像素 - phpStudy...
纯手工打造CSS像素画 在cssplay网站看到有一组CSS像素画,于是也想摩仿一下,于是在网络上找到一组头像图标,看其结构比较简单,就拿它开刀吧!先看看预览图 图一 基本原理: 没有什么技术含量,主 ...
- PHP画像素直线,画像素画原来如此简单！绝对是手残党的福利
[PConline 杂谈]你听说过像素画吗?最近网络上出现很多利用像素绘制的卡通图案,我们把这些称之为像素画.其绘画过程简单,不需要任何绘画的功底,可以说绝对是手残党的福利.但是对于像素画你可能会感觉 ...
最新文章
- 别再用 BeanUtils 了，这款 PO VO DTO 转换神器不香么？
- 计算机安装两个键盘会怎样,外设门诊:一个键盘能否连接两个接收器?
- FT报源检测到目标无法恢复解决过程
- 微信小程序中WebView中原生组件限制问题解析
- Spark中常用的算法
- pandas布尔索引
- python 内置open()函数与os.open()函数的区别（打开文件）
- C++palindrome partitioning回文分割算法的实现(附完整源码)
- Java并发编程的基础-线程的终止
- 浅谈工业无线遥控器的基本定义及原理
- 安装kloxo。需要注意的事项
- html离线地图,离线地图三维开发-添加HTML
- 使用RMAN备份与恢复数据库（1）——RMAN基本命令
- 夏普Sharp AR-C260M PS 一体机驱动
- JavaSE学习笔记-08
- 监控文件夹下大小是否有变化
- Universal Principles of Design
- docker安装calibre
- 顺序结构 与 选择结构
- 【每周CV论文推荐】GAN在医学图像分割中的典型应用