有什么做图文长图的网站吗,html网站模板 淘宝商城,销客多微分销系统,apache建立多个网站写在前面
小编准备了一个五彩缤纷的爱心#xff0c;送给各位小美女们~
在桌面创建一个.txt文本文件#xff0c;把代码复制进去#xff0c;将后缀.txt改为.html#xff0c;然后就可以双击运行啦#xff01;
HTML简介
HTML#xff08;超文本标记语言#xff09;是一种…
写在前面
小编准备了一个五彩缤纷的爱心送给各位小美女们~
在桌面创建一个.txt文本文件把代码复制进去将后缀.txt改为.html然后就可以双击运行啦
HTML简介
HTML超文本标记语言是一种用于创建网页的标记语言。它描述了网页的结构和内容并使用标记来定义文本、图像和其他元素的展示方式。HTML使用标签和属性来标记和组织网页的不同部分如标题、段落、图片、链接等。这些标记和属性告诉浏览器如何显示网页的内容和布局。HTML是Web开发的基础与CSS和JavaScript一起使用可以创建丰富的交互式网页。通过使用不同的标签和属性开发者可以创建具有不同样式和功能的网页。HTML是一种可扩展的语言可以根据需要添加自定义的标签和属性。
爱心代码
!DOCTYPE html
htmlheadtitle五彩缤纷的爱心/titlestylebody {margin: 0;padding: 0;height: 100vh;background: #222;display: flex;flex-direction: column;align-items: center;justify-content: center;overflow: hidden;}canvas {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}h1 {font-size: 50em;margin: 100px auto;animation: rainbow 5s ease-in-out infinite;}keyframes rainbow {0% {color: #ff0000;text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000;}25% {color: #ff8000;text-shadow: 0 0 10px #ff8000, 0 0 20px #ff8000, 0 0 30px #ff8000;}50% {color: #ffff00;text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00, 0 0 30px #ffff00;}75% {color: #00ff00;text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;}100% {color: #0000ff;text-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff, 0 0 30px #0000ff;}}
/style
/headbodycanvas idcanvas/canvash1❤/h1scriptconst canvas document.getElementById(canvas);const ctx canvas.getContext(2d);canvas.width window.innerWidth;canvas.height window.innerHeight;class TextElement {constructor(text, x, y, fontSize, color, dx 0, dy 0, speed 1) {this.text text;this.x x;this.y y;this.fontSize fontSize;this.color color;this.dx dx;this.dy dy;this.speed speed;}draw() {ctx.font ${this.fontSize}px Arial;ctx.fillStyle this.color;ctx.fillText(this.text, this.x, this.y);}update() {if (this.x canvas.width || this.x 0) {this.dx -this.dx;}if (this.y canvas.height || this.y 0) {this.dy -this.dy;}this.x this.dx * this.speed;this.y this.dy * this.speed;}}function init() {for (let i 0; i 99; i) {const fontSize Math.random() * 50 10;const text ❤;const x Math.random() * (canvas.width - fontSize * 2);const y Math.random() * (canvas.height - fontSize * 2);const color hsla(${Math.random() * 360}, 100%, 50%, 0.8);const dx Math.random() - 0.5;const dy Math.random() - 0.5;const speed Math.random() * 5 1;textElements.push(new TextElement(text, x, y, fontSize, color, dx, dy, speed));}}const textElements [];init();function animate() {requestAnimationFrame(animate);ctx.clearRect(0, 0, canvas.width, canvas.height);textElements.forEach((textElement) {textElement.draw();textElement.update();});}animate();
/script
/body/html
代码分析
这段代码是一个HTML页面用于创建一个精彩的爱心动画。整体上它由HTML结构、CSS样式以及JavaScript脚本三部分组成
1. HTML结构 - 页面头部设置了title标签标题为“五彩缤纷的爱心”。 - 页面主体包含两个元素一个canvas元素和一个h1元素。其中canvas用于绘制图形而h1中显示了一个爱心字符❤并应用了彩虹渐变动画。
2. CSS样式 - 全局样式设置了整个body背景色为深灰色#222使其充满整个屏幕并通过flex布局居中内容。 - 对canvas元素进行了定位设置使其铺满整个浏览器窗口。 - 对h1元素设置了非常大的字体大小50em并应用了一个名为rainbow的关键帧动画这个动画会每5秒循环一次使爱心字符的颜色从红色渐变到橙色、黄色、绿色最终变为蓝色同时伴随着强烈的彩色阴影效果。
3. JavaScript脚本 - 获取canvas元素并初始化其上下文2d环境以便进行绘画操作。 - 设置画布尺寸与浏览器窗口相同。 - 定义了一个名为TextElement的类表示文本元素具有位置、字体大小、颜色、速度和方向等属性并定义了draw()和update()方法分别用于在画布上绘制和更新该元素的位置。 - init()函数负责初始化99个随机生成的爱心文本元素❤字符这些元素的位置、大小、颜色、移动速度和方向都是随机产生的。 - 创建一个空数组textElements来存储所有生成的文本元素。 - 调用init()函数填充textElements数组。 - 定义animate()函数它利用requestAnimationFrame创建一个动画循环每一帧都会清除画布然后遍历并更新、重绘所有的文本元素。 - 最后调用animate()函数启动动画循环。
综上所述这段代码实现了一个动态网页网页上有一个全屏的画布在画布上有许多不同大小、颜色、速度和方向不断运动的爱心字符与此同时页面顶部还有一颗固定的大爱心字符呈现炫丽的彩虹渐变效果。
系列推荐
序号目录直达链接1HTML实现3D相册HTML实现3D相册-CSDN博客2HTML元素周期表HTML元素周期表-CSDN博客3HTML黑客帝国字母雨https://want595.blog.csdn.net/article/details/1386540544HTML五彩缤纷的爱心https://want595.blog.csdn.net/article/details/13865458156789101112131415161718192021222324252627
写在最后
我是一只有趣的兔子感谢你的喜欢
