音乐圣诞树html.

最新推荐文章于 2024-08-27 19:08:49 发布
最新推荐文章于 2024-08-27 19:08:49 发布
阅读量115 收藏 2
点赞数 1
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h6_tml6/article/details/128579302
版权 
 

<!DOCTYPE html>
 

<html lang="en">
 

<head>
 

<meta charset="UTF-8">
 

<title>Musical Christmas Lights</title>
 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 

<style>
 

* {
 

box-sizing: border-box;
 

}
 

body {
 

margin: 0;
 

height: 100vh;
 

overflow: hidden;
 

display: flex;
 

align-items: center;
 

justify-content: center;
 

background: #161616;
 

color: #c5a880;
 

font-family: sans-serif;
 

}
 

label {
 

display: inline-block;
 

background-color: #161616;
 

padding: 16px;
 

border-radius: 0.3rem;
 

cursor: pointer;
 

margin-top: 1rem;
 

width: 300px;
 

border-radius: 10px;
 

border: 1px solid #c5a880;
 

text-align: center;
 

}
 

ul {
 

list-style-type: none;
 

padding: 0;
 

margin: 0;
 

}
 

.btn {
 

background-color: #161616;
 

border-radius: 10px;
 

color: #c5a880;
 

border: 1px solid #c5a880;
 

padding: 16px;
 

width: 300px;
 

margin-bottom: 16px;
 

line-height: 1.5;
 

cursor: pointer;
 

}
 

.separator {
 

font-weight: bold;
 

text-align: center;
 

width: 300px;
 

margin: 16px 0px;
 

color: #a07676;
 

}
 

.title {
 

color: #a07676;
 

font-weight: bold;
 

font-size: 1.25rem;
 

margin-bottom: 16px;
 

}
 

.text-loading {
 

font-size: 2rem;
 

}
 

</style>
 

<script>
 

window.console = window.console || function (t) {};
 

</script>
 

<script>
 

if (document.location.search.match(/type=embed/gi)) {
 

window.parent.postMessage("resize", "*");
 

}
 

</script>
 

</head>
 

<body translate="no">
 

<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/build/three.min.js"></script>
 

<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/EffectComposer.js"></script>
 

<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/RenderPass.js"></script>
 

<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/ShaderPass.js"></script>
 

<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/CopyShader.js"></script>
 

<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/LuminosityHighPassShader.js">
 

</script>
 

<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
 

<div id="overlay">
 

<ul>
 

<li class="title">请选择音乐</li>
 

<li>
 

<button class="btn" id="btnA" type="button">
 

Snowflakes Falling Down by Simon Panrucker
 

</button>
 

</li>
 

<li><button class="btn" id="btnB" type="button">This Christmas by Dott</button></li>
 

<li><button class="btn" id="btnC" type="button">No room at the inn by TRG Banks</button></li>
 

<li><button class="btn" id="btnD" type="button">Jingle Bell Swing by Mark Smeby</button></li>
 

<li class="separator">或者</li>
 

<li>
 

<input type="file" id="upload" hidden />
 

<label for="upload">上传音乐</label>
 

</li>
 

</ul>
 

</div>
 

<script id="rendered-js">
 

const {
 

PI,
 

sin,
 

cos
 

} = Math;
 

const TAU = 2 * PI;
 

const map = (value, sMin, sMax, dMin, dMax) => {
 

return dMin + (value - sMin) / (sMax - sMin) * (dMax - dMin);
 

};
 

const range = (n, m = 0) =>
 

Array(n).
 

fill(m).
 

map((i, j) => i + j);
 

const rand = (max, min = 0) => min + Math.random() * (max - min);
 

const randInt = (max, min = 0) => Math.floor(min + Math.random() * (max - min));
 

const randChoise = arr => arr[randInt(arr.length)];
 

const polar = (ang, r = 1) => [r * cos(ang), r * sin(ang)];
 

let scene, camera, renderer, analyser;
 

let step = 0;
 

const uniforms = {
 

time: {
 

type: "f",
 

value: 0.0
 

},
 

step: {
 

type: "f",
 

value: 0.0
 

}
 

};
 

const params = {
 

exposure: 1,
 

bloomStrength: 0.9,
 

bloomThreshold: 0,
 

bloomRadius: 0.5
 

};
 

let composer;
 

const fftSize = 2048;
 

const totalPoints = 4000;
 

const listener = new THREE.AudioListener();
 

const audio = new THREE.Audio(listener);
 

document.querySelector("input").addEventListener("change", uploadAudio, false);
 

const buttons = document.querySelectorAll(".btn");
 

buttons.forEach((button, index) =>
 

button.addEventListener("click", () => loadAudio(index)));
 

function init() {
 

const overlay = document.getElementById("overlay");
 

overlay.remove();
 

scene = new THREE.Scene();
 

renderer = new THREE.WebGLRenderer({
 

antialias: true
 

});
 

renderer.setPixelRatio(window.devicePixelRatio);
 

renderer.setSize(window.innerWidth, window.innerHeight);
 

document.body.appendChild(renderer.domElement);
 

camera = new THREE.PerspectiveCamera(
 

60,
 

window.innerWidth / window.innerHeight,
 

1,
 

1000);
 

camera.position.set(-0.09397456774197047, -2.5597086635726947, 24.420789670889008);
 

camera.rotation.set(0.10443543723052419, -0.003827152981119352, 0.0004011488708739715);
 

const format = renderer.capabilities.isWebGL2 ?
 

THREE.RedFormat :
 

THREE.LuminanceFormat;
 

uniforms.tAudioData = {
 

value: new THREE.DataTexture(analyser.data, fftSize / 2, 1, format)
 

};
 

addPlane(scene, uniforms, 3000);
 

addSnow(scene, uniforms);
 

range(10).map(i => {
 

addTree(scene, uniforms, totalPoints, [20, 0, -20 * i]);
 

addTree(scene, uniforms, totalPoints, [-20, 0, -20 * i]);
 

});
 

const renderScene = new THREE.RenderPass(scene, camera);
 

const bloomPass = new THREE.UnrealBloomPass(
 

new THREE.Vector2(window.innerWidth, window.innerHeight),
 

1.5,
 

0.4,
 

0.85);
 

bloomPass.threshold = params.bloomThreshold;
 

bloomPass.strength = params.bloomStrength;
 

bloomPass.radius = params.bloomRadius;
 

composer = new THREE.EffectComposer(renderer);
 

composer.addPass(renderScene);
 

composer.addPass(bloomPass);
 

addListners(camera, renderer, composer);
 

animate();
 

}
 

function animate(time) {
 

analyser.getFrequencyData();
 

uniforms.tAudioData.value.needsUpdate = true;
 

step = (step + 1) % 1000;
 

uniforms.time.value = time;
 

uniforms.step.value = step;
 

composer.render();
 

requestAnimationFrame(animate);
 

}
 

function loadAudio(i) {
 

document.getElementById("overlay").innerHTML =
 

'<div class="text-loading">等一下哈 马上来啦...</div>';
 

const files = [
 

"https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Simon_Panrucker/Happy_Christmas_You_Guys/Simon_Panrucker_-_01_-_Snowflakes_Falling_Down.mp3",
 

"https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Dott/This_Christmas/Dott_-_01_-_This_Christmas.mp3",
 

"https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/TRG_Banks/TRG_Banks_Christmas_Album/TRG_Banks_-_12_-_No_room_at_the_inn.mp3",
 

"https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Mark_Smeby/En_attendant_Nol/Mark_Smeby_-_07_-_Jingle_Bell_Swing.mp3"
 

];
 

const file = files[i];
 

const loader = new THREE.AudioLoader();
 

loader.load(file, function (buffer) {
 

audio.setBuffer(buffer);
 

audio.play();
 

analyser = new THREE.AudioAnalyser(audio, fftSize);
 

init();
 

});
 

}
 

function uploadAudio(event) {
 

document.getElementById("overlay").innerHTML =
 

'<div class="text-loading">等一下哈 马上来啦...</div>';
 

const files = event.target.files;
 

const reader = new FileReader();
 

reader.onload = function (file) {
 

var arrayBuffer = file.target.result;
 

listener.context.decodeAudioData(arrayBuffer, function (audioBuffer) {
 

audio.setBuffer(audioBuffer);
 

audio.play();
 

analyser = new THREE.AudioAnalyser(audio, fftSize);
 

init();
 

});
 

};
 

reader.readAsArrayBuffer(files[0]);
 

}
 

function addTree(scene, uniforms, totalPoints, treePosition) {
 

const vertexShader = `
 

attribute float mIndex;
 

varying vec3 vColor;
 

varying float opacity;
 

uniform sampler2D tAudioData;
 

float norm(float value, float min, float max ){
 

return (value - min) / (max - min);
 

}
 

float lerp(float norm, float min, float max){
 

return (max - min) * norm + min;
 

}
 

float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){
 

return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);
 

}
 

void main() {
 

vColor = color;
 

vec3 p = position;
 

vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );
 

float amplitude = texture2D( tAudioData, vec2( mIndex, 0.1 ) ).r;
 

float amplitudeClamped = clamp(amplitude-0.4,0.0, 0.6 );
 

float sizeMapped = map(amplitudeClamped, 0.0, 0.6, 1.0, 20.0);
 

opacity = map(mvPosition.z , -200.0, 15.0, 0.0, 1.0);
 

gl_PointSize = sizeMapped * ( 100.0 / -mvPosition.z );
 

gl_Position = projectionMatrix * mvPosition;
 

}
 

`;
 

const fragmentShader = `
 

varying vec3 vColor;
 

varying float opacity;
 

uniform sampler2D pointTexture;
 

void main() {
 

gl_FragColor = vec4( vColor, opacity );
 

gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
 

}
 

`;
 

const shaderMaterial = new THREE.ShaderMaterial({
 

uniforms: {
 

...uniforms,
 

pointTexture: {
 

value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`)
 

}
 

},
 

vertexShader,
 

fragmentShader,
 

blending: THREE.AdditiveBlending,
 

depthTest: false,
 

transparent: true,
 

vertexColors: true
 

});
 

const geometry = new THREE.BufferGeometry();
 

const positions = [];
 

const colors = [];
 

const sizes = [];
 

const phases = [];
 

const mIndexs = [];
 

const color = new THREE.Color();
 

for (let i = 0; i < totalPoints; i++) {
 

const t = Math.random();
 

const y = map(t, 0, 1, -8, 10);
 

const ang = map(t, 0, 1, 0, 6 * TAU) + TAU / 2 * (i % 2);
 

const [z, x] = polar(ang, map(t, 0, 1, 5, 0));
 

const modifier = map(t, 0, 1, 1, 0);
 

positions.push(x + rand(-0.3 * modifier, 0.3 * modifier));
 

positions.push(y + rand(-0.3 * modifier, 0.3 * modifier));
 

positions.push(z + rand(-0.3 * modifier, 0.3 * modifier));
 

color.setHSL(map(i, 0, totalPoints, 1.0, 0.0), 1.0, 0.5);
 

colors.push(color.r, color.g, color.b);
 

phases.push(rand(1000));
 

sizes.push(1);
 

const mIndex = map(i, 0, totalPoints, 1.0, 0.0);
 

mIndexs.push(mIndex);
 

}
 

geometry.setAttribute(
 

"position",
 

new THREE.Float32BufferAttribute(positions, 3).setUsage(
 

THREE.DynamicDrawUsage));
 

geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
 

geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));
 

geometry.setAttribute("phase", new THREE.Float32BufferAttribute(phases, 1));
 

geometry.setAttribute("mIndex", new THREE.Float32BufferAttribute(mIndexs, 1));
 

const tree = new THREE.Points(geometry, shaderMaterial);
 

const [px, py, pz] = treePosition;
 

tree.position.x = px;
 

tree.position.y = py;
 

tree.position.z = pz;
 

scene.add(tree);
 

}
 

function addSnow(scene, uniforms) {
 

const vertexShader = `
 

attribute float size;
 

attribute float phase;
 

attribute float phaseSecondary;
 

varying vec3 vColor;
 

varying float opacity;
 

uniform float time;
 

uniform float step;
 

float norm(float value, float min, float max ){
 

return (value - min) / (max - min);
 

}
 

float lerp(float norm, float min, float max){
 

return (max - min) * norm + min;
 

}
 

float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){
 

return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);
 

}
 

void main() {
 

float t = time* 0.0006;
 

vColor = color;
 

vec3 p = position;
 

p.y = map(mod(phase+step, 1000.0), 0.0, 1000.0, 25.0, -8.0);
 

p.x += sin(t+phase);
 

p.z += sin(t+phaseSecondary);
 

opacity = map(p.z, -150.0, 15.0, 0.0, 1.0);
 

vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );
 

gl_PointSize = size * ( 100.0 / -mvPosition.z );
 

gl_Position = projectionMatrix * mvPosition;
 

}
 

`;
 

const fragmentShader = `
 

uniform sampler2D pointTexture;
 

varying vec3 vColor;
 

varying float opacity;
 

void main() {
 

gl_FragColor = vec4( vColor, opacity );
 

gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
 

}
 

`;
 

function createSnowSet(sprite) {
 

const totalPoints = 300;
 

const shaderMaterial = new THREE.ShaderMaterial({
 

uniforms: {
 

...uniforms,
 

pointTexture: {
 

value: new THREE.TextureLoader().load(sprite)
 

}
 

},
 

vertexShader,
 

fragmentShader,
 

blending: THREE.AdditiveBlending,
 

depthTest: false,
 

transparent: true,
 

vertexColors: true
 

});
 

const geometry = new THREE.BufferGeometry();
 

const positions = [];
 

const colors = [];
 

const sizes = [];
 

const phases = [];
 

const phaseSecondaries = [];
 

const color = new THREE.Color();
 

for (let i = 0; i < totalPoints; i++) {
 

const [x, y, z] = [rand(25, -25), 0, rand(15, -150)];
 

positions.push(x);
 

positions.push(y);
 

positions.push(z);
 

color.set(randChoise(["#f1d4d4", "#f1f6f9", "#eeeeee", "#f1f1e8"]));
 

colors.push(color.r, color.g, color.b);
 

phases.push(rand(1000));
 

phaseSecondaries.push(rand(1000));
 

sizes.push(rand(4, 2));
 

}
 

geometry.setAttribute(
 

"position",
 

new THREE.Float32BufferAttribute(positions, 3));
 

geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
 

geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));
 

geometry.setAttribute("phase", new THREE.Float32BufferAttribute(phases, 1));
 

geometry.setAttribute(
 

"phaseSecondary",
 

new THREE.Float32BufferAttribute(phaseSecondaries, 1));
 

const mesh = new THREE.Points(geometry, shaderMaterial);
 

scene.add(mesh);
 

}
 

const sprites = [
 

"https://assets.codepen.io/3685267/snowflake1.png",
 

"https://assets.codepen.io/3685267/snowflake2.png",
 

"https://assets.codepen.io/3685267/snowflake3.png",
 

"https://assets.codepen.io/3685267/snowflake4.png",
 

"https://assets.codepen.io/3685267/snowflake5.png"
 

];
 

sprites.forEach(sprite => {
 

createSnowSet(sprite);
 

});
 

}
 

function addPlane(scene, uniforms, totalPoints) {
 

const vertexShader = `
 

attribute float size;
 

attribute vec3 customColor;
 

varying vec3 vColor;
 

void main() {
 

vColor = customColor;
 

vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
 

gl_PointSize = size * ( 300.0 / -mvPosition.z );
 

gl_Position = projectionMatrix * mvPosition;
 

}
 

`;
 

const fragmentShader = `
 

uniform vec3 color;
 

uniform sampler2D pointTexture;
 

varying vec3 vColor;
 

void main() {
 

gl_FragColor = vec4( vColor, 1.0 );
 

gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
 

}
 

`;
 

const shaderMaterial = new THREE.ShaderMaterial({
 

uniforms: {
 

...uniforms,
 

pointTexture: {
 

value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`)
 

}
 

},
 

vertexShader,
 

fragmentShader,
 

blending: THREE.AdditiveBlending,
 

depthTest: false,
 

transparent: true,
 

vertexColors: true
 

});
 

const geometry = new THREE.BufferGeometry();
 

const positions = [];
 

const colors = [];
 

const sizes = [];
 

const color = new THREE.Color();
 

for (let i = 0; i < totalPoints; i++) {
 

const [x, y, z] = [rand(-25, 25), 0, rand(-150, 15)];
 

positions.push(x);
 

positions.push(y);
 

positions.push(z);
 

color.set(randChoise(["#93abd3", "#f2f4c0", "#9ddfd3"]));
 

colors.push(color.r, color.g, color.b);
 

sizes.push(1);
 

}
 

geometry.setAttribute(
 

"position",
 

new THREE.Float32BufferAttribute(positions, 3).setUsage(
 

THREE.DynamicDrawUsage));
 

geometry.setAttribute(
 

"customColor",
 

new THREE.Float32BufferAttribute(colors, 3));
 

geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));
 

const plane = new THREE.Points(geometry, shaderMaterial);
 

plane.position.y = -8;
 

scene.add(plane);
 

}
 

function addListners(camera, renderer, composer) {
 

document.addEventListener("keydown", e => {
 

const {
 

x,
 

y,
 

z
 

} = camera.position;
 

console.log(`camera.position.set(${x},${y},${z})`);
 

const {
 

x: a,
 

y: b,
 

z: c
 

} = camera.rotation;
 

console.log(`camera.rotation.set(${a},${b},${c})`);
 

});
 

window.addEventListener(
 

"resize",
 

() => {
 

const width = window.innerWidth;
 

const height = window.innerHeight;
 

camera.aspect = width / height;
 

camera.updateProjectionMatrix();
 

renderer.setSize(width, height);
 

composer.setSize(width, height);
 

},
 

false);
 

}
 

</script>
 

</body>
 

</html>
 

 

                

        

        

    




    

      

        

            

              
                
                  唐豆.
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
HTML圣诞树代码(动态音效)

				
			

			

				

					qq_63108921的博客
				

				

					12-19
					
					18万+
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en" >

<head>
 <meta charset="UTF-8">

 <title>圣诞树</title>

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

 <...

			
		

	



                

              
                



	

		

			

				
					
圣诞树代码 html

				
			

			

				

					m0_73309780的博客
				

				

					12-04
					
					6万+
					
				

			

		

		

			
				
圣诞树 html 

			
		

	



                


  
              

                


	

		

			

				
					
使用html写一个动态的带音乐的圣诞树

				
			

			

				

					weixin_35756624的博客
				

				

					12-25
					
					124
					
				

			

		

		

			
				
好的，我会用中文来回答你的问题。
使用 HTML 创建一个动态的带音乐的圣诞树，可以使用如下代码：
<!DOCTYPE html>
<html>
<head>
  <title>圣诞树</title>
</head>
<body>
  <h1>圣诞树</h1>
  <img src="...

			
		

	





	

		

			

				
					
HTML制作圣诞树，小白都会使用的教程。

				
			

			

				

					qq_62994974的博客
				

				

					12-24
					
					1万+
					
				

			

		

		

			
				
小白都会使用的圣诞树代码。

			
		

	



		

			
		



	

		

			

				
					
抖音最火的圣诞树html.音效版

				
			

			

				

					2201_75723672的博客
				

				

					12-24
					
					374
					
				

			

		

		

			
				
<!DOCTYPE html>

<html lang="en">



<head>

  <meta charset="UTF-8">



  <title>圣诞树</title>



  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normaliz

			
		

	





	

		

			

				
					
圣诞树Html编写

				
			

			

				

					zz130428的博客
				

				

					12-06
					
					455
					
				

			

		

		

			
				
圣诞树html编写

			
		

	





	

		

			

				
					
【html】圣诞树

				
			

			

				

					清风微醺的博客
				

				

					12-23
					
					2万+
					
				

			

		

		

			
				
musical christmas lights
<!DOCTYPE HEML PUBLIC>
<html xmlns="http://www.w3.org/1999/html">
    <head>
    <meta charset="utf-8">
        <style>
            * {
                box-sizing: border-box;
            }

          

			
		

	





	

		

			

				
					
【AE圣诞树HTML】

				
			

			

				

					qq_45278500的博客
				

				

					12-22
					
					1601
					
				

			

		

		

			
				
又是一年圣诞节，圣诞树源码安排上。

			
		

	





	

		

			

				
					
[HTML] 那个圣诞树，把代码分享给大家

					
热门推荐

				
			

			

				

					ZXW_NUDT的博客
				

				

					12-25
					
					42万+
					
				

			

		

		

			
				
<!DOCTYPE HEML PUBLIC>
<html>
<head>
<meta charset="utf-8">
<style>
html, body
{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 border: 0;
 }
 
div
{
margin: 0;
padding: 0;
border: 0;
}
.nav
{
position: absolute;
top:.

			
		

	





	

		

			

				
					
圣诞树圣诞树代码.zip

				
			

			

				

					12-14
				

			

		

		

			
				
例如，用于装饰圣诞树的图标或作为背景音乐的音频文件。这些资源通常通过HTML的`<img>`、`<audio>`标签引用，或者用CSS的`background-image`属性加载。  在实际项目中，开发者可能还使用了版本控制工具如Git管理代码...

			
		

	





	

		

			

				
					
html实现圣诞树动效.zip

				
			

			

				

					12-24
				

			

		

		

			
				
在这个“html实现圣诞树动效”的项目中，我们可以看到HTML5如何被用来制作一个节日特色的互动元素——圣诞树动效。  首先，HTML5的核心是其结构化标签和语义化元素，这些元素有助于创建更清晰、更易于理解的网页内容...

			
		

	





	

		

			

				
					
圣诞树圣诞树圣诞树圣诞树.zip

				
			

			

				

					12-14
				

			

		

		

			
				
标题中的“圣诞树圣诞树圣诞树圣诞树.zip”暗示了这是一个与圣诞节相关的压缩包，很可能包含了一组用于创建圣诞主题的网页代码。描述中的“圣诞树网页代码”进一步确认了这一点，表明压缩文件内的内容是专门为了在...

			
		

	





	

		

			

				
					
HTML圣诞树代码带音乐.zip

				
			

			

				

					12-19
				

			

		

		

			
				
在这个“HTML圣诞树代码带音乐.zip”压缩包中，我们可以找到一个利用HTML来展示圣诞树效果的示例项目，其中可能包含了HTML文件、CSS样式表以及可能的JavaScript脚本来实现动态效果和背景音乐。  首先，HTML文件...

			
		

	





	

		

			

				
					
圣诞树最新.zip

				
			

			

				

					12-23
				

			

		

		

			
				
在给定的“圣诞树最新.zip”压缩包文件中，我们可以推测这可能包含与圣诞节相关的数字资源，如图像、程序或者装饰元素。由于没有具体的标签信息，我们将根据常见的圣诞树主题来探讨相关的信息技术知识点。  1. 图像...

			
		

	





	

		

			

				
					
css基础学习总结(一)

				
			

			

				

					₍˄·͈༝·͈˄*₎◞ ̑̑的博客
				

				

					08-27
					
					846
					
				

			

		

		

			
				
第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;})>类选择器(.con{…})>标签选择器(dic{…})>通用选择器(*{…第三优先级：由一个或多个id选择器来定义。}会覆盖.classname{margin:3pxl}第五优先级：由一个或多个类型选择器定义。}覆盖*{margin:10px；第二优先级：在html中给元素标签加style，即内联样式。第六优先级：通配选择器，如*{marigin:6px;

			
		

	





	

		

			

				
					
梳理了一下Python下载安装及Pycharm的安装和配置，有详细图文

				
			

			

				

					08-30
				

			

		

		

			
				
 Python 是一种广泛应用的高级编程语言，尤其在数据分析、人工智能、Web 开发等领域有着广泛的应用。搭建Python的开发环境，本文提供了python下载安装，Pycharm的安装和配置，有详细图文，亲测可用。

在学习Python之前，正确下载并安装Python环境，以及配置一个高效、易用的集成开发环境（IDE）如PyCharm，是不可或缺的基础步骤。
本文旨在为初学者提供一份详尽且易于理解的指南，通过图文并茂的方式，引导读者完成Python的下载与安装，以及PyCharm的下载、安装与基本配置。我们将一步步深入，从环境搭建的起点出发，直至成功地安装Python及Python解释器Pycharn的安装和配置

			
		

	





	

		

			

				
					
2022.2-2023.3空气AOI.xlsx

					
最新发布

				
			

			

				

					08-30
				

			

		

		

			
				
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/141308908
2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题
3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！
3、课程引用:   经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理
资源名称：2014.1-2023.3全国地级市空气质量指数AOI相关数据

区域范围：全国各地级市

时间范围：2014.1.1-2023.3.8

数据格式：.xlsx

主要指标：地区名称、AQI指数、空气质量级别、首要污染物

数据量:100w+


			
		

	





	

		

			

				
					
基于springboot高校学科竞赛平台设计与实现.docx

				
			

			

				

					08-30
				

			

		

		

			
				
基于springboot高校学科竞赛平台设计与实现.docx

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值