开篇（请大家看完）：此网站写给挚爱，后续页面还会慢慢更新，大家敬请期待~ ~ ~
此前端框架，主要侧重于前端页面的视觉效果和交互体验。通过运用各种前端技术和创意，精心打造了一系列引人入胜的页面特效，会为大家带来全新的浏览体验。
同时，我非常支持和鼓励大家对这个框架进行二次创作或修改。您可以根据自己的需求和喜好，对框架进行个性化的定制和扩展，以打造出更符合自己品味的页面效果。
但请注意，如果您打算将这个框架转发给其他人或用于其他场合，请务必注明原创来源。让我们一起维护一个良好的创作环境。
最后，轻舟会继续更新和完善这个前端页面特效框架，为大家带来更多有趣、实用的功能和效果。感谢您的支持和关注！
页面效果：整体色调背景采用柔和渐变的方式呈现，与主页面的“毒药水式”色彩搭配形成了强烈的对比；周边花瓣缓缓飘落到水面之上形成涟漪。整体给人一种温馨、浪漫的感觉，网页声明背景板犹如映衬在水中，给人一种飘渺之感，上面的四种按钮可以进行网页声明页面的切换
一：网站声明.html
<!DOCTYPE html>
<html lang="en" >
<head><meta NAME="Generator" CONTENT="EditPlus">
<meta NAME="Author" CONTENT="">
<meta NAME="Keywords" CONTENT="">
<meta NAME="Description" CONTENT=""><meta charset="UTF-8"><title>网站声明</title>
<link rel="stylesheet" href="CSS/声明.css">
<script type="text/javascript" src="JS/jquery-3.7.1.min.js"></script></head>
<body>
<div class="folder"><div class="tabs"><button class="tab active" onclick="openTab(event, 'tab-1')"><div><span>网站架构</span></div></button><button class="tab" onclick="openTab(event, 'tab-2')"><div><span>页面分配</span></div></button><button class="tab" onclick="openTab(event, 'tab-3')"><div><span>注意事项</span></div></button><button class="tab" onclick="openTab(event, 'tab-4')"><div><span>联系我们</span></div></button></div><div class="content"><div class="content__inner" id="tab-1"><div class="page"><p>“常温”个人网站采用：<p><span style="margin-left: 2em;">HTML5：用于构建网站的基本结构。</span></p><p><span style="margin-left: 2em;">CSS3：用于设置网站的样式和布局，包括响应式设计，确保网站在不同设备上都能良好显示。</span></p><p><span style="margin-left: 2em;">JavaScript：增强网站的交互性和动态效果，增强用户体验，如图片轮播、按钮点击效果等。</span></p><p><span style="margin-left: 2em;">echarts.js：用于图表类型的绘制（如：折线图、柱状图、饼状图、散点图、K线图、热力图等）</span></p></p></div></div><div class="content__inner" id="tab-2"><div class="page"><p>本网站主要侧重于前端页面的视觉效果和交互体验。通过运用各种前端技术和创意，精心打造了一系列引人入胜的页面特效，会为大家带来全新的浏览体验。</p><p>页面整体偏重于毒药水式色彩搭配，页面绚丽多彩，截止目前为止已开发的页面有：</p><p><span style="margin-left: 2em;">（1）主要功能有：记事留言，日历，录音，视频播放，音乐播放，可视化图表等</span></p><p><span style="margin-left: 2em;">（2）包含的游戏有：堆木头，压扁小鸟，进击的玉兔，拼图等游戏</span></p><p></p></div></div><div class="content__inner" id="tab-3"><div class="page"><p>欢迎访问“常温”个人网站！本网站发布的所有文章、图片、音频、视频等内容，除特别注明外，均为温轻舟原创或已获得授权使用。未经本人明确许可，任何组织或个人不得擅自转载、复制、修改、分发或以其他形式使用本网站内容，违者将依法追究其法律责任。</p>
<!-- <p>本网站可能通过表单提交、Cookies等方式收集用户的个人信息，仅用于改善用户体验、提供个性化服务或响应用户请求。我承诺不将用户信息用于任何非法目的，也不会将信息出售给第三方。</p>--><p>由于网络环境的复杂性和不确定性，我无法保证绝对的信息安全，请用户自行承担因网络安全问题可能带来的风险。</p>
<!-- <p>我将采取合理的技术和管理措施，保护用户信息的安全，防止信息泄露、毁损或丢失。然而，由于网络环境的复杂性和不确定性，我无法保证绝对的信息安全，请用户自行承担因网络安全问题可能带来的风险。</p>--><p>本网站提供的所有信息、观点和建议仅供参考，不构成任何专业建议或决策依据。用户在使用本网站内容时，应自行判断其适用性和准确性，并承担因使用本网站内容而产生的任何后果。</p></div></div><div class="content__inner" id="tab-4"><div class="page"><p>如果您对本网站的内容、隐私政策或其他方面有任何疑问或建议，欢迎通过以下方式联系我：<p><span style="margin-left: 2em;">社交媒体：请在社交媒体主页留言/私信我：如CSDN、微信公众号、阿里云等</span></p><br>
感谢您对“常温”个人网站的支持与关注！</p><p></p></div></div></div>
</div>
<script src="JS/script.js"></script><div id="jsi-cherry-container" class="container"></div><script>var RENDERER = {INIT_CHERRY_BLOSSOM_COUNT: 30,MAX_ADDING_INTERVAL: 10,init: function () {this.setParameters();this.reconstructMethods();this.createCherries();this.render();},setParameters: function () {this.$container = $('#jsi-cherry-container');this.width = this.$container.width();this.height = this.$container.height();this.context = $('<canvas />').attr({ width: this.width, height: this.height }).appendTo(this.$container).get(0).getContext('2d');this.cherries = [];this.maxAddingInterval = Math.round(this.MAX_ADDING_INTERVAL * 1000 / this.width);this.addingInterval = this.maxAddingInterval;},reconstructMethods: function () {this.render = this.render.bind(this);},createCherries: function () {for (var i = 0, length = Math.round(this.INIT_CHERRY_BLOSSOM_COUNT * this.width / 1000); i < length; i++) {this.cherries.push(new CHERRY_BLOSSOM(this, true));}},render: function () {requestAnimationFrame(this.render);this.context.clearRect(0, 0, this.width, this.height);this.cherries.sort(function (cherry1, cherry2) {return cherry1.z - cherry2.z;});for (var i = this.cherries.length - 1; i >= 0; i--) {if (!this.cherries[i].render(this.context)) {this.cherries.splice(i, 1);}}if (--this.addingInterval == 0) {this.addingInterval = this.maxAddingInterval;this.cherries.push(new CHERRY_BLOSSOM(this, false));}}};var CHERRY_BLOSSOM = function (renderer, isRandom) {this.renderer = renderer;this.init(isRandom);};CHERRY_BLOSSOM.prototype = {FOCUS_POSITION: 300,FAR_LIMIT: 600,MAX_RIPPLE_COUNT: 100,RIPPLE_RADIUS: 100,SURFACE_RATE: 0.5,SINK_OFFSET: 20,init: function (isRandom) {this.x = this.getRandomValue(-this.renderer.width, this.renderer.width);this.y = isRandom ? this.getRandomValue(0, this.renderer.height) : this.renderer.height * 1.5;this.z = this.getRandomValue(0, this.FAR_LIMIT);this.vx = this.getRandomValue(-2, 2);this.vy = -2;this.theta = this.getRandomValue(0, Math.PI * 2);this.phi = this.getRandomValue(0, Math.PI * 2);this.psi = 0;this.dpsi = this.getRandomValue(Math.PI / 600, Math.PI / 300);this.opacity = 0;this.endTheta = false;this.endPhi = false;this.rippleCount = 0;var axis = this.getAxis(),theta = this.theta + Math.ceil(-(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy) * Math.PI / 500;theta %= Math.PI * 2;this.offsetY = 40 * ((theta <= Math.PI / 2 || theta >= Math.PI * 3 / 2) ? -1 : 1);this.thresholdY = this.renderer.height / 2 + this.renderer.height * this.SURFACE_RATE * axis.rate;this.entityColor = this.renderer.context.createRadialGradient(0, 40, 0, 0, 40, 80);this.entityColor.addColorStop(0, 'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)');this.entityColor.addColorStop(0.05, 'hsl(330, 40%,' + 55 * (0.3 + axis.rate) + '%)');this.entityColor.addColorStop(1, 'hsl(330, 20%, ' + 70 * (0.3 + axis.rate) + '%)');this.shadowColor = this.renderer.context.createRadialGradient(0, 40, 0, 0, 40, 80);this.shadowColor.addColorStop(0, 'hsl(330, 40%, ' + 30 * (0.3 + axis.rate) + '%)');this.shadowColor.addColorStop(0.05, 'hsl(330, 40%,' + 30 * (0.3 + axis.rate) + '%)');this.shadowColor.addColorStop(1, 'hsl(330, 20%, ' + 40 * (0.3 + axis.rate) + '%)');},getRandomValue: function (min, max) {return min + (max - min) * Math.random();},getAxis: function () {var rate = this.FOCUS_POSITION / (this.z + this.FOCUS_POSITION),x = this.renderer.width / 2 + this.x * rate,y = this.renderer.height / 2 - this.y * rate;return { rate: rate, x: x, y: y };},renderCherry: function (context, axis) {context.beginPath();context.moveTo(0, 40);context.bezierCurveTo(-60, 20, -10, -60, 0, -20);context.bezierCurveTo(10, -60, 60, 20, 0, 40);context.fill();for (var i = -4; i < 4; i++) {context.beginPath();context.moveTo(0, 40);context.quadraticCurveTo(i * 12, 10, i * 4, -24 + Math.abs(i) * 2);context.stroke();}},render: function (context) {var axis = this.getAxis();if (axis.y == this.thresholdY && this.rippleCount < this.MAX_RIPPLE_COUNT) {context.save();context.lineWidth = 2;context.strokeStyle = 'hsla(0, 0%, 100%, ' + (this.MAX_RIPPLE_COUNT - this.rippleCount) / this.MAX_RIPPLE_COUNT + ')';context.translate(axis.x + this.offsetY * axis.rate * (this.theta <= Math.PI ? -1 : 1), axis.y);context.scale(1, 0.3);context.beginPath();context.arc(0, 0, this.rippleCount / this.MAX_RIPPLE_COUNT * this.RIPPLE_RADIUS * axis.rate, 0, Math.PI * 2, false);context.stroke();context.restore();this.rippleCount++;}if (axis.y < this.thresholdY || (!this.endTheta || !this.endPhi)) {if (this.y <= 0) {this.opacity = Math.min(this.opacity + 0.01, 1);}context.save();context.globalAlpha = this.opacity;context.fillStyle = this.shadowColor;context.strokeStyle = 'hsl(330, 30%,' + 40 * (0.3 + axis.rate) + '%)';context.translate(axis.x, Math.max(axis.y, this.thresholdY + this.thresholdY - axis.y));context.rotate(Math.PI - this.theta);context.scale(axis.rate * -Math.sin(this.phi), axis.rate);context.translate(0, this.offsetY);this.renderCherry(context, axis);context.restore();}context.save();context.fillStyle = this.entityColor;context.strokeStyle = 'hsl(330, 40%,' + 70 * (0.3 + axis.rate) + '%)';context.translate(axis.x, axis.y + Math.abs(this.SINK_OFFSET * Math.sin(this.psi) * axis.rate));context.rotate(this.theta);context.scale(axis.rate * Math.sin(this.phi), axis.rate);context.translate(0, this.offsetY);this.renderCherry(context, axis);context.restore();if (this.y <= -this.renderer.height / 4) {if (!this.endTheta) {for (var theta = Math.PI / 2, end = Math.PI * 3 / 2; theta <= end; theta += Math.PI) {if (this.theta < theta && this.theta + Math.PI / 200 > theta) {this.theta = theta;this.endTheta = true;break;}}}if (!this.endPhi) {for (var phi = Math.PI / 8, end = Math.PI * 7 / 8; phi <= end; phi += Math.PI * 3 / 4) {if (this.phi < phi && this.phi + Math.PI / 200 > phi) {this.phi = Math.PI / 8;this.endPhi = true;break;}}}}if (!this.endTheta) {if (axis.y == this.thresholdY) {this.theta += Math.PI / 200 * ((this.theta < Math.PI / 2 || (this.theta >= Math.PI && this.theta < Math.PI * 3 / 2)) ? 1 : -1);} else {this.theta += Math.PI / 500;}this.theta %= Math.PI * 2;}if (this.endPhi) {if (this.rippleCount == this.MAX_RIPPLE_COUNT) {this.psi += this.dpsi;this.psi %= Math.PI * 2;}} else {this.phi += Math.PI / ((axis.y == this.thresholdY) ? 200 : 500);this.phi %= Math.PI;}if (this.y <= -this.renderer.height * this.SURFACE_RATE) {this.x += 2;this.y = -this.renderer.height * this.SURFACE_RATE;} else {this.x += this.vx;this.y += this.vy;}return this.z > -this.FOCUS_POSITION && this.z < this.FAR_LIMIT && this.x < this.renderer.width * 1.5;}};$(function () {RENDERER.init();});</script>
</body>
</html>
二：声明.css
html,body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}* {box-sizing: border-box;
}:root {--background: rgba(137, 246, 14, 0.19);
}
.container {width: 100%;height: 100%;margin: 0;position: absolute;padding: 0;background-image: linear-gradient(to right, rgba(154, 89, 168, 0.67), rgba(30, 145, 199, 0.67), rgba(0, 255, 153, 0.67));
}
body {display: flex;grid: 2rem auto/repeat(2, 50%);grid-column-gap: 2rem;justify-content: center;width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;
}
p {margin-bottom: 1rem;
}.tab {z-index: 1;text-transform: uppercase;line-height: 0.8;display: inline-block;margin-left: -35px;filter: drop-shadow(0px -3px 2px rgba(0, 0, 0, 0.05));border: none;border-radius: 6px 6px 0 0;position: relative;margin-right: 4rem;background: var(--background);white-space: nowrap;cursor: pointer;background: var(--background);
}
.tab:focus {outline: none;
}
.tab:focus span {border-bottom: 2px solid;border-radius: 0;
}
.tab:first-of-type {margin-left: 30px;
}
.tab div {background: var(--background);padding: 6px 0;position: relative;z-index: 10;
}
.tab span {display: inline-block;border: 2px solid transparent;padding: 6px 15px 6px;border-radius: 5px;z-index: 5;position: relative;font-size: 140%;background-image: linear-gradient(to right, rgba(154, 89, 168, 0.67), rgba(255, 30, 0, 0.67), rgba(0, 255, 153, 0.67));min-width: 6rem;
}
.tab:before, .tab:after {content: "";height: 100%;position: absolute;background: var(--background);border-radius: 8px 8px 0 0;width: 30px;top: 0;
}
.tab:before {right: -16px;transform: skew(25deg);border-radius: 0 8px 0 0;
}
.tab:after {transform: skew(-25deg);left: -16px;border-radius: 8px 0 0 0;
}
.tab.active {z-index: 50;position: relative;
}
.tab.active span {background-image: linear-gradient(to right, rgba(40, 210, 176, 0.4), rgba(61, 206, 232, 0.35), rgba(40, 126, 231, 0.33));box-shadow: 0 2px 3px rgba(40, 157, 186, 0.64);border-radius: 5px;color: #d139e2;
}.content {border-radius: 10px;position: relative;width: 100%;
}
.content #tab-1 {display: block;
}
.content:before {content: "";width: 100%;height: 100%;position: absolute;z-index: -1;top: 0;left: 0;border-radius: inherit;
}
.content__inner {font-family: "Yomogi", sans-serif;display: none;background: var(--background);border-radius: inherit;padding: 1rem;filter: drop-shadow(0px -2px 2px rgba(0, 0, 0, 0.1));z-index: 5;
}.folder {margin: 1rem auto;max-width: 50rem;width: 100%;scrollbar-height: none;-ms-overflow-style: none;
}
.folder ::-webkit-scrollbar {background: transparent;display: none;
}.page {padding: 1.5rem;border-radius: 2px;min-height: 20rem;line-height: 160%;background-color: rgb(249, 249, 249);filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.15));background-image: linear-gradient(#e4e4e4 1px, transparent 1px);background-size: 8% 8%, 2px 2px;
}.tabs {padding: 2rem 0 0 0;width: 100%;margin: 0 0.5rem;overflow-x: auto;width: calc(100% - 1rem);white-space: nowrap;
}
@media (min-width: 50rem) {.tabs {margin: 0 2rem;width: calc(100% - 4rem);}
}
三：script.js
function openTab(evt, tab) {var i, tabcontent, tablinks;tabcontent = document.getElementsByClassName("content__inner");for (i = 0; i < tabcontent.length; i++) {tabcontent[i].style.display = "none";}tablinks = document.getElementsByClassName("tab");for (i = 0; i < tablinks.length; i++) {tablinks[i].className = tablinks[i].className.replace(" active", "");}document.getElementById(tab).style.display = "block";evt.currentTarget.className += " active";
}
if (window.innerWidth > 800) {const scrollContainer = document.querySelector(".tabs");scrollContainer.addEventListener("wheel", (evt) => {evt.preventDefault();scrollContainer.scrollLeft += evt.deltaY;});
}
