开篇（请大家看完）：此网站写给挚爱，后续页面还会慢慢更新，大家敬请期待~ ~ ~

此前端框架，主要侧重于前端页面的视觉效果和交互体验。通过运用各种前端技术和创意，精心打造了一系列引人入胜的页面特效，会为大家带来全新的浏览体验。

同时，我非常支持和鼓励大家对这个框架进行二次创作或修改。您可以根据自己的需求和喜好，对框架进行个性化的定制和扩展，以打造出更符合自己品味的页面效果。

但请注意，如果您打算将这个框架转发给其他人或用于其他场合，请务必注明原创来源。让我们一起维护一个良好的创作环境。

最后，轻舟会继续更新和完善这个前端页面特效框架，为大家带来更多有趣、实用的功能和效果。感谢您的支持和关注！

页面效果：整体色调背景采用柔和渐变的方式呈现，与主页面的“毒药水式”色彩搭配形成了强烈的对比；周边花瓣缓缓飘落到水面之上形成涟漪。整体给人一种温馨、浪漫的感觉，网页声明背景板犹如映衬在水中，给人一种飘渺之感，上面的四种按钮可以进行网页声明页面的切换

一：网站声明.html

                   
   
            
网站架构
                 
页面分配
                 
注意事项
                 
联系我们
        
   
     
       
         
“常温”个人网站采用：         
HTML5：用于构建网站的基本结构。
         
CSS3：用于设置网站的样式和布局，包括响应式设计，确保网站在不同设备上都能良好显示。
         
JavaScript：增强网站的交互性和动态效果，增强用户体验，如图片轮播、按钮点击效果等。
         
echarts.js：用于图表类型的绘制（如：折线图、柱状图、饼状图、散点图、K线图、热力图等）
  
        
     
     
       
         
本网站主要侧重于前端页面的视觉效果和交互体验。通过运用各种前端技术和创意，精心打造了一系列引人入胜的页面特效，会为大家带来全新的浏览体验。
         
页面整体偏重于毒药水式色彩搭配，页面绚丽多彩，截止目前为止已开发的页面有：
         
（1）主要功能有：记事留言，日历，录音，视频播放，音乐播放，可视化图表等
         
（2）包含的游戏有：堆木头，压扁小鸟，进击的玉兔，拼图等游戏
         
       
     
     
       
         
欢迎访问“常温”个人网站！本网站发布的所有文章、图片、音频、视频等内容，除特别注明外，均为温轻舟原创或已获得授权使用。未经本人明确许可，任何组织或个人不得擅自转载、复制、修改、分发或以其他形式使用本网站内容，违者将依法追究其法律责任。
          
由于网络环境的复杂性和不确定性，我无法保证绝对的信息安全，请用户自行承担因网络安全问题可能带来的风险。
          
本网站提供的所有信息、观点和建议仅供参考，不构成任何专业建议或决策依据。用户在使用本网站内容时，应自行判断其适用性和准确性，并承担因使用本网站内容而产生的任何后果。
       
     
     
       
         
如果您对本网站的内容、隐私政策或其他方面有任何疑问或建议，欢迎通过以下方式联系我：         
社交媒体：请在社交媒体主页留言/私信我：如CSDN、微信公众号、阿里云等
         
 感谢您对“常温”个人网站的支持与关注！
         
       
     
   
 
   
        

二：声明.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; 	}); }