用html做女装网站,互联网广告营销方案,山东网站seo,建设网站所采用的技术目录
前言
开始
HTML部分
JS部分
CSS部分
效果图
总结 前言 无需多言#xff0c;本文将详细介绍一段代码#xff0c;具体内容如下#xff1a; 开始 首先新建文件夹#xff0c;创建两个文本文档#xff0c;其中HTML的文件名改为[index.html]#xff0c;JS的文件名改… 目录
前言
开始
HTML部分
JS部分
CSS部分
效果图
总结 前言 无需多言本文将详细介绍一段代码具体内容如下 开始 首先新建文件夹创建两个文本文档其中HTML的文件名改为[index.html]JS的文件名改为[script.js]CSS的文件名改为[style.css]创建好后右键用文本文档打开再把下面相对应代码填入后保存即可。 HTML部分 文档的声明开始于!DOCTYPE html这是一个指令告诉浏览器这是一个HTML5文档。紧接着我们有一个html标签它定义了整个HTML文档的根元素并设置语言属性为英语langen。 在head部分我们首先遇到了meta charsetUTF-8这是一个非常重要的设置因为它告诉浏览器文档的字符编码是UTF-8。UTF-8是一种广泛使用的字符编码它可以表示世界上几乎所有的字符这使得网页可以显示多种语言和特殊符号。紧接着是一个title标签它定义了浏览器标签页上显示的标题这对于搜索引擎优化SEO和用户体验都非常重要。此外link标签引入了一个外部的CSS文件这个文件名为style.css它包含了网页的样式定义使得网页更加美观和用户友好。
!DOCTYPE html !-- 声明文档类型为HTML5 --
html langen !-- 根元素设置语言为英语 --
headmeta charsetUTF-8 !-- 设置字符编码为UTF-8支持多语言 --title雷神 Leo/title !-- 网页标题显示在浏览器标签页上 --link relstylesheet href./style.css !-- 引入外部CSS文件用于网页样式设计 --
/head
bodyscript srchttps://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js/script !-- 引入Three.js库的压缩版版本为r128用于3D图形的渲染 --script src./script.js/script !-- 引入外部JavaScript文件该文件包含网页的交互逻辑和动态效果 --
/body
/html
JS部分 这段代码通过Three.js库创建了一个动态的3D场景其中包含一个旋转的立方体其表面颜色会随着时间变化。通过顶点和片元着色器的自定义代码实现了立方体的动态效果。动画函数animate通过requestAnimationFrame不断更新保证了动画的平滑和高效。
// 创建一个场景对象这是所有3D对象的容器
const scene new THREE.Scene();// 创建一个透视相机用于定义视野和观察场景的视角
const camera new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );// 创建一个WebGL渲染器用于将3D场景渲染到网页上
const renderer new THREE.WebGLRenderer();// 设置渲染器的大小使其填满整个浏览器窗口
renderer.setSize( window.innerWidth, window.innerHeight );// 将渲染器的DOM元素添加到网页的body中这样渲染的内容就会显示在页面上
document.body.appendChild( renderer.domElement );// 创建一个立方体的几何体对象大小为1x1x1每个面有32x32的细分
const geometry new THREE.BoxGeometry(1, 1, 1, 32, 32, 32);// 创建一个时钟对象用于跟踪动画的时间
const clock new THREE.Clock();// 创建一个uniforms对象用于传递时间和其他信息到着色器中
const uniforms {time: { value: clock.getElapsedTime() }
};// 顶点着色器的GLSL代码用于处理每个顶点的位置和变换
const vert // 定义一个varying变量v_uv用于传递UV坐标到片元着色器varying vec2 v_uv;// 定义一个uniform变量time用于接收从JavaScript传递的时间信息uniform float time;// 定义一个函数rotation3dY用于创建一个绕Y轴旋转的3x3矩阵mat3 rotation3dY(float angle) {float s sin(angle);float c cos(angle);return mat3(c, 0.0, -s,0.0, 1.0, 0.0,s, 0.0, c);}// 主函数用于设置顶点的最终位置和传递UV坐标void main () {vec3 new_position position.xyz;// 使用rotation3dY函数和正弦函数结合顶点的y坐标和时间信息来旋转顶点new_position * rotation3dY(3.141 / 2.0 * sin(position.y time));// 设置最终的顶点位置gl_Position projectionMatrix * modelViewMatrix * vec4(new_position, 1.0);// 传递UV坐标到片元着色器v_uv uv;}
;// 片元着色器的GLSL代码用于确定最终的像素颜色
const frag // 定义一个varying变量v_uv从顶点着色器接收UV坐标varying vec2 v_uv;// 定义一个uniform变量time用于接收从JavaScript传递的时间信息uniform float time;// 主函数用于计算每个像素的最终颜色void main () {vec2 uv v_uv;// 根据UV坐标和时间信息计算颜色蓝色通道会随时间变化产生波动效果gl_FragColor vec4(uv.x, uv.y, 0.5 0.5 * sin(time), 1.0);}
;// 创建一个着色器材质对象使用顶点和片元着色器代码
const material new THREE.ShaderMaterial({ uniforms: uniforms, // 传入uniforms对象vertexShader: vert, // 顶点着色器代码fragmentShader: frag // 片元着色器代码
});// 创建一个立方体网格对象包含几何体和材质
const cube new THREE.Mesh( geometry, material );
scene.add( cube ); // 将立方体添加到场景中// 设置相机的位置这里将Z轴坐标设置为2以便从立方体的外部观察它
camera.position.z 2;// 定义一个动画函数用于更新立方体的旋转和渲染场景
function animate() {// 旋转立方体的X、Y和Z轴cube.rotation.x 0.002;cube.rotation.y 0.002;cube.rotation.z 0.002;// 更新uniforms中的时间信息uniforms.time.value clock.getElapsedTime();// 循环调用animate函数以持续更新动画使用requestAnimationFrame来优化性能和平滑度requestAnimationFrame( animate );// 渲染场景和相机将3D对象显示在网页上renderer.render( scene, camera );
}// 开始动画循环
animate();
CSS部分 这段CSS代码是一个通用的样式规则它将应用于HTML文档中的所有元素。具体来说* 是一个通配符选择器它表示选择所有元素。{ margin: 0; } 则是设置这些元素的margin外边距属性为0。
这意味着当你在HTML文档中使用这段CSS代码时它会移除文档中所有元素的默认外边距使得元素之间的间距为零。这通常用于重置浏览器的默认样式以便开发者可以更精确地控制网页的布局和设计。
例如浏览器通常会为某些元素如p、h1到h6、ul等添加默认的外边距或内边距。如果你希望从零开始创建自己的样式而不是在浏览器的默认样式基础上进行修改你可以在CSS文件的顶部使用这个通用规则。
这是一个常见的做法被称为“reset”或“normalize” CSS旨在为所有元素提供一个干净的、无样式的起点。然而需要注意的是这种方法也有争议因为它可能会移除一些有用的默认样式导致后续需要重新添加这些样式。因此一些开发者更倾向于使用更有针对性的方法来重置或标准化样式。
* { margin: 0; }
真就只有一行
效果图 总结 上面代码 构建了一个基于Web的3D场景使用了Three.js库来实现。文档的结构和功能可以概括如下 文档类型声明通过!DOCTYPE html指定了文档类型为HTML5这是创建现代网页的基础。 语言设置在html标签中langen属性设置页面内容的主要语言为英语有助于搜索引擎优化和屏幕阅读器的正确解读。 头部信息 字符编码meta charsetUTF-8设置了页面的字符编码为UTF-8这是一种广泛使用的国际字符编码能够表示世界上几乎所有的字符和符号。网页标题title标签定义了网页的标题即“雷神 Leo”这个标题会显示在浏览器的标签页上同时也是搜索引擎结果中的标题。样式表链接通过link标签引入了外部的CSS文件“style.css”该文件包含了网页的样式设计使得页面具有更好的视觉效果和用户界面体验。 主体内容 Three.js库引入在body标签内首先通过script标签引入了Three.js库的压缩版版本r128这是一个强大的3D图形库使得在网页上创建和显示3D内容成为可能。JavaScript逻辑紧接着另一个script标签引入了“script.js”这个JavaScript文件包含了创建3D场景的逻辑和动画效果。它定义了一个3D场景、相机、渲染器、几何体、材质以及动画循环函数使得页面上的3D对象能够动态地渲染和展示。 整体而言这个HTML文档通过结合HTML、CSS和JavaScript技术以及Three.js库创建了一个具有动态3D图形的交互式网页。用户在访问这个网页时将看到一个3D场景场景中的3D对象会随着时间动态变化提供了视觉上的吸引力和互动性。
