风车字代码 转自马黑教程专版

admin

admin

<style type="text/css">
.outer {
        display: flex;
        justify-content: center;
        width: 300px;
        height: 300px;
        background: none;
        position: relative;
        animation: Roll 10s linear infinite;
}
.inner {
        position: absolute;
        width: 30px;
        height: 30px;
        font: bold 20px/30px '微软雅黑' ;
        color: #d2691e;
        text-align: center;
        background: none;
        transform-origin: 50% 150px;
}
@keyframes Roll {
        to { transform: rotate(-1turn); }
}
</style>

<div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
</div>

<script>
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;
</script>

admin

风车字实现原理：

一个外层 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 盒子里。