小程序开发定制百款拿来就能用的网页特效,不来看看吗？

写在前面：

小程序开发定制我特别喜欢收集前端好小程序开发定制看的特效代码，小程序开发定制前端好用的网站。小程序开发定制今天给大家分享出来，如果觉得有帮助可以点赞收藏支持一下，如果能关注一下就再好不过了ヾ(≧▽≦*)o，之后还会分享许多干货，话不多说，上动图：

目录

非新手可以跳过

考虑到看此文章的小伙伴有一些是新手。

先来一个简介：

前端是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
 

有些小伙伴0基础小伙伴担心，我没有编程工具怎么办？

可以参照这篇文章：

如果小伙伴想一起来学习前端知识，那么就从这篇文章开始吧

前端HTML:

🍓1.动态菜单

 把此菜单特效放到网站上是不是很炫酷，快来行动吧！

HTML代码：

  1. <input class="menu-checkbox" id="menu" type="checkbox" name="menu" />
  2. <nav class="menu">
  3.   <label class="menu-dots" for="menu">
  4.     <span class="menu-dot"></span>
  5.     <span class="menu-dot"></span>
  6.     <span class="menu-dot"></span>
  7.   </label>
  8.   <ul class="menu-items">
  9.     <li class="menu-item">
  10.       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  11.         <path d="M9.25 8C9.25 9.24264 8.24264 10.25 7 10.25C5.75736 10.25 4.75 9.24264 4.75 8C4.75 6.75736 5.75736 5.75 7 5.75C8.24264 5.75 9.25 6.75736 9.25 8Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
  12.         <path d="M9.25 16C9.25 17.2426 8.24264 18.25 7 18.25C5.75736 18.25 4.75 17.2426 4.75 16C4.75 14.7574 5.75736 13.75 7 13.75C8.24264 13.75 9.25 14.7574 9.25 16Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
  13.         <path d="M9 15L19.25 6.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
  14.         <path d="M9 9L19.25 16.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
  15.       </svg>
  16.     </li>
  17.     <li class="menu-item">
  18.       <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
  19.         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.5 15.25V15.25C5.5335 15.25 4.75 14.4665 4.75 13.5V6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H13.5C14.4665 4.75 15.25 5.5335 15.25 6.5V6.5"></path>
  20.         <rect width="10.5" height="10.5" x="8.75" y="8.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" rx="2"></rect>
  21.       </svg>
  22.     </li>
  23.     <li class="menu-item">
  24.       <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
  25.         <path stroke="currentColor" stroke-width="1.5" d="M19.25 10C19.25 12.7289 17.85 15.25 16.5 15.25C15.15 15.25 13.75 12.7289 13.75 10C13.75 7.27106 15.15 4.75 16.5 4.75C17.85 4.75 19.25 7.27106 19.25 10Z"></path>
  26.         <path stroke="currentColor" stroke-width="1.5" d="M16.5 15.25C16.5 15.25 8 13.5 7 13.25C6 13 4.75 11.6893 4.75 10C4.75 8.31066 6 7 7 6.75C8 6.5 16.5 4.75 16.5 4.75"></path>
  27.         <path stroke="currentColor" stroke-width="1.5" d="M6.75 13.5V17.25C6.75 18.3546 7.64543 19.25 8.75 19.25H9.25C10.3546 19.25 11.25 18.3546 11.25 17.25V14.5"></path>
  28.       </svg>
  29.     </li>
  30.     <li class="menu-item">
  31.       <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
  32.         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z"></path>
  33.         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.75 10.5V9.84343C7.75 8.61493 7.70093 7.29883 8.42416 6.30578C8.99862 5.51699 10.0568 4.75 12 4.75C14 4.75 15.25 6.25 15.25 6.25"></path>
  34.       </svg>
  35.     </li>
  36.     <li class="menu-item">
  37.       <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
  38.         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 19.25L15.5 15.5M4.75 11C4.75 7.54822 7.54822 4.75 11 4.75C14.4518 4.75 17.25 7.54822 17.25 11C17.25 14.4518 14.4518 17.25 11 17.25C7.54822 17.25 4.75 14.4518 4.75 11Z"></path>
  39.       </svg>
  40.     </li>
  41.     <li class="menu-item">
  42.       <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
  43.         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.75 7.75H19.25L17.6128 14.7081C17.4002 15.6115 16.5941 16.25 15.666 16.25H11.5395C10.632 16.25 9.83827 15.639 9.60606 14.7618L7.75 7.75ZM7.75 7.75L7 4.75H4.75"></path>
  44.         <circle cx="10" cy="19" r="1" fill="currentColor"></circle>
  45.         <circle cx="17" cy="19" r="1" fill="currentColor"></circle>
  46.       </svg>
  47.     </li>
  48.   </ul>
  49.   <label for="menu" class="menu-closer-overlay"></label>
  50. </nav>

CSS代码:

  1. body {
  2.   height: 100vh;
  3.   display: flex;
  4.   flex-direction: column;
  5.   align-items: center;
  6.   justify-content: center;
  7.   background: linear-gradient(to left, #2bc0e4, #eaecc6);
  8. }
  9.  
  10. .menu-checkbox {
  11.   display: none;
  12. }
  13.  
  14. .menu {
  15.   position: relative;
  16. }
  17.  
  18. .menu-dots {
  19.   width: 5rem;
  20.   height: 5rem;
  21.   border-radius: 50%;
  22.   box-shadow: 0 0 0 0.3rem #161e3f;
  23.   display: flex;
  24.   flex-direction: column;
  25.   align-items: center;
  26.   justify-content: center;
  27.   transform: rotate(90deg);
  28.   transition: 0.3s;
  29.   cursor: pointer;
  30. }
  31.  
  32. .menu-dots:hover {
  33.   box-shadow: 0 0 0 0.3rem #161e3f, 0 0 0 1rem rgba(#161e3f, 0.16);
  34.   transform: scale(1.2) rotate(90deg);
  35. }
  36.  
  37. .menu-dot {
  38.   width: 0.45rem;
  39.   height: 0.45rem;
  40.   background-color: #161e3f;
  41.   border-radius: 50%;
  42. }
  43.  
  44. .menu-dot + .menu-dot {
  45.   margin-top: 0.3rem;
  46. }
  47.  
  48. .menu-items {
  49.   position: absolute;
  50.   top: -2.3rem;
  51.   left: -2.2rem;
  52.   width: 9.4rem;
  53.   height: 11rem;
  54.   color: #fff;
  55.   pointer-events: none;
  56.   display: grid;
  57.   grid-template-columns: 1fr 1fr;
  58.   opacity: 0;
  59.   transition: 0.3s;
  60. }
  61.  
  62. .menu-item {
  63.   transform: scale(0.5);
  64.   filter: blur(10px);
  65.   transition: 0.3s;
  66. }
  67.  
  68. .menu-item:nth-child(odd) {
  69.   text-align: right;
  70. }
  71.  
  72. .menu-item:nth-child(even) {
  73.   text-align: left;
  74. }
  75.  
  76. .menu-item:first-child,
  77. .menu-item:last-child {
  78.   grid-column: span 2;
  79.   text-align: center;
  80. }
  81.  
  82. .menu-checkbox:checked + .menu > .menu-dots {
  83.   transform: none;
  84.   box-shadow: 0 0 0 3.4rem #161e3f;
  85. }
  86.  
  87. .menu-checkbox:checked + .menu > .menu-items {
  88.   opacity: 1;
  89.   pointer-events: auto;
  90. }
  91.  
  92. .menu-closer-overlay {
  93.   position: absolute;
  94.   left: 0;
  95.   top: 0;
  96.   width: 100%;
  97.   height: 100%;
  98.   background-color: transparent;
  99.   border-radius: 50%;
  100.   z-index: 2;
  101.   pointer-events: none;
  102. }
  103.  
  104. .menu-checkbox:checked + .menu > .menu-items > .menu-item {
  105.   opacity: 1;
  106.   transform: none;
  107.   filter: none;
  108. }
  109.  
  110. .menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(1) {
  111.   transition-delay: 0.05s;
  112. }
  113.  
  114. .menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(2) {
  115.   transition-delay: 0.1s;
  116. }
  117.  
  118. .menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(3) {
  119.   transition-delay: 0.15s;
  120. }
  121.  
  122. .menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(4) {
  123.   transition-delay: 0.2s;
  124. }
  125.  
  126. .menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(5) {
  127.   transition-delay: 0.25s;
  128. }
  129.  
  130. .menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(6) {
  131.   transition-delay: 0.3s;
  132. }
  133.  
  134. .menu-checkbox:checked + .menu > .menu-closer-overlay {
  135.   pointer-events: auto;
  136.   cursor: pointer;
  137. }

🍇2.会动的龙卷风

 JS:

  1. import * as THREE from "https://cdn.skypack.dev/three@0.133.1/build/three.module";
  2. import { GUI } from "https://cdn.skypack.dev/lil-gui@0.16.1";
  3.  
  4. const container = document.querySelector('.container');
  5.  
  6. const config = {
  7.     height: 1.1,
  8.     density: 2.5,
  9.     curl: 12,
  10. };
  11.  
  12. class Controls {
  13.     constructor() {
  14.         const gui = new GUI();
  15.         if (window.innerWidth < 600) gui.close();
  16.  
  17.         gui.add(config, 'height', 1, 1.8).step(.01).onChange(v => {
  18.             viz.material.uniforms.u_height.value = v;
  19.         });
  20.         gui.add(config, 'density', 1, 4).step(.1).onChange(v => {
  21.             viz.material.uniforms.u_density.value = v;
  22.         });
  23.         gui.add(config, 'curl', 4, 20).step(.1).onChange(v => {
  24.             viz.material.uniforms.u_curl.value = v;
  25.         });
  26.     }
  27. }
  28.  
  29. class Viz {
  30.  
  31.     constructor() {
  32.         this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  33.       
  34.         container.appendChild(this.renderer.domElement);
  35.  
  36.         this.scene = new THREE.Scene();
  37.         this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  38.         this.camera.position.z = 2.9;
  39.         this.camera.position.y = 1.1;
  40.         this.camera.lookAt(0, 0, 0);
  41.  
  42.         this.rotationY = -.4 * Math.PI;
  43.  
  44.         this.raycaster = new THREE.Raycaster();
  45.  
  46.         this.mouse = new THREE.Vector2(0, 0);
  47.         this.mouseTarget = new THREE.Vector2(0, 0);
  48.  
  49.         this.clock = new THREE.Clock();
  50.  
  51.         this.setupScene();
  52.         this.render();
  53.     }
  54.  
  55.     setupScene() {
  56.  
  57.         const planeMaterial = new THREE.MeshBasicMaterial({
  58.             color: 0xffffff
  59.         });
  60.         const planeGeometry = new THREE.PlaneGeometry(2000, 1000);
  61.         this.floor = new THREE.Mesh(planeGeometry, planeMaterial);
  62.         this.floor.position.set(0, -2, 0);
  63.         this.floor.rotation.set(-.2 * Math.PI, 0, 0);
  64.         this.scene.add(this.floor);
  65.  
  66.         this.material = new THREE.ShaderMaterial({
  67.             uniforms: {
  68.                 u_time: { type: 'f', value: 0 },
  69.                 u_height: { type: 'f', value: config.height },
  70.                 u_density: { type: 'f', value: config.density },
  71.                 u_curl: { type: 'f', value: config.curl },
  72.                 u_wind: { type: 'v2', value: new THREE.Vector2(0, 0) },
  73.             },
  74.             vertexShader: document.getElementById("vertexShader").textContent,
  75.             fragmentShader: document.getElementById("fragmentShader").textContent,
  76.             side: THREE.DoubleSide,
  77.             transparent: true
  78.         });
  79.         const curve = new THREE.LineCurve3(
  80.             new THREE.Vector3(0, 0, 0),
  81.             new THREE.Vector3(0, 1, 0),
  82.         );
  83.         const geometry = new THREE.TubeGeometry(curve, 512, .55, 512, false);
  84.         this.mesh = new THREE.Mesh(geometry, this.material);
  85.         this.mesh.position.set(0, -.65, 0);
  86.         this.mesh.rotation.set(0, this.rotationY, 0);
  87.         this.scene.add(this.mesh);
  88.     }
  89.  
  90.  
  91.     addCanvasEvents() {
  92.         container.addEventListener('mousemove', (e) => {
  93.             updateMousePosition(e.clientX, e.clientY, this);
  94.         });
  95.         container.addEventListener('touchmove', (e) => {
  96.             updateMousePosition(e.touches[0].pageX, e.touches[0].pageY, this);
  97.         });
  98. 		
  99.  
  100.         function updateMousePosition(eX, eY, viz) {
  101.             const x = eX - container.offsetLeft;
  102.             const y = eY - container.offsetTop;
  103.             viz.mouseTarget.x = x / container.offsetWidth * 2 - 1;
  104.             viz.mouseTarget.y = -(y / container.offsetHeight) * 2 + 1;
  105.         }
  106.     }
  107.  
  108.     render() {
  109.         this.material.uniforms.u_time.value = 1.3 * this.clock.getElapsedTime();
  110.  
  111.         this.mouse.x += (this.mouseTarget.x - this.mouse.x) * .1;
  112.         this.mouse.y += (this.mouseTarget.y - this.mouse.y) * .1;
  113.  
  114.         this.raycaster.setFromCamera(this.mouse, this.camera);
  115.         const intersects = this.raycaster.intersectObject(this.floor);
  116.         if (intersects.length) {
  117.             this.material.uniforms.u_wind.value = new THREE.Vector2(intersects[0].uv.x - .5, .5 - intersects[0].uv.y)
  118.                 .rotateAround(new THREE.Vector2(0, 0), this.rotationY)
  119.                 .multiplyScalar(200);
  120.         }
  121.  
  122.         this.renderer.render(this.scene, this.camera);
  123.     }
  124.  
  125.     loop() {
  126.         this.render();
  127.         requestAnimationFrame(this.loop.bind(this));
  128.     }
  129.  
  130.     updateSize() {
  131.         this.camera.aspect = window.innerWidth / window.innerHeight;
  132.         this.camera.updateProjectionMatrix();
  133.         this.renderer.setSize(window.innerWidth, window.innerHeight);
  134.         this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  135.     }
  136. }
  137.  
  138.  
  139. const controls = new Controls();
  140. const viz = new Viz();
  141. viz.addCanvasEvents();
  142. viz.updateSize();
  143. viz.loop();
  144.  
  145. window.addEventListener('resize', () => viz.updateSize());

需要完整代码,请滑倒本文最后面

🍒3.围绕太阳转圈圈

JS:

  1. gsap.registerPlugin(Draggable);
  2.  
  3. const getDateFormat = (date) => {
  4.   return `${(date.getMonth() + 1).toString().padStart(2, "0")}-${date
  5.     .getDate()
  6.     .toString()
  7.     .padStart(2, "0")}-${date.getFullYear()}`;
  8. };
  9.  
  10. const daysInYear = (year) => {
  11.   return (year % 4 === 0 && year % 100 > 0) || year % 400 == 0 ? 366 : 365;
  12. };
  13.  
  14. document.querySelectorAll(".useful-datepicker").forEach((datepicker) => {
  15.   const input = datepicker.querySelector("input");
  16.  
  17.   const today = new Date();
  18.  
  19.   input.value = getDateFormat(today);
  20.  
  21.   function updateDate() {
  22.     gsap.set(datepicker.querySelector(".earth"), {
  23.       rotate: `${this.rotation * 3}deg`,
  24.     });
  25.  
  26.     const percent = (this.rotation / 360) * 100;
  27.     const days = (percent / 100) * daysInYear(today.getFullYear());
  28.     const newDate = new Date();
  29.  
  30.     newDate.setDate(today.getDate() + days);
  31.  
  32.     input.value = getDateFormat(newDate);
  33.   }
  34.  
  35.   Draggable.create(datepicker.querySelector(".rotate"), {
  36.     type: "rotation",
  37.     inertia: true,
  38.     throwResistance: 0.5,
  39.     onDrag: updateDate,
  40.     onThrowUpdate: updateDate,
  41.   });
  42. });

需要完整代码,请滑倒本文最后面

🍊4.更多动态特效

上面的3个特效都是来源于此网站，需要代码的小伙伴，可以访问此网站来获取代码。

并且里面有好多动态特效：

网站介绍：

CodePen是一个面向前端设计师和开发人员的社会开发环境。构建和部署一个网站，展示你的工作，构建测试用例来学习和调试，并找到灵感。

构建、测试和发现前端代码的最佳场所

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发