Zapic
说到二次元,
呐
懂了,这就可以做了.

#1 HTML
首先来点基本结构:
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>呐</title>
  6. </head>
  7. <body>
  8.     <div class="呐呐呐">

  10.     </div>
  11. </body>
  12. </html>
复制代码
就这样,很简单.

#2 CSS
  1. body{
  2.     margin: 0;
  3. }
  4. div.呐呐呐 span {
  5.     display: inline-block;
  6.     top: 50%;
  7.     left: 50%;
  8.     position: absolute;
  9.     transition-property = top,left,transform;
  10. }
  11. div.呐呐呐 {
  12.     overflow: hidden;
  13.     position: relative;
  14.     width: 100vw;
  15.     height: 100vh;
  16. }
复制代码
还是很简单,只是简单的定义了一些样式.

#3 JavaScript
先定义一些常量:
  1. const 呐呐呐 = document.querySelector("div.呐呐呐");
  2. const 呐呐呐呐 = 1000;  // 最大数量
  3. const 呐呐呐呐呐 = {
  4.     font: [20,100],  // 字体大小范围
  5.     transition: [5,10]  // 运动速度范围
  6. };
复制代码
再弄一个定时器,用来循环产出"呐":
  1. let 呐呐 = setInterval(()=>{
  2. }
复制代码
定时器里:
  1. if(呐呐呐.childElementCount >= 呐呐呐呐){
  2.     return; // 限制最大数量
  3. }
  4. let 呐 = document.createElement("span");  // 创建元素
  5. 呐.innerText = '呐';  //呐
  6. 呐.style.fontSize = (呐呐呐呐呐.font[0] + (呐呐呐呐呐.font[1] - 呐呐呐呐呐.font[0]) * Math.random()).toString() + "px";  // 随机大小
  7. 呐.style.transform = "scale(0)";  // 动画放大
  8. 呐.style.transitionDuration= "" + (呐呐呐呐呐.transition[0] + (呐呐呐呐呐.transition[1] - 呐呐呐呐呐.transition[0]) * Math.random()).toString() + "s";  // 随机运动速度
  9. setTimeout(()=>{  // 赋予运动方向
  10.         if(Math.random() > 0.5){ // Y
  11.             呐.style.left =(-50 + Math.random() * 200).toString() + "%";
  12.             if(Math.random() > 0.5){ // 向上
  13.                 呐.style.top = "-75%";
  14.             } else { // 向下
  15.                 呐.style.top = "175%";
  16.             }
  17.         } else { // X
  18.             呐.style.top = (-50 + Math.random() * 200).toString() + "%";
  19.             if(Math.random() > 0.5){ // 向左
  20.                 呐.style.left = "-75%";
  21.             } else { // 向右
  22.                 呐.style.left = "175%";
  23.             }
  24.         }
  25.         呐.style.transform= "scale(2)";  // 动画放大
  26.         呐.addEventListener("transitionend",()=>{
  27.             呐.remove();  // 移除运动完成的呐
  28.         });
  29.     },10);
  30.     呐呐呐.appendChild(呐);  //呐
复制代码
好了.

#4 上线
代码里都用呐,域名也可以.

于是:
https://呐.ml

Wudji
啥玩意
进去吓死我了
Jesenv5
这个网页背景我觉得应该换一下。
Rainy_Reimu_
这也太二次元了，味太纯.
我就喜欢呃
我想知道图一的网站是啥
PercyDan
啊这，不会js的路过
wersky
好网站，转载了，带来源。
万能小弱智
挺有意思的，还挺不错
墨影云月
技术大佬
洞穴夜莺
这也太技术水了吧
xiaomu_233
我们将它称之为：咏呐
圣诞好疯狂
技术大佬的水贴方式
名副其实
附加事项：
反色/全选页面可以有出其不意的效果
1378495772
当然，我们可以做一些小更改



xiaoXG
技术大佬，我差点瞎了
堕天使之墓
你这......
真就二次元啊.jpg
STGHT:D
超级声“呐”
baweidada
我感觉要是换成黑底白字效果会更明显
EonZone
域名怎么整的啊，这么随便？
Giveuny
还得注册一个中文域名
crazy438
人体唢呐
ta很懒没留名字
额……仍然啥都不会
GRE_D1kR.老二
我寻思背景可以114514以下
axltcs
啊这，这就是dalao的二次元风格网页吗
zhou12345654321
极简二次元主页，i了i了
jyj5
老二刺螈了
囗il
迫真声呐可还行。
小灬望
真「二次元
wgiaohahaha
哇，作者好厉害啊，这都会！
齐辰
为什么不是巨魔战将或者...
huangzihai0
塞雷姆呗，各种雷姆，绝对二次元
Wetherking
  1. [code]<!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8"/>

  6. <title>代码雨
  7. </title>

  9. <style type="text/css">
  10. /*basic reset*/
  11. *{margin:0;padding:0;}
  12. body{background:black;}
  13. canvas{display:block;}
  14. </style>

  16. </head>
  17. <body>

  19. <canvas id="c"></canvas>

  21. <script type="text/javascript">
  22. var c=document.getElementById("c");
  23. var ctx= c.getContext("2d");

  25. c.height=window.innerHeight;
  26. c.width=window.innerWidth;

  28. var chinese="1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM";
  29. chinese=chinese.split("");

  31. var font_size=10;
  32. var columns=c.width/font_size;
  33. var drops=[];

  35. for(var x=0;x<columns;x++)
复制代码
可以去试试
求置顶



Mint_Calcium
太二次元辣，i了i了
第一页 上一页 下一页 最后一页