论坛 › 马黑黑教程专版 › 图图专用帖

马黑黑 发表于 2022-4-4 18:33

马黑黑 发表于 2022-4-12 07:49

<style type="text/css">
.outer {
        --len: 300px;
        margin: 50px auto 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--len);
        height:var(--len);
        position: relative;
}
.outer div {
        position: absolute;
        font: bold 2.5em / calc(var(--len) / 2) '宋体';
        text-align: center;
        text-shadow: 1px 1px 2px #111;
        border-radius: 50%;
        color:#0B3B39;
}
</style>

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

<script language="javascript">

let txt= "君自故鄉來應知故鄉事來日綺窗前寒梅著花未";
let outer = document.querySelector(".outer");
let width = outer.clientWidth;
let total = txt.length;
let angle = 360 / total;
let str = "";
for(j=0; j<total; j++) {
        let transform =`rotate(${angle * j}deg) translateY(-${width / 2}px) rotate(${360 - angle*j}deg)`;
        let color = `#${Math.random().toString(16).substr(-6)}`;
        str += `<div style="color: ${color}; transform: ${transform};">${txt.charAt(j)}</div>\n`;
}
outer.innerHTML = str;
</script>

马黑黑 发表于 2022-4-12 07:56

42楼多彩环形文字代码：
<style type="text/css">
.outer {
        --len: 300px;
        margin: 50px auto 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--len);
        height:var(--len);
        position: relative;
}
.outer div {
        position: absolute;
        font: bold 2.5em / calc(var(--len) / 2) '宋体';
        text-align: center;
        text-shadow: 1px 1px 2px #111;
        border-radius: 50%;
        color:#0B3B39;
}
</style>

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

<script language="javascript">

let txt= "君自故鄉來應知故鄉事來日綺窗前寒梅著花未";
let outer = document.querySelector(".outer");
let width = outer.clientWidth;
let total = txt.length;
let angle = 360 / total;
let str = "";
for(j=0; j<total; j++) {
        let transform =`rotate(${angle * j}deg) translateY(-${width / 2}px) rotate(${360 - angle*j}deg)`;
        let color = `#${Math.random().toString(16).substr(-6)}`;
        str += `<div style="color: ${color}; transform: ${transform};">${txt.charAt(j)}</div>\n`;
}
outer.innerHTML = str;
</script>

马黑黑 发表于 2022-4-12 08:01

43楼代码中，当圆环文本字数较多或较少时，可适当修改CSS变量 --len 的值。文本样式设置在第十四行代码中，

font: bold 2.5em / calc(var(--len) / 2) '宋体';

bold为粗体，2.5em 为字号（可用px做单位），calc 部分是行高，后面的是字体。

马黑黑 发表于 2022-4-12 13:27

马黑黑 发表于 2022-4-15 19:18

马黑黑 发表于 2022-4-15 19:23

马黑黑 发表于 2022-4-16 21:41

<style>
.txtBox {
        margin: auto;
        width: 400px;
        min-height: 520px;
        background-image: linear-gradient(#fff 25px, #ed8181db 0);
        background-size: 26px 26px;
        font: 16px / 26px Sans-serif;
}
</style>

<div class="txtBox"><b><font color="#ff0000">
稿纸样式一</font></b><br>
实现方式：线性渐变背景 ——<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;background-image: linear-gradient(#fff 25px, #ed8181db 0);<br><br>要求① ：font: 16px / 26px Sans-serif;<br><br>字体的设置必须为那个样子，尤其是行高。这是要与线性背景的设置项配套，就是一下这一句：<br><br>background-size: 26px 26px;<br><br>要求②：换行用 &lt;br&gt;，一个&lt;br&gt;一行。自然语句流会自动换行，无需干预，仅在分段时用&lt;br&gt;标签。论坛可视化编辑模式下，按&nbsp;shift+回车相当于HTML下加入了&lt;br&gt;标签。<br><br>论坛可视化编辑模式下，到本行止，一切正常。但……<br><br><div style="text-align: right;">2022-4-16</div></div>

马黑黑 发表于 2022-4-17 11:28

马黑黑 发表于 2022-4-17 22:41

马黑黑 发表于 2022-4-20 07:55

马黑黑 发表于 2022-5-1 19:48

马黑黑 发表于 2022-5-1 22:32

本帖最后由 马黑黑 于 2022-5-1 22:47 编辑

<style>
.mama {
        margin: auto;
        width: 300px;
        height: 300px;
        position: relative;
}
.flower {
        width: 50%;
        height: 50%;
        left: 50%;
        border-radius: 0 100%;
        transform-origin: 0 100%;
        position: absolute;
}
</style>

<div class="mama"></div>

<script>
let mama = document.querySelector('.mama');
let str = '';
for(j=0; j< 8; j++) {
        let c1 = `#${Math.random().toString(16).substr(-6)}`;
        let c2 = `#${Math.random().toString(16).substr(-6)}`;
        str += `<div class='flower' style='background-image: linear-gradient(${c1}, ${c2}); transform: rotate(${45*j}deg);'></div>`;
}
mama.innerHTML = str;
</script>

马黑黑 发表于 2022-5-2 11:33

马黑黑 发表于 2022-5-4 23:12

马黑黑 发表于 2022-5-6 17:08

马黑黑 发表于 2022-5-6 17:08

马黑黑 发表于 2022-5-7 07:33

<details>
<summary>Dog</summary></details>

马黑黑 发表于 2022-5-14 18:06

<details>
        <summary>查看</summary>
      <p></p>
</details>

马黑黑 发表于 2022-5-15 08:36

<details>
<summary>点击查看</summary>

</details>

查看完整版本: 图图专用帖