文档章节

相信吗? 这是一张用 CSS 画出来的图片

涂孟超
 涂孟超
发布于 2014/09/26 15:37
字数 1763
阅读 1
收藏 0
点赞 0
评论 0
o
o
o
o
(
O
O
O
\
L
(
O
O
O
O
O
\
L
(
O
|
|
\
\
|
|
\
\
\
\
(
(
8
o
o
o
(
(
8
o
o
o
o
)
)
b
o
O
o
o
o
o
o
o
)
b
o
O
o
o
o
o
o
o
o
o
o
/
/
/
_
_
_
C
C
O
(
-


实现代码:
<div style="width: 100%; height: 466px;"> <div style="float: left; border: 2px solid #000; line-height: normal; background-color: #fff;"> <div style="width: 6.23em; height: 7.7em; font-family: Verdana; font-size: 60px; overflow: hidden;"> <div style="margin-top: -0.7em"> <div style="position: absolute; padding-left: 1.56em; padding-top: 0.37em;"> <div style="font-size: 2.57em; font-weight: bold; color: #000;">o</div> </div> <div style="position: absolute; padding-left: 1.62em; padding-top: 0.53em;"> <div style="font-size: 2.38em; font-weight: bold; color: #fff;">o</div> </div> <div style="position: absolute; padding-left: 1.2em; padding-top: 0.67em;"> <div style="font-size: 2.48em; color: #000;">o</div> </div> <div style="position: absolute; padding-left: 1.29em; padding-top: 0.85em;"> <div style="font-size: 2.23em; color: #fff;">o</div> </div> <div style="position: absolute; padding-left: 1.57em; padding-top: 2.03em;"> <div style="width: 0.32em; height: 0.52em; background-color: #fff;"></div> </div> <div style="position: absolute; padding-left: 1.52em; padding-top: 1.56em;"> <div style="font-size: 0.8em; font-style: italic; color: #000;">(</div> </div> <div style="color: #000;"> <div style="position: absolute; padding-left: 1.07em; padding-top: 0.62em;"> <div style="font-size: 4.57em;">O</div> </div> <div style="position: absolute; padding-left: 1.05em; padding-top: 1.15em;"> <div style="font-size: 3.53em;">O</div> </div> <div style="position: absolute; padding-left: 1.12em; padding-top: 0.74em;"> <div style="font-size: 4.63em;">O</div> </div> <div style="position: absolute; padding-left: 1.08em; padding-top: 3.64em;"> <div style="font-size: 1.77em; font-weight: bold; font-style: italic;">\</div> </div> <div style="position: absolute; padding-left: 1.17em; padding-top: 4.8em;"> <div style="font-size: 3.29em; font-weight: bold; font-style: italic;">L</div> </div> <div style="position: absolute; padding-left: 3.14em; padding-top: 5.21em;"> <div style="font-size: 3.01em; font-weight: bold; font-style: italic; height: 0.96em; overflow: hidden;">(</div> </div> <div style="position: absolute; padding-left: 4.13em; padding-top: 3.23em;"> <div style="font-size: 0.7em; font-weight: bold;">O</div> </div> <div style="position: absolute; padding-left: 1.37em; padding-top: 5.08em;"> <div style="font-size: 0.97em; font-weight: bold;">O</div> </div> </div> <div style="color: #FED90E"> <div style="position: absolute; padding-left: 1.15em; padding-top: 0.76em;"> <div style="font-size: 4.37em;">O</div> </div> <div style="position: absolute; padding-left: 1.14em; padding-top: 1.26em;"> <div style="font-size: 3.37em;">O</div> </div> <div style="position: absolute; padding-left: 1.2em; padding-top: 0.87em;"> <div style="font-size: 4.42em;">O</div> </div> <div style="position: absolute; padding-left: 1.15em; padding-top: 3.61em;"> <div style="font-size: 1.7em; font-weight: bold; font-style: italic;">\</div> </div> <div style="position: absolute; padding-left: 1.24em; padding-top: 4.93em;"> <div style="font-size: 3.18em; font-weight: bold; font-style: italic;">L</div> </div> <div style="position: absolute; padding-left: 3.03em; padding-top: 5.05em;"> <div style="font-size: 3.2em; font-weight: bold; font-style: italic; height: 0.96em; overflow: hidden;">(</div> </div> <div style="position: absolute; padding-left: 4.18em; padding-top: 3.34em;"> <div style="font-size: 0.55em; font-weight: bold;">O</div> </div> </div> <div style="position: absolute; padding-left: 1.84em; padding-top: 2.37em;"> <div style="width: 1.92em; height: 5.76em; background-color: #FED90E;"></div> </div> <div style="position: absolute; padding-left: 3.70em; padding-top: 2.73em;"> <div style="width: .30em; height: 1.56em; background-color: #FED90E;"></div> </div> <div style="position: absolute; padding-left: 4.36em; padding-top: 3.51em;"> <div style="width: .16em; height: .34em; background-color: #FED90E;"></div> </div> <div style="position: absolute; padding-left: 1.62em; padding-top: 5.47em;"> <div style="font-size: 10px"> <div style="width: 2.6em; height: 3.0em; background-color: #FED90E;"></div> </div> </div> <div style="color: #000;"> <div style="position: absolute; padding-left: 1.23em; padding-top: 4.57em;"> <div style="font-size: 0.67em;">|</div> </div> <div style="position: absolute; padding-left: 1.23em; padding-top: 4.37em;"> <div style="font-size: 0.67em;">|</div> </div> <div style="position: absolute; padding-left: 1.34em; padding-top: 4.37em;"> <div style="font-size: 0.67em;">\</div> </div> <div style="position: absolute; padding-left: 1.4em; padding-top: 4.53em;"> <div style="font-size: 0.67em;">\</div> </div> <div style="position: absolute; padding-left: 1.55em; padding-top: 4.49em;"> <div style="font-size: 0.67em;">|</div> </div> <div style="position: absolute; padding-left: 1.55em; padding-top: 4.19em;"> <div style="font-size: 0.67em;">|</div> </div> <div style="position: absolute; padding-left: 1.66em; padding-top: 4.19em;"> <div style="font-size: 0.67em;">\</div> </div> <div style="position: absolute; padding-left: 1.76em; padding-top: 4.45em;"> <div style="font-size: 0.67em;">\</div> </div> <div style="position: absolute; padding-left: 1.27em; padding-top: 2.54em;"> <div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div> </div> <div style="position: absolute; padding-left: 1.51em; padding-top: 2.18em;"> <div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div> </div> <div style="position: absolute; padding-left: 2.31em; padding-top: 5.32em;"> <div style="font-size: 1.47em; font-weight: bold; font-style: italic;">(</div> </div> <div style="position: absolute; padding-left: 2.29em; padding-top: 5.69em;"> <div style="font-size: 1.11em; font-weight: bold;">(</div> </div> <div style="position: absolute; padding-left: 2.92em; padding-top: 4.72em;"> <div style="font-size: 2.4em; font-weight: bold;">8</div> </div> <div style="position: absolute; padding-left: 2.43em; padding-top: 3.96em;"> <div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div> </div> <div style="position: absolute; padding-left: 2.31em; padding-top: 4.05em;"> <div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div> </div> <div style="position: absolute; padding-left: 2.33em; padding-top: 4.37em;"> <div style="font-size: 3.06em; font-weight: bold;">o</div> </div> </div> <div style="color: #CDB26F"> <div style="position: absolute; padding-left: 2.39em; padding-top: 5.36em;"> <div style="font-size: 1.38em; font-weight: bold; font-style: italic;">(</div> </div> <div style="position: absolute; padding-left: 2.37em; padding-top: 5.75em;"> <div style="font-size: 1.04em; font-weight: bold;">(</div> </div> <div style="position: absolute; padding-left: 2.95em; padding-top: 4.82em;"> <div style="font-size: 2.25em; font-weight: bold;">8</div> </div> <div style="position: absolute; padding-left: 2.49em; padding-top: 4.15em;"> <div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div> </div> <div style="position: absolute; padding-left: 2.39em; padding-top: 4.22em;"> <div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div> </div> <div style="position: absolute; padding-left: 2.4em; padding-top: 4.5em;"> <div style="font-size: 2.87em; font-weight: bold;">o</div> </div> </div> <div style="position: absolute; padding-left: 2.98em; padding-top: 6.09em;"> <div style="width: .76em; height: 1em; background-color: #CDB26F;"></div> </div> <div style="color: #000"> <div style="position: absolute; padding-left: 3.69em; padding-top: 4.28em;"> <div style="font-size: 2.2em;">o</div> </div> <div style="position: absolute; padding-left: 4.62em; padding-top: 5.42em;"> <div style="font-size: 1.01em;">)</div> </div> <div style="position: absolute; padding-left: 4.78em; padding-top: 5.72em;"> <div style="font-size: 0.72em;">)</div> </div> <div style="position: absolute; padding-left: 4.53em; padding-top: 5.65em;"> <div style="font-size: 0.94em;">b</div> </div> <div style="position: absolute; padding-left: 4em; padding-top: 5.09em;"> <div style="font-size: 1.59em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 3.33em; padding-top: 4.79em;"> <div style="font-size: 1.95em; font-weight: bold;">O</div> </div> <div style="position: absolute; padding-left: 3.15em; padding-top: 4.3em;"> <div style="font-size: 2.42em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 3.01em; padding-top: 4.46em;"> <div style="font-size: 2.23em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 2.88em; padding-top: 4.43em;"> <div style="font-size: 2.23em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 2.81em; padding-top: 4.71em;"> <div style="font-size: 1.9em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 3.69em; padding-top: 4.74em;"> <div style="font-size: 1.97em; font-weight: bold;">o</div> </div> </div> <div style="color: #CDB26F"> <div style="position: absolute; padding-left: 3.7em; padding-top: 4.4em;"> <div style="font-size: 2.06em;">o</div> </div> <div style="position: absolute; padding-left: 4.57em; padding-top: 5.44em;"> <div style="font-size: 0.95em;">)</div> </div> <div style="position: absolute; padding-left: 4.49em; padding-top: 5.66em;"> <div style="font-size: 0.88em;">b</div> </div> <div style="position: absolute; padding-left: 4.01em; padding-top: 5.14em;"> <div style="font-size: 1.48em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 3.37em; padding-top: 4.84em;"> <div style="font-size: 1.83em; font-weight: bold;">O</div> </div> <div style="position: absolute; padding-left: 3.21em; padding-top: 4.38em;"> <div style="font-size: 2.27em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 3.07em; padding-top: 4.54em;"> <div style="font-size: 2.09em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 2.95em; padding-top: 4.53em;"> <div style="font-size: 2.08em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 2.88em; padding-top: 4.78em;"> <div style="font-size: 1.78em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 3.71em; padding-top: 4.79em;"> <div style="font-size: 1.85em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 2.87em; padding-top: 4.59em;"> <div style="font-size: 1.93em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 3.09em; padding-top: 4.55em;"> <div style="font-size: 1.93em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 2.73em; padding-top: 5.03em;"> <div style="font-size: 1.44em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 2.59em; padding-top: 5.77em;"> <div style="font-size: 0.82em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 3.04em; padding-top: 6.4em;"> <div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div> </div> <div style="position: absolute; padding-left: 3.03em; padding-top: 6.4em;"> <div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div> </div> <div style="position: absolute; padding-left: 3.02em; padding-top: 6.4em;"> <div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div> </div> </div> <div style="position: absolute; padding-left: 3.24em; padding-top: 2.49em;"> <div style="font-size: 2.76em; font-weight: bold; color: #000;">•</div> </div> <div style="position: absolute; padding-left: 3.34em; padding-top: 2.68em;"> <div style="font-size: 2.49em; font-weight: bold; color: #fff;">•</div> </div> <div style="position: absolute; padding-left: 4.2em; padding-top: 4.26em;"> <div style="font-size: 0.28em; font-weight: bold; color: #000;">•</div> </div> <div style="position: absolute; padding-left: 3.9em; padding-top: 4.05em;"> <div style="font-size: 1.47em; font-weight: bold; color: #000;">•</div> </div> <div style="position: absolute; padding-left: 3.99em; padding-top: 4.23em;"> <div style="font-size: 1.2em; font-weight: bold; color: #FED90E;">•</div> </div> <div style="position: absolute; padding-left: 3.66em; padding-top: 4.7em;"> <div style="font-size: 10px"> <div style="width: 4.6em; height: 3.88em; background-color: #FED90E;"></div> </div> </div> <div style="position: absolute; padding-left: 3.68em; padding-top: 3.36em;"> <div style="font-size: 1.2em; color: #000;">_</div> </div> <div style="position: absolute; padding-left: 3.68em; padding-top: 4.03em;"> <div style="font-size: 1.2em; color: #000;">_</div> </div> <div style="position: absolute; padding-left: 3.64em; padding-top: 4.03em;"> <div style="font-size: 1.2em; color: #000;">_</div> </div> <div style="position: absolute; padding-left: 1.96em; padding-top: 2.33em;"> <div style="font-size: 3.04em; font-weight: bold; color: #000;">•</div> </div> <div style="position: absolute; padding-left: 2.06em; padding-top: 2.5em;"> <div style="font-size: 2.77em; font-weight: bold; color: #fff;">•</div> </div> <div style="position: absolute; padding-left: 2.67em; padding-top: 4.23em;"> <div style="font-size: 0.28em; font-weight: bold; color: #000;">•</div> </div> <div style="position: absolute; padding-left: 1.46em; padding-top: 5.18em;"> <div style="font-size: 0.66em; color: #000;">C</div> </div> <div style="position: absolute; padding-left: 1.47em; padding-top: 5.4em;"> <div style="font-size: 0.66em; color: #000;">C</div> </div> <div style="position: absolute; padding-left: 1.62em; padding-top: 5.53em;"> <div style="font-size: 10px"> <div style="width: 2.2em; height: 2.2em; background-color: #FED90E;"></div> </div> </div> <div style="position: absolute; padding-left: 1.45em; padding-top: 5.19em;"> <div style="font-size: 0.8em; font-weight: bold; color: #FED90E;">O</div> </div> <div style="position: absolute; padding-left: 1.58em; padding-top: 5.47em;"> <div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: #000;">(</div> </div> <div style="position: absolute; padding-left: 1.62em; padding-top: 5.46em;"> <div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: #000;">-</div> </div> </div> </div> </div> </div> <br/>

来源: http://www.romancortes.com/blog/homer-css/

本文转载自:http://www.cnblogs.com/del/archive/2009/02/12/1389481.html

共有 人打赏支持
涂孟超
粉丝 12
博文 2004
码字总数 14107
作品 0
深圳
程序员
分享6个非常酷的图片特效(HTML5和jQuery)

在网页世界里,图片毋庸置疑扮演着非常重要的角色。然而我们平时看到的一些图片都只是静态的,或者是一些gif动画图片,今天我向大家分享6个超级震撼的网页图片特效,其中有基于jQuery的,也有...

tp_wire ⋅ 2012/06/28 ⋅ 8

如何用css3实现风车效果

前面讲过css3可以替代很多js实现的效果,其实很多时候纯css3甚至可以替代图片,直接用css3就可以画出一些简单的图片。虽然css3画出来的图片效果可能不如直接用图片的好,实现起来也比较复杂,...

流浪老三 ⋅ 2013/09/20 ⋅ 0

【前端切图】用css画一个卡通形象-小猪佩奇

最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服。研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣,果断收藏。 话不多说,直...

祈澈姑娘 ⋅ 05/18 ⋅ 0

有关UITableViewCell中UIImageView的尺寸问题

UITableViewCell是使用布局画出来的,在上面有一个UIImageView控件,指定Mode属性为Scale To Fill,并设定好其Width和Height的值,然后运行 结果图片超出了我设置的UIImageView的大小,并没有...

Henry_Chen ⋅ 2012/10/18 ⋅ 8

自定义控件三部曲之绘图篇(十七)——为Bitmap添加阴影并封装控件

前言:再重复一遍我很喜欢的一句话,送给大家:迷茫,本就是青春该有的样子 ,但不要让未来的你,讨厌现在的自己 系列文章: Android自定义控件三部曲文章索引:http://blog.csdn.net/harvic...

harvic880925 ⋅ 2016/07/12 ⋅ 0

R语言如何画个性化词云图

我之前写了一篇关于使用wordcloud包的文本可视化的博客。点击查看. Ian Fellows与2014-06-13公布了wordcloud包,之前我用wordcloud包写了一篇关于文本可视化的博客。这里就不再多说了。就在今...

wzgl__wh ⋅ 2016/09/03 ⋅ 0

使用TexturePacker一键生成CSS sprites

先来简单介绍一下CSS sprites,这是干嘛用的。众所周知,我们在设计网页时,会有很多很多的网页小元素,例如导航按钮,社交图标,网站背景图等等。一般情况下,这些图片都是单独形式存在的,...

MrLovelyCbb ⋅ 2014/04/01 ⋅ 0

有没有一段代码,让你觉得人类的智慧也可以璀璨无比?

网友在知乎的一个提问帖,网址:https://www.zhihu.com/question/30262900 : 有没有一段代码,让你觉得人类的智慧也可以璀璨无比? 不一定要是完整算法,就是那种看着看着就觉得嗨爆了,惊为...

oschina ⋅ 2016/03/26 ⋅ 21

大家帮忙看下,Android做了一个图库程序,不过在GridView的item上遇到了问题,里头的ImageVIew有问题?

想给每个Item画个边框,一条灰线和一条红线,用了Shape,然而结果却是有的画出了红线有的却没有(灰线都有), 想不通是什么原因,我的缩略图都是1:1的,不过如果设置的是background,如果是一...

火龙神S ⋅ 2015/10/06 ⋅ 5

CSS 多个图标的优化

CSS 多个图标的优化 今天去查看了一下WEBQQ音乐的前台源码,发现它对播放器的图标只是用了一张图片,发现这是一个很好的一个CSS优化的切入点,于是,就实现了一下,整个代码如下: 对于整个页...

年少爱追梦 ⋅ 2016/06/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 今天 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 今天 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 今天 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

eclipse酷炫大法之设置主题、皮肤

eclipse酷炫大法 目前两款不错的eclipse 1.系统设置 Window->Preferences->General->Appearance 2.Eclipse Marketplace下载【推荐】 Help->Eclipse Marketplace->搜索‘theme’进行安装 比如......

anlve ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部