Date Time

14/01/12 19:14

Author

一个 Div 可以做到的 ……

起因是 Cry 姐在群里提到了 box-shaodow 的 Spread Distanc 属性，于是在测试时钉子就想到做了这样一个模拟了一张 CD 的页面。整个页面只用了一个 div 元素，全部效果完全通过 CSS 实现。查看效果→

One-Div-CSS3-CD

DOM 如下：

<body><div></div></body>

光盘整体通过多 box-shadow 和控制阴影距离以及模糊实现，为了保证透明后配色能看调了半天。上下的文字都通过伪元素添加，其中上方的标题用到了 text-shadow 模拟立体效果。四个小点是利用了 border-image 在 Webkit 下诡异的默认渲染和 linear-gradient 的错误打开方式模拟，在别的内核下貌似没有效果。

下方的换行尝试用 Unicode 换行符失败，最后在 Cry 姐建议下用 white-space: pre; 加空格模拟成功，最后在 +Kerwin Che 的建议下发现只要在 pre 模式下就可以使用 /A 换行了 …… 尝试把 div 元素本身的内容利用起来，但是发现无法完成文字弯曲围绕在光盘内盘的效果只好作罢。暂时就想到了这些玩法，如果还有不破坏美观继续给页面添加元素的纯 CSS 方法敬请告知~

树说道：

2014/01/12 20:19

钉子菊苣V587

回复
7IN0SAN9说道：

2014/01/12 21:49

釘子果然 V587
在下這個苦逼的後台程序猿果真還是老老實實去寫 json、xml 吧……

“為什麽這個網站我什麼也看不懂？這樣的東西也算是做好了？”
“你需要一個前端工程師弄一個 gui，然後用 js 什麼的解析 json。嘖，現在的年輕人啊，都不懂 ASCII 藝術。說好的每百行代碼160，快點付錢！”→_→

回复
Vespa说道：

2014/01/13 00:03

/A这个算学到了~

回复
oott123说道：

2014/01/13 02:15

这啥。

回复
Star Brilliant说道：

2014/01/13 19:21

四个小点没有看懂……

回复
小明猪说道：

2014/01/14 21:24

棒。。。

回复
千与琥珀说道：

2014/01/16 13:35

神一般的css3….

回复
1. Dimpurr说道：
  
  2014/01/16 19:06
  
  =w= 新技术什么的太棒了~
  
  回复
Kunr说道：

2014/01/16 16:58

css很神奇

回复
Leniy说道：

2014/01/18 16:54

大家的im等个人介绍页面都好强大啊。比我的好多了

回复
1. Dimpurr说道：
  
  2014/01/20 15:14
  
  你的也挺厉害啊 ……
  
  回复
  1. Leniy说道：
    
    2014/01/21 09:47
    
    我的首页中的信息量太少了，只有一个印章能跳转到博客而已
    
    回复
lovee说道：

2014/01/20 00:17

菊苣您好这是我的膝盖请收下（泥垢

回复
Dzing说道：

2014/01/20 22:17

神级别，酷毙了的div

回复
南寻说道：

2014/01/21 10:12

好厉害的样子~

回复
AkibaRika说道：

2014/01/21 15:19

巨巨你好这里是我的膝盖！

回复
Ricter说道：

2014/02/07 11:41

菊苣我的膝盖请收下

回复
1. Messiah说道：
  
  2017/05/22 13:00
  
  惊现RR= =。顺便博主收下我的膝盖！
  
  回复
cry说道：

2014/03/01 23:15

嗯，你的部落格真漂亮。

回复
baka343说道：

2014/03/29 20:02

菊苣这是我今天的膝盖

回复
xloger说道：

2014/04/05 23:42

-，=我果然得花点时间在我blog上了。。。

回复
Tammy是大叔说道：

2014/06/03 14:34

釘子果然 V587

回复
最推荐说道：

2014/07/28 20:14

你到网上搜一下CSS 文字路径，我记得HTML5+CSS3是能实现文字弯曲显示的

回复
Frantic1048说道：

2015/01/06 12:25

Spread Distanc(e) (:з」∠)

折腾文字路径啥的赶脚还是 SVG 比较好使呢，既然是一个 div，那就可以

background: url(‘data:image/svg+xml;utf8, balabala…… ‘);

嗯。。。然后内容什么的有多大脑洞开多大就行了（是不是跑题了ˊ_>ˋ

回复
1. Frantic1048说道：
  
  2015/01/06 12:31
  
  background: url(‘data:image/svg+xml;utf8, … ‘);
  
  svg标签直接被过滤掉了Σ(っ°Д °;)っ
  为啥不做个转义呢(。・_・。)
  
  回复
  1. Dimpurr说道：
    
    2015/01/09 20:27
    
    怪 WordPress 吧 www SVG 确实实时生成各种效果要比 CSS 强大多了～
    
    回复
Menci说道：

2015/03/07 12:16

传说中border的妙用…….

回复
小贱贱说道：

2015/03/27 11:35

大神啊我也是前端开发现在在学习nodejs

回复
notFound说道：

2016/03/16 12:30

请收下我的膝盖

回复
zthxxx说道：

2016/12/25 01:30

还可以让他转起来嘛，更有唱片的感觉

回复
zthxxx说道：

2016/12/25 01:42

加了两行代码，可以在这儿看转动效果
http://codepen.io/zthxxx/pen/YpbrVe
div {
-webkit-animation:rotate 10s infinite linear;
}

@-webkit-keyframes rotate{
0%{
-webkit-transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
}
}

回复
1. Handle说道：
  
  2016/12/27 01:29
  
  新的又一个dalao的回复！
  
  回复

钉子の次元

Dimpurr – an artist, designer and developer from China.

Date Time

Author

Category

Tags

一个 Div 可以做到的 ……

取消回复