文字效果集中营

马黑黑

219楼风车字实现原理：

一个外层 div 盒子，.outer 选择器，相对定位，背景色设为无（transparent也行），负责规范环形文字活动范围，同时转圈圈。它的这两句很重要：

        display: flex;
        justify-content: center;


这是用了弹性布局（flex）， justify-content: center 一句规范了弹性布局水平方向的项目居中。这将给我们后面的文字盒子布局制造方便。

里层的 div 盒子，.inner 选择器，绝对定位，30*30的尺寸是为放单独一个字准备的，这个选择器将会被JS调用 30 次。它有一句是以前没有介绍过的：

        font: bold 20px/30px '微软雅黑' ;

这是一口气在 font 属性里定义了粗体（bold）、字体大小（20px）、行高（即line-height，30px）、字体（即 font-family，'微软雅黑'）。这些属性本来要用4个语句表述，这里用了font属性，一句就行了；其中应注意的是字体大小和行高的表达，20px/30px，不是相除之意，是字体大小和字体行高的设定方式。

里层的 div 我们都不设定 left 和 top 值，让它们按绝对定位的样子自己占位，实际情形时 left 和 top 值都是0，所有的 class 属性为 inner 的 div 盒子都这样。所以，我们就好给它们制定一个统一的 transform-origin 运动直径：

        transform-origin: 50% 150px;

这将令所有的 inner 类盒子如果做 transform rotate 翻转的话，将在外层盒子内按圆周均匀布排。正上、正下、正左、正右的 inner div与外层盒子的边线相切。

CSS里的动画，设计为逆时针旋转，这样可能有助于对风车字的阅读。

JS代码部分应该是简单的：

var text = "万万千千恨前前后后山傍人道我轿儿宽不道被他遮得望伊难真的好难";
var str = "";
         
for(i=0; i<30; i++) {
        str += "<div class='inner' style='transform: rotate(" + i*12 +"deg)'>" + text.charAt(i) + "</div>\n";
}
document.querySelector(".outer").innerHTML = str;


两个变量：text 是要输出的文字，30个字刚好能围一圈，不足的补一下符号什么的，否则风车有缺口；str 变量用于装载马上要处理的输出样式。

一个for循环语句：老一套的字串拼接，把 text 变量里的字一一拆开放入 inner 类盒子里，通过 transform rotate 方式将 inner 类盒子打散到圆圈四周。需要解释的JS处理机制是：

其一，rotate的角度问题。30个字需要30个inner盒子，每一个盒子所占的弧度是12，rotate(i*12deg)就是这么来的；
其二，获取文字的方法，用了 chartAt() JS内置函数，它从 0 开始 获取第一个被处理字串里的字，text.charAt(i) 就是这样来的。

最后将拼接的字串显示在类名为 .outer 的 div 盒子里。

红影

马黑黑 发表于 2022-3-20 19:16
219楼风车字实现原理：

一个外层 div 盒子，.outer 选择器，相对定位，背景色设为无（transparent也行） ...

这个风车字还没看到呢，做转动的轱辘诗太方便了

红影

font: bold 20px/30px '微软雅黑' ;

这是一口气在 font 属性里定义了粗体（bold）、字体大小（20px）、行高（即line-height，30px）、字体（即 font-family，'微软雅黑'）。这些属性本来要用4个语句表述，这里用了font属性，一句就行了；其中应注意的是字体大小和行高的表达，20px/30px，不是相除之意，是字体大小和字体行高的设定方式。


这个厉害了，这么简洁就都设置好了呢

马黑黑

红影 发表于 2022-3-21 19:28
font: bold 20px/30px '微软雅黑' ;

这是一口气在 font 属性里定义了粗体（bold）、字体大小（20px）、 ...

这叫语法糖。编程语言中都有简写的方法，多个属性同在一行内写的，叫语法糖。语法糖不是都存在，要看情况。

马黑黑

红影 发表于 2022-3-21 19:26
这个风车字还没看到呢，做转动的轱辘诗太方便了

好像你做的一个帖子里，文字不是转圈圈吗

红影

马黑黑 发表于 2022-3-21 19:44
这叫语法糖。编程语言中都有简写的方法，多个属性同在一行内写的，叫语法糖。语法糖不是都存在，要看情况 ...

不看解释还真的不知道一个指字的大小一个指线高，还以为是除数关系呢

红影

马黑黑 发表于 2022-3-21 19:44
好像你做的一个帖子里，文字不是转圈圈吗

那个我是用你之前的代码做的，没这个简洁。

马黑黑

红影 发表于 2022-3-21 20:11
那个我是用你之前的代码做的，没这个简洁。

酱紫呀

马黑黑

红影 发表于 2022-3-21 20:11
不看解释还真的不知道一个指字的大小一个指线高，还以为是除数关系呢

没接触过当然不懂

红影

马黑黑 发表于 2022-3-21 22:53
没接触过当然不懂

那是当然，现在总算知道了

马黑黑

红影 发表于 2022-3-22 14:30
那是当然，现在总算知道了

知道的不晚

红影

马黑黑 发表于 2022-3-22 18:18
知道的不晚

你这个风车字的代码完全不同呢。学到新的方法了

马黑黑

红影 发表于 2022-3-22 20:50
你这个风车字的代码完全不同呢。学到新的方法了

风车字，好像不是什么新内容，只是通过JS让文字沿圆周布局然后整体转圈圈

红影

马黑黑 发表于 2022-3-22 20:53
风车字，好像不是什么新内容，只是通过JS让文字沿圆周布局然后整体转圈圈

和svg不一样，我是说和那个相比，又多个表现方式

马黑黑

红影 发表于 2022-3-22 21:15
和svg不一样，我是说和那个相比，又多个表现方式

那个也是可以的

马黑黑

I can fly now.

马黑黑

236楼：JS动态生成CSS @keyframes 动画代码——


<style type="text/css">

.wai-zmd { /* 走马灯父框 */
        position: absolute;
        width: 400px;
        height: 300px;
        overflow: hidden;
}
.wai-zmd div {/* 走马灯文本框 */
        position: absolute;
        top: 300px;/*与父框高度同 */
        min-height: 20px;
        font: normal 20px Sans-Serif;
        color: #000;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .25);
}

</style>

<div class="wai-zmd">
        <div id="txt-zmd">
                I can fly now.
        </div>
</div>

<script language="javascript">

zmd();

function zmd(){
        var ziBox = document.getElementById('txt-zmd');
        var w = ziBox.clientWidth / 2;
        var h = ziBox.clientHeight;
        var style = document.createElement('style');
        var keyframes = '@keyframes fly {to { top: -' + h + 'px;}}';
        style.type = 'text/css';
        style.innerHTML = keyframes;
        ziBox.appendChild(style);
        ziBox.style.animation = 'fly 10s linear infinite';
        ziBox.style.left = 'calc(50% - ' + w + 'px)'; //元素居中
}

</script>

马黑黑

237楼 文本自下而上走马灯代码说明
实现原理实际上是 css 的 @keyframes 动画，但由于存在不确定因素，所以通过 JS 动态生成 @keyframes 动画并向文本盒子发出 animation 运行指令。


CSS 代码相对容易理解，要注意的地方是父框与子框都需要定位，或 relative 或 absolute 都可以；父框的 overflow: hidden; 是关键，它确保文本盒子只显示在父框之内；父框的宽高尺寸根据应用场景设置，子框的 top 值要与父框的高度值相一致或相差不大。

定位HTML元素可在 CSS 代码的父盒子即 .wai-zmd 内通过 left 和 top 值来完成，其他的修饰，可在父盒子、子盒子中修改、添加。这些，不建议在HTML中做。

JS部分不多做解释，一般情况下套用就好，要说明的是需要修改的部分，其实就一句：

ziBox.style.animation = 'fly 10s linear infinite';

10s 这里，应该能看出是动画的一个运行周期时长，实际使用时应根据文本的长短来设定，比如文本多，则装载文本的高度就会被撑开，它要走动的距离就长，多少时间一个运行周期合适要自己调试。

另外，非常重要的，是HTML的构造：

<div class="wai-zmd">
        <div id="txt-zmd">
                I can fly now.
        </div>
</div>



其中，装载文本的div盒子必须这样使用 id 属性，JS要读取它。

马黑黑

I can fly now.

红影

马黑黑 发表于 2022-3-22 23:18
那个也是可以的

不同的代码，同样能展现效果