CSS inliner换行和 animation content的使用小记

最新推荐文章于 2024-07-27 17:24:14 发布

转载最新推荐文章于 2024-07-27 17:24:14 发布 · 1.2k 阅读

CSS 同时被 2 个专栏收录

25 篇文章

订阅专栏

html

13 篇文章

订阅专栏

本文介绍如何使用CSS实现文本换行及动画加载效果，探讨不同布局方法，并通过Unicode字符和CSS3动画实现优雅的字符级动画。

From: http://www.zhangxinxu.com/wordpress/2016/11/css-content-pre-animation-character-loading/

小tip: 使用CSS(Unicode字符)让inline水平元素换行

从语义上来讲，这里使用定义标题最为合适，具体结构和样式呢？下面展示几个技术实现：

每个键值对都使用一个dl。如下：

<dl>
    <dt>提问：</dt><dd>为什么没有男朋友？</dd>
</dl>
<dl>
    <dt>回答：</dt><dd>男朋友是什么、可以吃吗？</dd>
</dl>

使用浮动。

dt { float: left; }
dd { margin-left: 0; }

但是，浮动这东西是个魔鬼，破坏流体布局，易抽风。就拿这个例子来说，上面的代码看似没有可疑之处，实际上，在浏览器下的效果如下（由于图片默认基线对齐，文字下沉了）：

使用display: run-in;

dt { display: run-in; }
dd { margin-left: 0; }

display: run-in;被修饰的元素根据上下文决定是块元素还内联元素

上面生涩的释义没看懂？正好，直接顾名思意：当前元素跑-进(run-in)后面的元素。

对于支持的浏览器，例如IE9，就是下面效果:
display:run-in支持下的效果张鑫旭-鑫空间-鑫生活

对于不支持的（如FF）就是下面这副德行：
不支持的火狐浏览器下的效果截图张鑫旭-鑫空间-鑫生活

在每个dd后面使用<br />，当然，dt, dd要设置成inline水平的。不过嘛，从合法性上将，block水平后面的<br />是不合法的~~

助Unicode字符，CSS实现换行

关键CSS代码就是下面：

dd:after {
    content: '\A';
    white-space: pre;
}

上面"\A"就是神奇值所在。包含换行符的CR和LF字符^①一般都是unicode字符，其可像其他unicode字符一样随便插。它们分别有000D和000A Unicode编码。这就意味着，如果偶们escape内容合理，其就可以像普通内容一样插插插！

//zxx: 上面这段上标为①处的“CR和LF字符”分别指回车(CR)和换行(LF). 回车CR-将光标移动到当前行(?) 的开头；换行LF-将光标“垂直”移动到下一行（并不移动到下一行的开头，即不改变光标水平位置）。

上面的代码纯粹CSS2.1的东西，与CSS3没有直系血缘。

代码很短，这里也完整展示下：

dd, dt { display: inline; margin: 0; }
dd:after {
    content: '\A';
    white-space: pre;
}

<dl>
    <dt>提问：</dt><dd>为什么没有男朋友？</dd>
    <dt>回答：</dt><dd>男朋友是什么、可以吃吗？[抠鼻图片][抠鼻图片]</dd>
</dl>

因为使用了after伪类，因此上面方法支持的浏览器为IE8+，以及其他靠谱浏览器。经过自己的测试，content内容只能是"\A"或者需要包括"\A"，大小写无妨。

进一步改进

原因是：有可能dd元素不止一个。

其改进后的CSS代码如下：

dt:before {
    content: '\D\A';
    white-space: pre;
}
dt:first-child:before { content: normal; }

原理显而易见：标题元素前换行，去除第一个标签元素前面的换行符。

关于字符打点动画实现

利用CSS content内容生成技术以及CSS3 animation实现的

CSS代码如下：

dot {
    display: inline-block; 
    height: 1em; line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}
dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;   /* 也可以是white-space: pre */
    animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}

HTML代码如下：

订单提交中<dot>...</dot>

使用自定义<dot>元素的好处是IE7,IE8浏览器根本就不认识这个元素，相关CSS会忽略，直接显示3个点；使用::before伪元素，display设置为block原因在于其他现代浏览器可以把原来的3个点推到看不见的最下面，显示的是content插入的第1行的3个点。于是，全浏览器都显示良好。

有此可见，创意固然重要，基础和细节也是不可忽视的，这样，才能实现完美的效果——现在这种实现，外面标签的宽度就是3个点的宽度，不要担心超出或剪裁，字符实现，和前面的文字字体，颜色保持一致，完美！

content字符生成配合CSS3 animation各类字符loading效果实现

其实，content字符生成配合CSS3 animation可以实现的不仅仅是打点这一种字符动画效果，你使用其他一些有意思的字符就能时间更多有意思的loading效果，如下截图(代码来自：https://github.com/tawian/text-spinners)：

例如，我们命令行中常见的loading动画实现只要content设置为下面这个值就可以：

.loading::after {
  display: inline-table;
  content: "/\A–\A\\\A|";
  white-space: pre;
  animation: spin4 2s steps(4) infinite;
}