图图专用帖

马黑黑

rain

马黑黑

马黑黑

42楼多彩环形文字代码：

1. <style type="text/css">
   
2. .outer {
   
3.         --len: 300px;
   
4.         margin: 50px auto 0;
   
5.         display: flex;
   
6.         justify-content: center;
   
7.         align-items: center;
   
8.         width: var(--len);
   
9.         height:  var(--len);
   
10.         position: relative;
    
11. }
    
12. .outer div {
    
13.         position: absolute;
    
14.         font: bold 2.5em / calc(var(--len) / 2) '宋体';
    
15.         text-align: center;
    
16.         text-shadow: 1px 1px 2px #111;
    
17.         border-radius: 50%;
    
18.         color:#0B3B39;
    
19. }
    
20. </style>
    
21. 
    
22. <div class="outer">
    
23.         <div></div>
    
24. </div>
    
25. 
    
26. <script language="javascript">
    
27. 
    
28. let txt  = "君自故鄉來應知故鄉事來日綺窗前寒梅著花未";
    
29. let outer = document.querySelector(".outer");
    
30. let width = outer.clientWidth;
    
31. let total = txt.length;
    
32. let angle = 360 / total;
    
33. let str = "";
    
34. for(j=0; j<total; j++) {
    
35.         let transform =`rotate(${angle * j}deg) translateY(-${width / 2}px) rotate(${360 - angle*j}deg)`;
    
36.         let color = `#${Math.random().toString(16).substr(-6)}`;
    
37.         str += `<div style="color: ${color}; transform: ${transform};">${txt.charAt(j)}</div>\n`;
    
38. }
    
39. outer.innerHTML = str;
    
40. </script>

复制代码

马黑黑

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

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

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

马黑黑

海滩

圈圈

马黑黑

沙漠

马黑黑

UFO

马黑黑

稿纸样式一
实现方式：线性渐变背景 ——
        background-image: linear-gradient(#fff 25px, #ed8181db 0);

要求① ：font: 16px / 26px Sans-serif;

字体的设置必须为那个样子，尤其是行高。这是要与线性背景的设置项配套，就是一下这一句：

background-size: 26px 26px;

要求②：换行用 <br>，一个<br>一行。自然语句流会自动换行，无需干预，仅在分段时用<br>标签。论坛可视化编辑模式下，按 shift+回车相当于HTML下加入了<br>标签。

论坛可视化编辑模式下，到本行止，一切正常。但……

2022-4-16

马黑黑

pig

马黑黑

归处

马黑黑

黑暗之花

马黑黑

马黑黑

1. <style>
   
2. .mama {
   
3.         margin: auto;
   
4.         width: 300px;
   
5.         height: 300px;
   
6.         position: relative;
   
7. }
   
8. .flower {
   
9.         width: 50%;
   
10.         height: 50%;
    
11.         left: 50%;
    
12.         border-radius: 0 100%;
    
13.         transform-origin: 0 100%;
    
14.         position: absolute;
    
15. }
    
16. </style>
    
17. 
    
18. <div class="mama"></div>
    
19. 
    
20. <script>
    
21. let mama = document.querySelector('.mama');
    
22. let str = '';
    
23. for(j=0; j< 8; j++) {
    
24.         let c1 = `#${Math.random().toString(16).substr(-6)}`;
    
25.         let c2 = `#${Math.random().toString(16).substr(-6)}`;
    
26.         str += `<div class='flower' style='background-image: linear-gradient(${c1}, ${c2}); transform: rotate(${45*j}deg);'></div>`;
    
27. }
    
28. mama.innerHTML = str;
    
29. </script>

复制代码

马黑黑

Egypt

马黑黑

马黑黑

马黑黑

马黑黑

Dog

马黑黑

查看

马黑黑

点击查看