前言
欢迎大家观看我的博客，本期博主将讲解一些富有创造力的实例。如果你不是一名前端爱好者，那么这将激发你对前端的热情。
上面这张动图是仅由CSS实现的网页动画。如果你对它感兴趣，那么请往下读！
本文会用到JavaScript，HTML，CSS语法，以及Three.js框架，CSS关键帧动画等内容。如果你对这些感到陌生的话，可以观看博主以往的文章，链接如下：
- HTML入门（详细教程），前端入门从这里开始
- CSS关键帧动画讲解，结合具体富有创新性的示例（有原代码），激发你的创作灵感。为你的网页增加特色
- 运用JavaScript代码，使用Three.js框架在网页中实现3D效果，零基础入门Three.js，包含具体实例。
一、Three.js框架实例
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>第一个three.js文件_WebGL三维场景</title><style>*,
*::after,
*::before{margin: 0;padding: 0;box-sizing: border-box;outline: none;}body{overflow: hidden;background-color: #AFA698;cursor: grab;}.webgl{position: fixed;top: 0;left: 0;}h1{font-size: 1.5rem;font-family: monospace;padding: 30px;}</style></head><body><h1id="ld">Loading ...</h1><canvasclass="webgl"></canvas><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.min.js"></script><scriptsrc="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script><scriptsrc="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script></body><scripttype="text/javascript">const canvas = document.querySelector('.webgl')const scene =newTHREE.Scene()const textureLoader =newTHREE.TextureLoader()const sizes ={width: window.innerWidth,height: window.innerHeight
}// 基础摄影机const camera =newTHREE.PerspectiveCamera(10, sizes.width / sizes.height,0.1,1000)
camera.position.x =50
camera.position.y =35
camera.position.z =50
scene.add(camera)//控制const controls =newTHREE.OrbitControls(camera, canvas)
controls.enableDamping =true
controls.enableZoom =true
controls.enablePan =true
controls.minDistance =50
controls.maxDistance =80// 渲染器const renderer =newTHREE.WebGLRenderer({canvas: canvas,antialias:true,alpha:true})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
renderer.outputEncoding =THREE.sRGBEncoding
// 材料const bakedTexture = textureLoader.load('https://rawcdn.githack.com/ricardoolivaalonso/ThreeJS-Room09/63b22b78b58af29d8b0d2ca196e241e1e8490fe7/dist/baked.jpg')
bakedTexture.flipY =false
bakedTexture.encoding =THREE.sRGBEncoding
const bakedMaterial =newTHREE.MeshBasicMaterial({map: bakedTexture,// side: THREE.DoubleSide,})const cubeMaterial =newTHREE.MeshBasicMaterial({color:0x3c6436});//加载const loader =newTHREE.GLTFLoader()
loader.load('https://rawcdn.githack.com/ricardoolivaalonso/ThreeJS-Room09/2515f48ad0b678bb7e16821ffb1960e01d35c65d/dist/model.glb',(gltf)=>{const model = gltf.scene
model.traverse(child=>{
child.material = bakedMaterial
if(child.name ==='Pasto') child.material = cubeMaterial
})
scene.add(model)
ld.style.display ='none'},(xhr)=>{
console.log(( xhr.loaded / xhr.total *100)+'% loaded')})
window.addEventListener('resize',()=>{
sizes.width = window.innerWidth
sizes.height = window.innerHeight
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))})// 动画consttick=()=>{
controls.update()
renderer.render(scene, camera)
window.requestAnimationFrame(tick)}tick()</script></html>
要想理解以上代码，你需要先了解什么是WebGL以及为什么使用Three.js
二、WebGL教程
WebGL 是一种 JavaScript API，可以以惊人的速度在画布上渲染三角形。它与大多数现代浏览器兼容，并且速度很快，因为它使用了访问者的图形处理单元 (GPU)。WebGL 不仅可以绘制三角形，还可以用于创建 2D 体验
API代表什么？
API 代表应用程序编程接口。在API环境中，应用程序一词指的是任何具有独特功能的软件。接口可以看作是两个应用程序之间的服务合约。该合约定义了两者如何使用请求和响应相互通信。它们的API文档包括与开发人员如何构建这些请求和响应有关的信息。
GPU 可以进行数千次并行计算。想象一下，您要渲染一个 3D 模型，该模型由 1000 个三角形组成——仔细想想，这个数字并不算多。每个三角形包含 3 个点。当我们想要渲染模型时，GPU 必须计算这 3000 个点的位置。由于 GPU 可以进行并行计算，因此它将一次性处理所有三角形点。
一旦模型的点被正确放置，GPU 就需要绘制这些三角形的每个可见像素。那么，GPU 将一次性处理成千上万个像素的计算。
放置点和绘制像素的指令写在我们所谓的着色器中。着色器很难掌握，我们需要为这些着色器提供数据。例如：如何根据模型变换和相机的属性放置点。这些被称为矩阵。我们还需要提供数据来帮助给像素着色。如果有光并且三角形面向该光，它应该比三角形没有面向光时更亮。
这些都说明使用原生 WebGL实现特定功能很困难。在画布上绘制一个三角形至少需要 100 行代码。如果您想添加透视、灯光、模型并在这种情况下为所有内容制作动画，那就祝您好运了。
但原生 WebGL 的优势在于其存在于较低级别，非常接近 GPU。这可以实现出色的优化和更多控制。
三、用Three.js简化WebGL
Three.js 是一个遵循 MIT 许可的 JavaScript 库，可在 WebGL 上运行。该库的目标是大大简化处理我们刚才提到的所有内容的过程。您只需几行代码即可获得动画 3D 场景，而且您无需提供着色器和矩阵。
如果你想进一步了解Three.js框架如何使用，可以看我以前的文章。
四、JavaScript实例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">@importurl('https://fonts.googleapis.com/css2?family=Prompt:wght@900&display=swap');*,
*::before,
*::after{padding: 0;margin: 0 auto;box-sizing: border-box;}body{background-color: #000;color: #fff;min-height: 100vh;display: grid;place-items: center;overflow: hidden;perspective: 450px;}.zigzag{position: relative;transform-style: preserve-3d;animation: zigzag 16s infinite linear;i{--color:hsl(200 100% calc(var(--i) * 5% + 20%));position: absolute;font-family:"Prompt", sans-serif;font-weight: 900;font-size: 150px;padding-inline: 24px;background-image:linear-gradient(45deg, transparent 30%,var(--color) 0 36%, transparent 0),linear-gradient(-45deg, transparent 30%,var(--color) 0 36%, transparent 0);background-size: 16px 8px;background-clip: text;-webkit-background-clip: text;color: transparent;transform:translate3d(-50%, -50%,calc(var(--i) * 1px));}}@keyframes zigzag{from{transform:rotate(0deg)rotateX(30deg)rotate(360deg);}to{transform:rotate(360deg)rotateX(30deg)rotate(0deg);}}</style></head><body><divclass="zigzag"><istyle="--i: 0">WanderTp</i><istyle="--i: 1">WanderTp</i><istyle="--i: 2">WanderTp</i><istyle="--i: 3">WanderTp</i><istyle="--i: 4">WanderTp</i><istyle="--i: 5">WanderTp</i><istyle="--i: 6">WanderTp</i><istyle="--i: 7">WanderTp</i><istyle="--i: 8">WanderTp</i><istyle="--i: 9">WanderTp</i><istyle="--i: 10">WanderTp</i><istyle="--i: 11">WanderTp</i><istyle="--i: 12">WanderTp</i><istyle="--i: 13">WanderTp</i><istyle="--i: 14">WanderTp</i><istyle="--i: 15">WanderTp</i></div></body></html>
五、动态网页实例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">@importurl('https://fonts.cdnfonts.com/css/hubot-sans');*{box-sizing: border-box;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;scroll-behavior: smooth;}html,
body{height: 100%;}html::-webkit-scrollbar{display: none;}html{-ms-overflow-style: none;scrollbar-width: none;}body{margin: 0;font-family: Untitled Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;background: #05060f linear-gradient(0deg,rgba(216, 236, 248, .06),rgba(152, 192, 239, .06));font-size:max(calc(var(--_size) * 0.03), 10px);--_factor:min(600px, 80vh);--_size:min(var(--_factor), 80vw);}body.gold .header h2,
body.gold p,
body.gold>*>* :not(.contact-btn){filter:invert(1)brightness(4.7);}body.gold .header h2 a{filter:hue-rotate(0deg);}body.gold canvas{filter:drop-shadow(2em 4em 0px #d8bd10)drop-shadow(-8em -14em 0px #d8bd10);}body.gold .header .spotlight{filter:invert(1)brightness(4.7)opacity(0.5);}body.gold .mountains>div{box-shadow:
-1em -0.2em 0.4em -1.1em #c2ccff,
inset 0em 0em 0em 2px #d8a910,
inset 0.2em 0.3em 0.2em -0.2em #c2ccff,
inset 10.2em 10.3em 2em -10em #d4e6ff2f;}body.gold .content-section,
body.gold .content-section ::before,
body.gold .content-section ::after{filter:invert(1)brightness(4.4)opacity(1);}h2{font-family:'Hubot-Sans', sans-serif;}h2,
p{margin: 0;padding: 0;}h2 a{text-decoration: none;color: unset;}.header{display: flex;width: 100%;justify-content: center;color: #bad6f7;padding: 2em;position: absolute;top: 0;left: 0;right: 0;margin: 0 auto;opacity: 0;translate: 0 -1em;animation: load 2s ease-in 2s forwards, up 1.4s ease-out 2s forwards;}.header> :nth-child(1){font-size: 1em;position: absolute;left: 0;right: 29em;margin: 0.2em auto;width: fit-content;}.header> :nth-child(2){position: absolute;left: 0;right: 0;margin: 0 auto;width: fit-content;}.header>h2{opacity: 0.5;cursor: pointer;transition: opacity 0.04s ease-in-out;}.header>h2:hover{opacity: 1;text-shadow: 0 2px 16px rgba(174, 207, 242, 0.6);width: fit-content;}.header>div.mid-spot{width: 1.8em;height: 1.8em;border-radius: 50%;background: black;box-shadow: 0 0 1em 0 #98c0ef;cursor: pointer;transition: box-shadow 1s ease-in-out;}.header>div.mid-spot:hover{box-shadow: -0.3em 0.1em 0.2em 0 #d8bd10;}body.gold .header>div.mid-spot:hover{box-shadow: -0.3em 0.1em 0.2em 0 #98c0ef;}body.gold .header>div.mid-spot{box-shadow: 0 0 1em 0 #d8bd10;}.header> :nth-child(2):hover~.spotlight{animation: colorize 10s linear infinite;}@keyframes colorize{0%{filter:hue-rotate(0deg);}100%{filter:hue-rotate(-380deg);}}button.contact-btn{position: absolute;left:min(46em, 60vw);right: 0;margin: 0 auto;width: 8em;height: 2.4em;cursor: pointer;border-radius: 20em;border: none;transition: background 0.5s, transform 0.5s;border: 1px solid #c2ccff33;opacity: 1;padding-top: 0.3em;background: #121521;color: #9dc3f7;white-space: nowrap;}button.contact-btn::before{content:'';display: block;position: absolute;left: 0;top: 0;border-radius: 20em;width: 100%;height: 100%;background: #c2ccff91 radial-gradient(farthest-side at 50% 100%, #c2ccff, transparent);opacity: 0.1;transition: all 0.4s ease-in-out;}button.contact-btn:hover::before{background: #c2ccff1e radial-gradient(farthest-side at 50% 100%, #c2ccff, transparent);opacity: 0.3;}.contact-btn .glow{--border-width: 1px;--loop-cycle: 24s;position: absolute;inset:calc(var(--border-width)* -1);border-radius: 50px;border:var(--border-width) solid transparent;-webkit-mask:linear-gradient(transparent, transparent),linear-gradient(white, white);mask:linear-gradient(transparent, transparent),linear-gradient(white, white);-webkit-mask-clip: padding-box, border-box;mask-clip: padding-box, border-box;-webkit-mask-composite: source-in, xor;mask-composite: intersect;pointer-events: none;}button.contact-btn:hover .glow{--loop-cycle: 2s;}.contact-btn .glow::after,
.contact-btn .glow::before{content:"";height: 100%;offset-anchor: 100% 50%;background:radial-gradient(circle at 50% 50%,hsla(0, 0%, 100%, 0.75), transparent 50%),radial-gradient(circle at 50% 50%, #c2ccff 50%, transparent);opacity: 0.4;offset-path:rect(0 100% 100% 0 round 33px);position: absolute;display: inline-block;-webkit-animation: loop 4s linear infinite;animation: loop var(--loop-cycle) linear infinite;aspect-ratio: 1 / 1;transition: opacity 1s ease-in-out;}.contact-btn .glow::before{animation-delay:calc(var(--loop-cycle) / -2);}@keyframes loop{100%{offset-distance: 100%;}}.contact-btn-content{background:linear-gradient(0deg, #d8ecf8, #98c0ef);background-clip: text;-webkit-text-fill-color: transparent;font-size: 1.2em;line-height: 142%;}button.contact-btn:hover .glow::after,
button.contact-btn:hover .glow::before{opacity: 0.6;}@keyframes btn-rot{0%{rotate: 0deg;}100%{rotate: 360deg;}}.header .spotlight{pointer-events: none;position: absolute;left: 0;right: 0;top: 0;margin: 0 auto;transition: filter 1s ease-in-out;height: 42em;width: 100%;overflow: hidden;}.header .spotlight>div{border-radius: 0 0 50% 50%;position: absolute;left: 0;right: 0;margin: 0 auto;top: 3em;width: 30em;height:max(42em, 86vh);background-image:conic-gradient(from 0deg at 50% -5%, transparent 45%,rgba(124, 145, 182, .3) 49%,rgba(124, 145, 182, .5) 50%,rgba(124, 145, 182, .3) 51%, transparent 55%);transform-origin: 50% 0;filter:blur(15px)opacity(0.5);z-index: -1;animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 21s ease-in-out infinite reverse;}.header .spotlight>div:nth-child(1){rotate: 20deg;animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 17s ease-in-out infinite;}.header .spotlight>div:nth-child(2){rotate: -20deg;animation: load 2s ease-in-out forwards, loadrot 2s ease-in-out forwards, spotlight 14s ease-in-out infinite;}@keyframes loadrot{0%{rotate: 0deg;scale: 0;}100%{scale: 1;}}@keyframes spotlight{0%{transform:rotateZ(0deg)scale(1);filter:blur(15px)opacity(0.5);}20%{transform:rotateZ(-1deg)scale(1.2);filter:blur(16px)opacity(0.6);}40%{transform:rotateZ(2deg)scale(1.3);filter:blur(14px)opacity(0.4);}60%{transform:rotateZ(-2deg)scale(1.2);filter:blur(15px)opacity(0.6);}80%{transform:rotateZ(1deg)scale(1.1);filter:blur(13px)opacity(0.4);}100%{transform:rotateZ(0deg)scale(1);filter:blur(15px)opacity(0.5);}}canvas#particleCanvas{position: absolute;pointer-events: none;animation: load 0.4s ease-in-out forwards;z-index: 1;width: 100%;}p{font-size: 1.5em;}.hero{width: 100%;height: 100%;max-height: 140px;position: absolute;top: 16em;}.heroT{position: absolute;left: 0;right: 0;margin: auto;height: 20em;padding-top: 2em;translate: 0 -1.6em;opacity: 0;animation: load 2s ease-in-out 0.6s forwards;}@keyframes load{0%{opacity: 0;}100%{opacity: 1;}}.heroT>h2{position: absolute;left: 0;right: 0;margin: auto;width: fit-content;font-size: 7em;font-weight: 600;color: #9dc3f7;background:radial-gradient(2em 2em at 50% 50%,
transparent calc(var(--p) - 2em),
#fff calc(var(--p) - 1em),
#fff calc(var(--p) - 0.4em),
transparent var(--p)),linear-gradient(0deg, #bad1f1 30%, #9dc3f7 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-shadow: 0 2px 16px rgba(174, 207, 242, .24);--p: 0%;transition: --p 3s linear;animation: pulse 10s linear 1.2s infinite;}.heroT h2:nth-child(2){background:radial-gradient(2em 2em at 50% 50%,
transparent calc(var(--p) - 2em),
transparent calc(var(--p) - 1em),
#fff calc(var(--p) - 1em),
#fff calc(var(--p) - 0.4em),
transparent calc(var(--p) - 0.4em),
transparent var(--p));background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;filter:blur(16px)opacity(0.4);}@keyframes pulse{0%{--p: 0%;}50%{--p: 300%;}100%{--p: 300%;}}@property --p{syntax:'<percentage>';inherits: false;initial-value: 0%;}.heroP{font-size: 1.2em;position: absolute;left: 0;right: 0;top: 20.6em;margin: auto;height: fit-content;width: fit-content;text-align: center;opacity: 0;translate: 0 1em;animation: load 2s ease-out 2s forwards, up 1.4s ease-out 2s forwards;color: #d8ecf8;text-shadow: 0 2px 16px rgba(174, 207, 242, .24);background:linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}@keyframes up{100%{translate: 0;}}.heroSubP{position: absolute;left: 0;right: 0;top: 13em;margin: auto;height: fit-content;opacity: 0;translate: 0 -1em;animation: load3 2s ease-in 0s forwards, up 1.4s ease-out 0s forwards;}@keyframes load3{0%{opacity: 0;}100%{opacity: 0.7;}}.heroSubP p{font-size: 1em;position: relative;width: fit-content;margin: auto;color: #d8ecf8;text-shadow: 0 2px 16px rgba(174, 207, 242, .24);background:linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.heroSubP p::before,
.heroSubP p::after{position: absolute;top: 60%;display: block;content:'';width: 5em;height: 1px;opacity: 0;animation: load2 1.4s ease-in-out 0s forwards, up 1.4s ease-out 0s forwards;}@keyframes load2{0%{opacity: 0;}100%{opacity: 0.3;}}.heroSubP p::before{background:linear-gradient(-90deg, #9dc3f7 0%, transparent 100%);right: 120%;translate: -5em 0;}.heroSubP p::after{background:linear-gradient(90deg, #9dc3f7 0%, transparent 100%);left: 120%;translate: 5em 0;}.accent-lines{pointer-events: none;position: absolute;top: 0;left: 0;right: 0;width: 100%;height: 42em;z-index: -2;--accent-lines-clr:rgba(186, 215, 247, .18);}.accent-lines>div{position: absolute;top: 0;right: 0;left: 0;margin: auto;height: 100%;width: 100%;}.accent-lines>div:nth-child(1)>div{position: absolute;top: 0;right: 0;left: 0;margin: auto;width: 100%;height: 1px;background:linear-gradient(90deg, transparent,var(--accent-lines-clr), transparent);opacity: 0;scale: 0;animation: accentload 2s ease-out 2.4s forwards;}.accent-lines>div:nth-child(1)>div:nth-child(1){top: 6em;}.accent-lines>div:nth-child(1)>div:nth-child(2){top: 11em;}.accent-lines>div:nth-child(1)>div:nth-child(3){top: 16em;}.accent-lines>div:nth-child(1)>div:nth-child(4){top: 24em;}.accent-lines>div:nth-child(1)>div:nth-child(5){top: 29em;}.accent-lines>div:nth-child(2)>div{position: absolute;top: 0;right: 0;left: 0;margin: auto;width: 1px;height: 100%;background:var(--accent-lines-clr);}@keyframes accentload{0%{opacity: 0;scale: 0;}100%{opacity: 1;scale: 1;}}.accent-lines>div:nth-child(2)>div{opacity: 0;scale: 0;animation: accentload 2s ease-out 2s forwards;}.accent-lines>div:nth-child(2)>div:nth-child(1){left: 24em;}.accent-lines>div:nth-child(2)>div:nth-child(2){left: 34em;}.accent-lines>div:nth-child(2)>div:nth-child(3){right: 24em;}.accent-lines>div:nth-child(2)>div:nth-child(4){right: 34em;}.accent-lines>div:nth-child(1)>div::before,
.accent-lines>div:nth-child(1)>div::after{content:'';display: none;position: absolute;width: 0.2em;height: 0.2em;border-radius: 1em;background: #9dc3f7;left: 0;right: 0;margin: auto;translate: 0 -1px;opacity: 0;scale: 0;animation: accentload 2s ease-out 4.4s forwards;}.accent-lines>div:nth-child(1)>div:nth-child(3)::before{display: block;left: 24em;}.accent-lines>div:nth-child(1)>div:nth-child(3)::after{display: block;right: 24em;}.accent-lines>div:nth-child(1)>div:nth-child(4)::before{display: block;left: 24em;}.accent-lines>div:nth-child(1)>div:nth-child(4)::after{display: block;right: 24em;}.accent-lines>div:nth-child(1)>div:nth-child(5)::before{display: block;left: 24em;}.accent-lines>div:nth-child(1)>div:nth-child(5)::after{display: block;right: 24em;}.accent-lines>div:nth-child(1)>div:nth-child(2)::before,
.accent-lines>div:nth-child(1)>div:nth-child(2)::after{display: block;width: 5em;height: 1px;border-radius: 0;opacity: 0.12;}.accent-lines>div:nth-child(1)>div:nth-child(2)::before{right: 24em;rotate: 45deg;translate: -2.5em 2.5em;}.accent-lines>div:nth-child(1)>div:nth-child(2)::after{right: 24em;rotate: -45deg;translate: -2.5em 2.5em;}.accent-lines>div:nth-child(1)>div:nth-child(1)::before,
.accent-lines>div:nth-child(1)>div:nth-child(1)::after{display: block;width: 5em;height: 1px;border-radius: 0;opacity: 0.12;}.accent-lines>div:nth-child(1)>div:nth-child(1)::before{left: 24em;rotate: 45deg;translate: 2.5em 7.5em;}.accent-lines>div:nth-child(1)>div:nth-child(1)::after{left: 24em;rotate: -45deg;translate: 2.5em 7.5em;}.accent-lines>div:nth-child(1)>div:nth-child(2)::before,
.accent-lines>div:nth-child(1)>div:nth-child(2)::after{opacity: 0;scale: 0;animation: accentload2 2s ease-out 2.4s forwards;}.accent-lines>div:nth-child(1)>div:nth-child(1)::before,
.accent-lines>div:nth-child(1)>div:nth-child(1)::after{opacity: 0;scale: 0;animation: accentload3 2s ease-out 2.4s forwards;}@keyframes accentload2{0%{opacity: 0;scale: 0;transform:rotate(360deg);}50%{scale: 0;}100%{opacity: 0.12;scale: 1;transform:rotate(0deg);}}@keyframes accentload3{0%{opacity: 0;scale: 0;transform:rotate(-360deg);}50%{scale: 0;}100%{opacity: 0.12;scale: 1;transform:rotate(0deg);}}.mountains{position: absolute;left: 0;right: 0;top: 31em;margin: auto;width: 100%;height: 10em;pointer-events: none;}.mountains::before{content:'';display: block;width: 100%;height: 500%;position: absolute;top: 0%;background:linear-gradient(90deg, #121521 0%, transparent 50%);background:linear-gradient(0deg, #121521 80%, transparent 90%);z-index: 2;}.mountains>div{box-shadow:
-1em -0.2em 0.4em -1.1em #c2ccff,
inset 0em 0em 0em 2px #c2ccff,
inset 0.2em 0.3em 0.2em -0.2em #c2ccff,
inset 10.2em 10.3em 2em -10em #d4e6ff2f;background: #121521;z-index: 1;filter:brightness(0.8);position: absolute;left: 0;right: 0;margin: auto;width: 20em;height: 20em;rotate: 45deg;}.mountains>div:nth-child(1){bottom: -240%;translate: -6em 2em;animation: mountainload1 2s ease-out 2.4s forwards;}.mountains>div:nth-child(2){bottom: -240%;translate: -2em 0em;width: 14em;height: 20em;animation: mountainload2 2s ease-out 2.2s forwards;}.mountains>div:nth-child(3){bottom: -240%;translate: 6em 3em;animation: mountainload1 2s ease-out 2s forwards;}@keyframes mountainload1{0%{bottom: -240%;}100%{bottom: -140%;}}@keyframes mountainload2{0%{bottom: -240%;}100%{bottom: -108%;}}.mountains>div::before{content:'';display: block;background:repeating-radial-gradient(at 100% 100%, transparent 0%, #c2ccff22 2px, transparent 4px);width: 12em;height: 12em;position: absolute;left: 0;top: 0;border-bottom-right-radius: 100%;}.hero-spacer{height: 40em;pointer-events: none;}.content-section{position: relative;z-index: 1112;color: #fff;width: 100%;text-align: center;padding: 16em 0 12em 0;overflow: hidden;}.content-section p.subt{color: #d8ecf8be;font-size: 0.8em;font-weight: 200;position: relative;width: fit-content;margin: auto;}.content-section h3{margin: 0.4em 0 0.6em 0;font-size: 2.3em;font-weight: 600;color: #d8ecf8;text-shadow: 0 2px 16px rgba(174, 207, 242, .24);background:linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.content-section p.subp{color: #d8ecf8be;font-size: 1em;font-weight: 400;max-width: 26em;margin: auto;}.content-section p.subt::before,
.content-section p.subt::after{position: absolute;top: 60%;display: block;content:'';width: 5em;height: 1px;opacity: 0.5;}.content-section p.subt::before{background:linear-gradient(-90deg, #9dc3f7 0%, transparent 100%);right: 120%;top: 50%;}.content-section p.subt::after{background:linear-gradient(90deg, #9dc3f7 0%, transparent 100%);left: 120%;top: 50%;}.content-section .content-acc{position: absolute;left: 0;right: 0;top: 25%;margin: auto;display: flex;justify-content: center;}.content-section .content-acc div{width: 10em;height: 10em;border-radius: 50%;box-shadow:
-1em -0.2em 0.4em -1.1em #c2ccff,
inset 0em 0em 0em 2px #c2ccff,
inset 0.2em 0.3em 0.2em -0.2em #c2ccff,
inset -1.2em 2.3em 2em -0.5em #d4e6ff2f;background: #121521;z-index: 1;filter:brightness(0.8);background:repeating-radial-gradient(at 50% 50%, transparent 0%, #c2ccff22 2px, transparent 4px);translate: -18em;}.content-section .content-acc div:nth-child(2){translate: 18em 12em;border-radius: 2em;box-shadow:
-1em -0.2em 0.4em -1.1em #c2ccff,
inset 0em 0em 0em 2px #c2ccff,
inset 0.2em 0.3em 0.2em -0.2em #c2ccff,
inset 10.8em 11.3em 2em -10.5em #d4e6ff2f;}</style></head><body><divclass="header"><h2>WTP</h2><divclass="mid-spot"onclick="document.body.classList.toggle('gold');"></div><buttonclass="contact-btn"><spanclass="glow"></span><spanclass="contact-btn-content">Contact Us</span></button><divclass="spotlight"><div></div><div></div><div></div></div></div><canvasid="particleCanvas"></canvas><divclass="accent-lines"><div><div></div><div></div><div></div><div></div><div></div></div><div><div></div><div></div><div></div><div></div></div></div><divclass="heroSubP"><p>介绍</p></div><divclass="hero"><divclass="heroT"><h2>WanerTP</h2><h2>WanerTP</h2></div></div><pclass="heroP">The most handsome blogger in the world</p><divclass="mountains"><div></div><div></div><div></div></div><divclass="hero-spacer"></div><divclass="content-section"><divclass="content-acc"><div></div><div></div></div><pclass="subt"></p><h3class="title"></h3><pclass="subp"></p></div></body><scripttype="text/javascript">const canvas = document.getElementById('particleCanvas');const ctx = canvas.getContext('2d');// Initial canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;let particles =[];let particleCount =calculateParticleCount();classParticle{constructor(){this.reset();this.y = Math.random()* canvas.height;this.fadeDelay = Math.random()*600+100;this.fadeStart = Date.now()+this.fadeDelay;this.fadingOut =false;}reset(){this.x = Math.random()* canvas.width;this.y = Math.random()* canvas.height;this.speed = Math.random()/5+0.1;this.opacity =1;this.fadeDelay = Math.random()*600+100;this.fadeStart = Date.now()+this.fadeDelay;this.fadingOut =false;}update(){this.y -=this.speed;if(this.y <0){this.reset();}if(!this.fadingOut && Date.now()>this.fadeStart){this.fadingOut =true;}if(this.fadingOut){this.opacity -=0.008;if(this.opacity <=0){this.reset();}}}draw(){
ctx.fillStyle =`rgba(${255-(Math.random()*255/2)}, 255, 255, ${this.opacity})`;
ctx.fillRect(this.x,this.y,0.4, Math.random()*2+1);}}functioninitParticles(){
particles =[];for(let i =0; i < particleCount; i++){
particles.push(newParticle());}}functionanimate(){
ctx.clearRect(0,0, canvas.width, canvas.height);
particles.forEach(particle=>{
particle.update();
particle.draw();});requestAnimationFrame(animate);}functioncalculateParticleCount(){return Math.floor((canvas.width * canvas.height)/6000);}functiononResize(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
particleCount =calculateParticleCount();initParticles();}
window.addEventListener('resize', onResize);initParticles();animate();</script></html>
本文转载自: https://blog.csdn.net/weixin_49837118/article/details/139377946
版权归原作者 wandertp 所有， 如有侵权，请联系我们删除。
版权归原作者 wandertp 所有， 如有侵权，请联系我们删除。