HTML，CSS，JavaScript实例——3D骰子，跨纬度蠕虫，动态登录表单。 ...

盛世宏图  金牌会员 | 2024-6-12 05:36:05 | 来自手机 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 539|帖子 539|积分 1617

一、3D筛子


1.HTML

  1. <!--ring div starts here-->
  2. <div class="ring">
  3.   <i style="--clr:#00ff0a;"></i>
  4.   <i style="--clr:#ff0057;"></i>
  5.   <i style="--clr:#fffd44;"></i>
  6.   <div class="login">
  7.     <h2>Login</h2>
  8.     <div class="inputBx">
  9.       <input type="text" placeholder="Username">
  10.     </div>
  11.     <div class="inputBx">
  12.       <input type="password" placeholder="Password">
  13.     </div>
  14.     <div class="inputBx">
  15.       <input type="submit" value="Sign in">
  16.     </div>
  17.     <div class="links">
  18.       <a href="#">Forget Password</a>
  19.       <a href="#">Signup</a>
  20.     </div>
  21.   </div>
  22. </div>
  23. <!--ring div ends here-->
复制代码
2.CSS

  1. @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6.   font-family: "Quicksand", sans-serif;
  7. }
  8. body {
  9.   display: flex;
  10.   justify-content: center;
  11.   align-items: center;
  12.   min-height: 100vh;
  13.   background: #111;
  14.   width: 100%;
  15.   overflow: hidden;
  16. }
  17. .ring {
  18.   position: relative;
  19.   width: 500px;
  20.   height: 500px;
  21.   display: flex;
  22.   justify-content: center;
  23.   align-items: center;
  24. }
  25. .ring i {
  26.   position: absolute;
  27.   inset: 0;
  28.   border: 2px solid #fff;
  29.   transition: 0.5s;
  30. }
  31. .ring i:nth-child(1) {
  32.   border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
  33.   animation: animate 6s linear infinite;
  34. }
  35. .ring i:nth-child(2) {
  36.   border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
  37.   animation: animate 4s linear infinite;
  38. }
  39. .ring i:nth-child(3) {
  40.   border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
  41.   animation: animate2 10s linear infinite;
  42. }
  43. .ring:hover i {
  44.   border: 6px solid var(--clr);
  45.   filter: drop-shadow(0 0 20px var(--clr));
  46. }
  47. @keyframes animate {
  48.   0% {
  49.     transform: rotate(0deg);
  50.   }
  51.   100% {
  52.     transform: rotate(360deg);
  53.   }
  54. }
  55. @keyframes animate2 {
  56.   0% {
  57.     transform: rotate(360deg);
  58.   }
  59.   100% {
  60.     transform: rotate(0deg);
  61.   }
  62. }
  63. .login {
  64.   position: absolute;
  65.   width: 300px;
  66.   height: 100%;
  67.   display: flex;
  68.   justify-content: center;
  69.   align-items: center;
  70.   flex-direction: column;
  71.   gap: 20px;
  72. }
  73. .login h2 {
  74.   font-size: 2em;
  75.   color: #fff;
  76. }
  77. .login .inputBx {
  78.   position: relative;
  79.   width: 100%;
  80. }
  81. .login .inputBx input {
  82.   position: relative;
  83.   width: 100%;
  84.   padding: 12px 20px;
  85.   background: transparent;
  86.   border: 2px solid #fff;
  87.   border-radius: 40px;
  88.   font-size: 1.2em;
  89.   color: #fff;
  90.   box-shadow: none;
  91.   outline: none;
  92. }
  93. .login .inputBx input[type="submit"] {
  94.   width: 100%;
  95.   background: #0078ff;
  96.   background: linear-gradient(45deg, #ff357a, #fff172);
  97.   border: none;
  98.   cursor: pointer;
  99. }
  100. .login .inputBx input::placeholder {
  101.   color: rgba(255, 255, 255, 0.75);
  102. }
  103. .login .links {
  104.   position: relative;
  105.   width: 100%;
  106.   display: flex;
  107.   align-items: center;
  108.   justify-content: space-between;
  109.   padding: 0 20px;
  110. }
  111. .login .links a {
  112.   color: #fff;
  113.   text-decoration: none;
  114. }
复制代码
二、跨纬度蠕虫


1.HTML

  1. <div id="controls"></div>
复制代码
2.CSS

  1. * { margin:0; padding:0; }
  2. html, body { width:100%; height:100%; overflow: hidden; background:black;}
  3. canvas { display:block; }
  4. #controls {
  5.   z-index: 2;
  6.   margin: 20px;
  7.   position: absolute;
  8.   top: 0; left: 0;
  9.   color: white;
  10. }
复制代码
3.JS

  1. let maxPoints = 2000;
  2. let addSpeed  = 4;
  4. class Vec3{
  5.   constructor(x, y, z, r=10){
  6.     this.x = x;
  7.     this.y = y;
  8.     this.z = z;
  9.     this.r = r;
  10.     this.count = 0;
  11.   }
  12.   op(p, f){
  13.     this.x = f(this.x, p.x != undefined ? p.x : p);
  14.     this.y = f(this.y, p.y != undefined ? p.y : p);
  15.     this.z = f(this.z, p.z != undefined ? p.z : p);
  16.     return this;
  17.   }
  18.   plus  (p){return this.op(p, (a, b) => a + b)}
  19.   minus (p){return this.op(p, (a, b) => a - b)}
  20.   times (p){return this.op(p, (a, b) => a * b)}
  21.   div   (p){return this.op(p, (a, b) => a / b)}
  22.   distTo(p){return Math.hypot(this.x-p.x, this.y-p.y, this.x-p.z)}
  23.   clone  (){return new Vec3(this.x, this.y, this.z, this.r)}
  24.   updateRotation(){
  25.     let {x, y, z} = this.clone().minus(origin);
  26.     this.screenCoord = [
  27.       (x*cx - y*sx),
  28.       (y*cx + x*sx)*cy + sy*z
  29.     ];
  30.     this.depth = z*cy - sy*(y*cx + x*sx);
  31.   }
  32.   render(){
  33.     this.count++;
  34.    
  35.     let amt = this.count/maxPoints;
  36.     amt = 1-(cos(amt*addSpeed*TAU)+1)/2;
  37.     amt = pow(amt, .5);
  38.    
  39.     noFill();
  40.     stroke(this.hue, .3, 1, .05);
  41.     strokeWeight(.5);
  42.    
  43.     let r = noise((this.x+frameCount)/200, this.y/200, this.z/200)*50 + 10;
  44.     rect(...this.screenCoord, r*amt, r*amt);
  45.   }
  46. }
  48. function setup (){
  49.   pixelDensity(1);
  50.   createCanvas();
  51.   colorMode(HSB, 1, 1, 1);
  52.   rectMode(CENTER);
  53.   windowResized();
  54. }
  56. let points = [];
  57. let r = (n) => random(-n, n);
  58. let v3 = (x, y, z) => new Vec3(x, y, z);
  59. let l3 = (p1, p2, c) => new Line(p1, p2, c);
  60. let rPoint = (n) => v3(r(n), r(n), r(n));
  62. let step = 0;
  63. let d = 200;
  64. let t = 0;
  65. let p = 0;
  66. let nextPoint = () => {
  67.   step++;
  69.   d = lerp(d, 150, .001);
  70.   d += (noise(step/100, 1e6)*2-1)*.1;
  71.   d = constrain(d, 100, 200);
  72.   t += (noise(step/200, 1e7)*2-1)*.02;
  73.   p += (noise(step/200, 1e8)*2-1)*.02;
  75.   let x = d * sin(t) * cos(p);
  76.   let z = d * sin(t) * sin(p);
  77.   let y = d * cos(t);
  79.   let v = v3(x, y, z);
  80.   v.hue = ((step/3)/maxPoints)%1;
  81.   return v;
  82. }
  84. let init = () => {
  85.   points = [];
  86.   step = 0;
  87.   d = 200;
  88.   t = 0;
  89.   p = 0;
  90.   
  91.   noiseSeed(random()*1e8);
  92.   
  93.   for (let i = 0; i < maxPoints; i++){   
  94.     points.push(nextPoint());
  95.   }
  96. }
  98. let rotY = -Math.PI/4;
  99. let rotX = .4;
  100. let zoom = 2;
  101. let cx, sx, cy, sy;
  103. let near = 500;
  105. let mX = 0;
  106. let mY = 0;
  108. let origin = new Vec3(0, 0, 0);
  110. function draw(){
  111.   background(0, .3);
  112.   stroke(1);
  113.   
  114.   push();
  115.   updateCamera();
  116.   translate(width/2, height/2);
  117.   scale(zoom);
  118.   let [x, y] = origin.screenCoord;
  119.   translate(x, y);
  120.   
  121.   let n = near/(zoom*zoom);
  122.   
  123.   blendMode(ADD);
  124.   for (let i = 0; i < addSpeed; i++){
  125.     points.shift();
  126.     points.push(nextPoint());
  127.   }
  128.   points.map(p => p.updateRotation());
  129.   points.map(p => p.render());
  130.   pop();
  131. }
  133. let updateCamera = () => {
  134.   rotX += mX;
  135.   rotY += mY;
  136.   rotY = constrain(rotY, -PI, 0);
  137.   mX *= .9;
  138.   mY *= .9;
  139.   
  140.   [cx, sx, cy, sy] = [cos(rotX), sin(rotX), cos(rotY), sin(rotY)];
  141.   
  142.   rotX += .002;
  143.   
  144.   origin.updateRotation();
  145. }
  147. let pointerIsDown = false;
  148. let prevX = 0;
  149. let prevY = 0;
  150. window.addEventListener("pointerdown", evt => {
  151.   pointerIsDown = true;
  152.   prevX = evt.clientX;
  153.   prevY = evt.clientY;
  154.   console.log("pointerdown");
  155. });
  157. window.addEventListener("pointerup", evt => {
  158.   pointerIsDown = false;
  159.   console.log("pointerup");
  160. })
  162. window.addEventListener("pointermove", evt => {
  164.   if (pointerIsDown){
  165.     let [x, y] = [evt.clientX, evt.clientY];
  166.     if (prevX && prevY && x && y){
  167.       let moveX = x-prevX;
  168.       let moveY = y-prevY;
  169.       mX = -moveX/100;
  170.       mY =  moveY/100;
  171.       prevX = x;
  172.       prevY = y;
  173.     }
  174.   }
  175. });
  177. function windowResized(){
  178.   resizeCanvas(windowWidth, windowHeight);
  179.   zoom = min(width, height)*2/862;
  180.   init();
  181. }
复制代码
三、动态登录表单


1.HTML

  1. <!--ring div starts here-->
  2. <div class="ring">
  3.   <i style="--clr:#00ff0a;"></i>
  4.   <i style="--clr:#ff0057;"></i>
  5.   <i style="--clr:#fffd44;"></i>
  6.   <div class="login">
  7.     <h2>Login</h2>
  8.     <div class="inputBx">
  9.       <input type="text" placeholder="Username">
  10.     </div>
  11.     <div class="inputBx">
  12.       <input type="password" placeholder="Password">
  13.     </div>
  14.     <div class="inputBx">
  15.       <input type="submit" value="Sign in">
  16.     </div>
  17.     <div class="links">
  18.       <a href="#">Forget Password</a>
  19.       <a href="#">Signup</a>
  20.     </div>
  21.   </div>
  22. </div>
  23. <!--ring div ends here-->
复制代码
2.CSS

  1. @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6.   font-family: "Quicksand", sans-serif;
  7. }
  8. body {
  9.   display: flex;
  10.   justify-content: center;
  11.   align-items: center;
  12.   min-height: 100vh;
  13.   background: #111;
  14.   width: 100%;
  15.   overflow: hidden;
  16. }
  17. .ring {
  18.   position: relative;
  19.   width: 500px;
  20.   height: 500px;
  21.   display: flex;
  22.   justify-content: center;
  23.   align-items: center;
  24. }
  25. .ring i {
  26.   position: absolute;
  27.   inset: 0;
  28.   border: 2px solid #fff;
  29.   transition: 0.5s;
  30. }
  31. .ring i:nth-child(1) {
  32.   border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
  33.   animation: animate 6s linear infinite;
  34. }
  35. .ring i:nth-child(2) {
  36.   border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
  37.   animation: animate 4s linear infinite;
  38. }
  39. .ring i:nth-child(3) {
  40.   border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
  41.   animation: animate2 10s linear infinite;
  42. }
  43. .ring:hover i {
  44.   border: 6px solid var(--clr);
  45.   filter: drop-shadow(0 0 20px var(--clr));
  46. }
  47. @keyframes animate {
  48.   0% {
  49.     transform: rotate(0deg);
  50.   }
  51.   100% {
  52.     transform: rotate(360deg);
  53.   }
  54. }
  55. @keyframes animate2 {
  56.   0% {
  57.     transform: rotate(360deg);
  58.   }
  59.   100% {
  60.     transform: rotate(0deg);
  61.   }
  62. }
  63. .login {
  64.   position: absolute;
  65.   width: 300px;
  66.   height: 100%;
  67.   display: flex;
  68.   justify-content: center;
  69.   align-items: center;
  70.   flex-direction: column;
  71.   gap: 20px;
  72. }
  73. .login h2 {
  74.   font-size: 2em;
  75.   color: #fff;
  76. }
  77. .login .inputBx {
  78.   position: relative;
  79.   width: 100%;
  80. }
  81. .login .inputBx input {
  82.   position: relative;
  83.   width: 100%;
  84.   padding: 12px 20px;
  85.   background: transparent;
  86.   border: 2px solid #fff;
  87.   border-radius: 40px;
  88.   font-size: 1.2em;
  89.   color: #fff;
  90.   box-shadow: none;
  91.   outline: none;
  92. }
  93. .login .inputBx input[type="submit"] {
  94.   width: 100%;
  95.   background: #0078ff;
  96.   background: linear-gradient(45deg, #ff357a, #fff172);
  97.   border: none;
  98.   cursor: pointer;
  99. }
  100. .login .inputBx input::placeholder {
  101.   color: rgba(255, 255, 255, 0.75);
  102. }
  103. .login .links {
  104.   position: relative;
  105.   width: 100%;
  106.   display: flex;
  107.   align-items: center;
  108.   justify-content: space-between;
  109.   padding: 0 20px;
  110. }
  111. .login .links a {
  112.   color: #fff;
  113.   text-decoration: none;
  114. }
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

正序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

盛世宏图

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表