页面效果：本前端网站应用多个JS特效
1.index.html：
html
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>蓝网团队</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript">
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<link href="css/简介.css" rel='stylesheet' type='text/css' />
</head>
<body>
<div class="banner-sec-agile">
<div class="top-nav menu-top">
<div class="container">
<div class="navbar-header">
<h1>
蓝色网络安全建设
</h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="menu-left navbar-right">
<ul class="nav navbar">
<li>
<a href="index.html" class="active">主页</a>
</li>
<li>
<a href="#about" class="scroll">关于蓝网</a>
</li>
<li>
<a href="#education" class="scroll">网络安全</a>
</li>
<li>
<a href="#gallery" class="scroll">公益项目</a>
</li>
<li>
<a href="#contact" class="scroll">联系方式</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<section class="banner-w3l">
<div class="container">
<div class="banner-left-agile">
<img src="images/空白logo.jpg" alt="" class="animated-img"/>
</div>
<div class="banner-left-wthree">
<h6>你好！我是：</h6>
<h2>温轻舟</h2>
<div class="popEffect">
<span>网页设计师</span>
<span>爬虫工程师</span>
<span>阿里云专家博主</span>
<span>CSDN全栈领域创作者</span>
</div>
<p class="zi">蓝网，意在打造网络安全建设，维护网络蓝天的纯净</p>
<a href="#contact" class="wthree-btn btn-6 scroll">联系我
<span></span>
</a>
</div>
</div>
</section>
</div>
<div class="banner-bottom-agileits" id="about">
<div class="container">
<h3 class="tittle-w3ls">
关于蓝网
</h3>
<div class="welcome-sub-agileits">
<div class="col-md-111 banner_bottom_left-w3ls">
<h4>蓝网团队</h4>
<p>
网络安全涵盖广泛，从日常浏览的普通网站到关乎国家安全的机密信息，维护网络安全是每个人的责任与义务。<br>
蓝网团队自成立之初，就致力于从根本上加强网络安全防护，严厉打击不良及违法网站，以保护网络环境的纯净与安全。
为此，蓝网团队不仅采取了强有力的技术措施，还成立了公益性的网络项目，旨在广泛宣传网络安全技术知识，提升公众对网络安全的认识与防范能力。通过举办研讨会以及发布教育资料，
蓝网团队积极引导社会各界关注网络安全问题，共同构建安全、健康的网络环境。
未来，蓝网团队将继续秉持初心，不断创新，为维护网络世界的和谐稳定贡献更多力量。
</p>
<a href="#contact" class="wthree-btn btn-6 scroll">联系我
<span></span>
</a>
</div>
<div class="col-md-6 banner_bottom_right-w3l">
<ul class="some_facts">
<li>
<span class="fa fa-bar-chart" aria-hidden="true"></span>
<label>***</label> 累计护网次数</li>
<li>
<span class="fa fa-line-chart" aria-hidden="true"></span>
<label>***</label> 累计公益项目</li>
<li>
<span class="fa fa-magic" aria-hidden="true"></span>
<label>***</label> 成员人数</li>
<li>
<span class="fa fa-user" aria-hidden="true"></span>
<label>100万+</label> 累计教程字数</li>
</ul>
</div>
</div>
</div>
</div>
<div class="stats-w3layouts">
<div class="container">
<div class="stats-info">
<div class="col-xs-3 stats-grid-w3-agile">
<div class="stats-img">
<span class="fa fa-clone" aria-hidden="true"></span>
</div>
<p></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="education-agileinfo" id="education">
<h3 class="tittle-w3ls">网络安全</h3>
<div class="container">
<div class="col-xs-4 eduleft-agileinfo">
<div class="left1-w3ls">
<h3>青少年网络安全</h3>
<p>（1）网络沉迷：</p>
<p>（2）网络诈骗：</p>
<p>（3）网络欺凌：</p>
</div>
<div class="left1-w3ls">
<h3>隐私泄露问题</h3>
<p>（1）主动泄露：</p>
<p>（2）恶意软件：</p>
<p>（3）技术漏洞：</p>
</div>
<div class="left1-w3ls">
<h3>不良信息接触</h3>
<p>（1）不良网站：</p>
<p>（2）社交媒体：</p>
<p>（3）搜索引擎：</p>
</div>
</div>
<div class="col-xs-8 eduright-agileinfo">
<div class="right1-w3ls">
<h3>类型描述：</h3>
<p>指青少年习惯长时间沉浸在网络空间，对互联网产生依赖，忽视现实事务等</p>
<p>红包返利、免费皮肤陷阱、钓鱼网站、解除游戏防沉迷限制及钓鱼链接诈骗等</p>
<p>用文字、音视频等形式对他人进行侮辱、诽谤、威胁或私自公开他人信息等</p>
</div>
<div class="right1-w3ls">
<h3>类型描述：</h3>
<p>在社交平台上分享个人信息，如生日、住址，参与在线问卷调查或抽奖活动等</p>
<p>下载并安装恶意软件后，该软件会在后台收集用户信息，并将其发送给攻击者</p>
<p>企业的系统或应用存在安全漏洞，被攻击者利用以窃取用户数据</p>
</div>
<div class="right1-w3ls">
<h3>类型描述：</h3>
<p>指含有淫秽、色情、暴力、赌博、大量广告、恐怖主义等违法违规内容的网站</p>
<p>一些不法分子或恶意用户会利用社交媒体散布不良信息，危害网络安全</p>
<p>在使用搜索引擎时，一些不良信息链接或恶意软件，有可能隐藏在结果页面中</p>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="stats-w3layouts">
<div class="container">
<div class="stats-info">
<div class="col-xs-3 stats-grid-w3-agile">
<div class="stats-img">
<span class="fa fa-clone" aria-hidden="true"></span>
</div>
<p></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="gallery-agile" id="gallery">
<div class="container">
<h3 class="tittle-w3ls">公益项目</h3>
<div class="gallery-agile-kmsrow">
<div class="col-xs-4 gallery-agile-grids">
<div class="portfolio-hover">
<a href="images/空白logo.jpg" data-lightbox="example-set">
<img src="images/空白logo.jpg" class="img-responsive zoom-img" alt="" />
</a>
</div>
</div>
<div class="col-xs-4 gallery-agile-grids">
<div class="portfolio-hover">
<a href="images/空白logo.jpg" data-lightbox="example-set">
<img src="images/空白logo.jpg" class="img-responsive zoom-img" alt="" />
</a>
</div>
</div>
<div class="col-xs-4 gallery-agile-grids">
<div class="portfolio-hover">
<a href="images/空白logo.jpg" data-lightbox="example-set">
<img src="images/空白logo.jpg" class="img-responsive zoom-img" alt="" />
</a>
</div>
</div>
<div class="col-xs-4 gallery-agile-grids">
<div class="portfolio-hover">
<a href="images/空白logo.jpg" data-lightbox="example-set">
<img src="images/空白logo.jpg" class="img-responsive zoom-img" alt="" />
</a>
</div>
</div>
<div class="col-xs-4 gallery-agile-grids">
<div class="portfolio-hover">
<a href="images/空白logo.jpg" data-lightbox="example-set">
<img src="images/空白logo.jpg" class="img-responsive zoom-img" alt="" />
</a>
</div>
</div>
<div class="col-xs-4 gallery-agile-grids">
<div class="portfolio-hover">
<a href="images/空白logo.jpg" data-lightbox="example-set">
<img src="images/空白logo.jpg" class="img-responsive zoom-img" alt="" />
</a>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="contact-w3l" id="contact">
<div class="container">
<h3 class="tittle-w3ls">联系我
</h3>
<p class="we">联系方式:
<a class="email-link">邮箱: 2*********@qq.com</a>
</p>
</div>
</div>
<div class="footer-bot-wthree">
<div class="container">
<div class="visit-w3ls">
<h3>欢迎阅读</h3>
</div>
<p class="copy-right-agile">蓝网团队
<a>温轻舟</a>
</p>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$().UItoTop({
easingType: 'easeOutQuart'
});
});
jQuery.extend( jQuery.easing,
{
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
});
</script>
</body>
</html>2. 简介.css：
css
/*CSS重置, 消除不同浏览器默认样式之间的差异*/
body, html, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0; /* 移除所有元素的外边距 */
padding: 0; /* 移除所有元素的内边距 */
border: 0; /* 移除所有元素的边框 */
font-size: 100%; /* 设置所有元素的字体大小为继承大小的100%，确保字体大小的一致性 */
font: inherit; /* 使所有元素的字体属性继承自其父元素 */
vertical-align: baseline; /* 将所有元素的垂直对齐方式设置为基线对齐 */
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; /* 将这些元素设置为块级元素 */
}
body {
padding: 0; /* 设置body元素的内边距（padding）为0，意味着body与其内容之间没有额外的空间 */
margin: 0; /* 设置body元素的外边距（margin）为0，确保body元素紧贴浏览器窗口的边缘 */
background: #FFF; /* 设置body的背景颜色为白色（#FFF是白色的十六进制表示） */
font-family: 'Open Sans', sans-serif; /* 设置body中文本的字体系列为'Open Sans'。如果用户的计算机上没有安装'Open Sans'，则回退到使用通用的无衬线字体（sans-serif） */
}
body a {
transition: 0.5s all; /* 为body内的所有<a>（链接）元素设置过渡效果，过渡时间为0.5秒，影响所有可动画属性 */
-webkit-transition: 0.5s all; /* 为body内的所有<a>元素设置WebKit特有的过渡效果（用于旧版Safari和Chrome浏览器），过渡时间为0.5秒，影响所有可动画属性 */
-moz-transition: 0.5s all; /* 为body内的所有<a>元素设置Mozilla特有的过渡效果（用于旧版Firefox浏览器），过渡时间为0.5秒，影响所有可动画属性 */
-o-transition: 0.5s all; /* 为body内的所有<a>元素设置Opera特有的过渡效果（用于旧版Opera浏览器），过渡时间为0.5秒，影响所有可动画属性 */
text-decoration: none; /* 移除<a>元素默认的下划线装饰 */
}
/* 对p标签进行样式设置 */
p {
/* 设置p标签的外边距为0 */
margin: 0;
/* 设置p标签的字体大小为15像素 */
font-size: 15px;
/* 设置p标签的行高为1.9，这意味着行间距是字体大小的1.9倍 */
line-height: 1.9;
/* 设置p标签的文字颜色为#999（灰色调） */
color: #999;
/* 设置p标签的文字字母之间的间距为1像素 */
letter-spacing: 1px;
}
/* 对具有navbar和navbar-default类的nav标签进行样式设置 */
nav.navbar.navbar-default {
/* 设置背景颜色为继承父元素的背景颜色 */
background-color: inherit;
/* 去掉默认的边框 */
border: none;
/* 设置外边距为0 */
margin: 0;
}
/* 对同时具有nav, navbar类的ul标签进行样式设置 */
ul.nav.navbar {
/* 设置文本居中对齐 */
text-align: center;
/* 设置外边距，上为17px，右和左为0，下也为0 */
margin: 17px 0 0;
/* 设置最小高度为继承父元素的高度 */
min-height: inherit;
}
/* 对.top-nav下的ul中的li进行样式设置 */
.top-nav ul li {
/* 设置左右外边距为1em（相对单位，相对于当前字体大小） */
margin: 0 1em;
/* 设置元素为行内块，使其能在一行显示同时可以设置宽高 */
display: inline-block;
}
/* 对.top-nav下的ul中的li内的a标签进行样式设置 */
.top-nav ul li a {
/* 去掉下划线装饰 */
text-decoration: none;
/* 设置字母间距为1像素 */
letter-spacing: 1px;
/* 设置字体大小为17像素 */
font-size: 17px;
/* 设置文字颜色为#fff（白色） */
color: #fff;
/* 设置定位为相对定位，可以相对于其正常位置进行偏移 */
position: relative;
/* 设置内边距为0 */
padding: 0;
/* 设置元素为行内块 */
display: inline-block;
}
/* 设置.nav下直接子元素li中的a标签在鼠标悬停或聚焦时的样式 */
.nav > li > a:hover, .nav > li > a:focus {
background: none; /* 移除背景色，如果有的话 */
}
/* 设置菜单跳转按键在鼠标悬停或处于活动状态时的样式 */
.top-nav ul li a:hover, .top-nav ul li a.active {
color: #305dff; /* 改变文字颜色为#ff304f（一种粉红色） */
-webkit-transform: scale(1.1); /* 为兼容WebKit浏览器，设置元素放大1.1倍 */
-moz-transform: scale(1.1); /* 为兼容Mozilla浏览器，设置元素放大1.1倍 */
-o-transform: scale(1.1); /* 为兼容Opera浏览器，设置元素放大1.1倍 */
-ms-transform: scale(1.1); /* 为兼容Microsoft浏览器，设置元素放大1.1倍 */
transform: scale(1.1); /* 设置元素放大1.1倍，为现代浏览器标准属性 */
}
/* 设置.top-nav下的.dropdown-menu中的li中的a标签在鼠标悬停或聚焦时的样式 */
.top-nav .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color: #FF5722; /* 改变文字颜色为#FF5722（一种橙色） */
text-decoration: none; /* 去掉下划线装饰 */
background-color: transparent; /* 设置背景色为透明 */
}
/* 设置.navbar-right类的样式，通常用于导航栏右侧元素 */
.navbar-right {
margin-right: 0; /* 设置右侧外边距为0 */
}
/* 设置.banner-sec-agile类的样式，可能用于横幅或广告栏区域 */
.banner-sec-agile {
background: #0ecff7; /* 设置背景颜色为#0ecff7（一种青色） */
}
/* 设置.banner-left-agile下的img标签的样式 */
.banner-left-agile img {
height: 450px; /* 设置图片高度为450像素 */
width: 100%; /* 设置图片宽度为其父元素宽度的100% */
}
/* 设置.banner-left-agile类的样式，可能用于横幅左侧部分 */
.banner-left-agile {
float: left; /* 设置元素向左浮动，用于布局 */
width: 45%; /* 设置元素宽度为其父元素宽度的45% */
}
/* 设置.banner-left-wthree类的样式，可能用于横幅右侧部分 */
.banner-left-wthree {
float: right; /* 设置元素向右浮动，用于布局 */
width: 50%; /* 设置元素宽度为其父元素宽度的50% */
}
.banner-left-wthree {
margin:5px auto 0; /* 设置上边距为5px，左右自动居中，下边距为0 */
text-align: right; /* 文本对齐到右侧 */
}
.banner-left-wthree h6 {
font-size: 28px; /* 字体大小设置为28px */
color: #fff; /* 字体颜色设置为白色 */
letter-spacing: 1px; /* 字符间距设置为1px */
font-style: italic; /* 字体样式设置为斜体 */
margin-bottom: 5px; /* 下边距设置为5px */
}
/*温轻舟样式*/
.banner-left-wthree h2 {
color: #5d30ff;
font-size: 80px; /* 字体大小设置为80px */
font-family: 'Scada', sans-serif; /* 字体族设置为'Scada'，如果不可用则使用无衬线字体 */
text-shadow: 2px 2px 11px rgba(12, 70, 92, 0.46); /* 文本阴影设置为2px 2px 11px #5d5d5d（一种灰色） */
font-style: italic; /* 字体样式设置为斜体 */
}
.banner-left-wthree p.zi {
/* 设置背景渐变 */
background: linear-gradient(to bottom, #89dc4d, #32a9cd, #885cd0, #cb0db1,dimgray);
/* 裁剪背景，使其只显示在文本上 */
-webkit-background-clip: text;
/* 隐藏文本的默认填充颜色 */
-webkit-text-fill-color: transparent;
color: transparent;
letter-spacing: 1px; /* 字母间距设置为1像素 */
font-size: 15px; /* 字体大小设置为15像素 */
margin-top: 4em; /* 上边距设置为4倍的字体大小（通常用于创建视觉上的间距） */
top: 50%; /* 初始时，元素顶部距离其父容器顶部50% */
left: 50%; /* 初始时，元素左侧距离其父容器左侧50% */
transform: translate(-50%, -50%) scale(0.8); /* 使用变换将元素移动到其父容器的正中心，并稍微缩小 */
opacity: 0; /* 初始时，元素完全透明（隐藏） */
animation: coolFadeInZoomMove 3.5s forwards 1.5s;
}
/* 定义动画 */
@keyframes coolFadeInZoomMove {
0% {
opacity: 0; /* 动画开始时，元素完全透明 */
transform: translate(-50%, -50%) scale(0.8); /* 元素位于其父容器的正中心，并稍微缩小 */
}
20% {
opacity: 1; /* 元素逐渐变得完全不透明 */
transform: translate(-50%, -50%) scale(2); /* 元素放大到2倍，但中心位置不变 */
}
50% {
opacity: 1; /* 元素保持完全不透明 */
transform: translate(-50%, -50%) scale(2); /* 元素保持在2倍大小，中心位置不变 */
}
70% {
opacity: 1; /* 元素保持完全不透明 */
transform: translate(-50%, -50%) scale(1); /* 元素缩小到原始大小，中心位置不变 */
}
100% {
opacity: 1; /* 元素保持完全不透明 */
transform: translate(0, 0) scale(1); /* 元素移动到其最终位置（这里假设是父容器的左上角），并保持原始大小 */
top: auto; /* 重置顶部位置为自动，以便元素跟随正常的文档流 */
left: auto; /* 重置左侧位置为自动，以便元素跟随正常的文档流 */
position: static; /* 重置定位方式为静态，以便元素跟随正常的文档流 */
}
}
.popEffect span {
animation: pop 10s linear infinite 0s; /* 应用名为'pop'的动画，持续7.5秒，线性变化，无限循环，从0秒开始 */
-ms-animation: pop 10s linear infinite 0s; /* 针对旧版IE浏览器的动画设置 */
-webkit-animation: pop 10s linear infinite 0s; /* 针对WebKit内核浏览器的动画设置（如Chrome, Safari） */
opacity: 0; /* 透明度设置为0 */
overflow: hidden; /* 超出内容区域的部分隐藏 */
position: absolute; /* 位置设置为绝对定位 */
width: 70%; /* 宽度设置为父元素的70% */
left:9.5%; /* 距离父元素左边9.5% */
color: #fff; /* 字体颜色设置为白色 */
font-family: 'Open Sans', sans-serif; /* 字体族设置为'Open Sans'，如果不可用则使用无衬线字体 */
letter-spacing: 1px; /* 字符间距设置为1px */
font-size: 40px; /* 字体大小设置为35px */
}
.popEffect span:nth-child(2){
animation-delay: 2.5s; /* 动画延迟2.5秒开始 */
-ms-animation-delay: 2.5s; /* 针对旧版IE浏览器的动画延迟设置 */
-webkit-animation-delay: 2.5s; /* 针对WebKit内核浏览器的动画延迟设置 */
}
.popEffect span:nth-child(3) {
animation-delay: 5s; /* 为第三个span子元素设置动画延迟为5秒 */
-ms-animation-delay: 5s; /* 为IE浏览器（特别是IE10）设置动画延迟为5秒 */
-webkit-animation-delay: 5s; /* 为基于WebKit的浏览器（如Chrome, Safari）设置动画延迟为5秒 */
}
.popEffect span:nth-child(4) {
animation-delay: 7.5s; /* 为第四个span子元素设置动画延迟为7.5秒 */
-ms-animation-delay: 7.5s; /* 为IE浏览器设置动画延迟为7.5秒 */
-webkit-animation-delay: 7.5s; /* 为基于WebKit的浏览器设置动画延迟为7.5秒 */
}
.popEffect span:nth-child(5) {
animation-delay: 10s; /* 为第四个span子元素设置动画延迟为7.5秒 */
-ms-animation-delay: 10s; /* 为IE浏览器设置动画延迟为7.5秒 */
-webkit-animation-delay: 10s; /* 为基于WebKit的浏览器设置动画延迟为7.5秒 */
}
@-moz-keyframes pop {
/* 定义Mozilla Firefox浏览器中的关键帧动画"pop" */
0% { opacity: 0; } /* 动画开始时，元素完全透明 */
5% { opacity: 0; -moz-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); } /* 元素保持透明，同时进行旋转、缩放、倾斜和平移的变换 */
10% { opacity: 1; -moz-transform: translateY(0px); } /* 元素变为不透明，并仅在Y轴上进行平移 */
25% { opacity: 1; -moz-transform: translateY(0px); } /* 元素保持不透明和位置不变 */
30% { opacity: 0; -moz-transform: translateY(0px); } /* 元素再次变为透明 */
80% { opacity: 0; } /* 元素保持透明 */
100% { opacity: 0; } /* 动画结束时，元素仍然透明 */
}
@-webkit-keyframes pop {
/* 定义基于WebKit的浏览器（如Chrome, Safari）中的关键帧动画"pop" */
/* 动画内容与@-moz-keyframes pop相同，但使用-webkit-前缀 */
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes pop {
/* 定义IE浏览器中的关键帧动画"pop" */
/* 动画内容与@-moz-keyframes pop相同，但使用-ms-前缀 */
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes pop {
/* 定义IE浏览器中的关键帧动画"pop" */
/* 动画内容与@-moz-keyframes pop相同，但使用-ms-前缀 */
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
.wthree-btn {
position: relative; /* 设置元素为相对定位，以便子元素可以使用绝对定位相对于它进行定位 */
display: inline-block; /* 将元素设置为行内块级元素 */
overflow: hidden; /* 隐藏超出元素边界的内容 */
padding: 11px 20px; /* 设置内边距，上下为11px，左右为20px */
color: #fff; /* 设置字体颜色为白色 */
z-index: 9; /* 设置元素的层叠顺序为9，确保它位于其他z-index较低的元素之上 */
font-size: 1em; /* 设置字体大小为1em */
outline: none; /* 移除元素被聚焦时的轮廓线 */
letter-spacing: 4px; /* 设置字符间距为4px */
font-weight: 300; /* 设置字体权重为300（轻） */
background-color: #ff304f; /* 设置背景颜色为#ff304f（一种红色） */
-webkit-transition: .5s all; /* 为基于WebKit的浏览器设置所有可动画属性的过渡效果为0.5秒 */
-moz-transition: .5s all; /* 为Mozilla Firefox浏览器设置过渡效果 */
-o-transition: .5s all; /* 为Opera浏览器设置过渡效果 */
-ms-transition: .5s all; /* 为IE浏览器设置过渡效果 */
transition: .5s all; /* 为所有支持transition属性的浏览器设置过渡效果 */
border-radius: 20px 0 0; /* 设置元素的圆角边框，仅左上角为20px */
margin-top: 2em; /* 设置上边距为2em */
}
.wthree-btn.btn-6 span {
position: absolute; /* 设置span为绝对定位 */
display: block; /* 将span设置为块级元素 */
width: 0; /* 初始宽度为0 */
height: 0; /* 初始高度为0 */
-webkit-border-radius: 50%; /* 为基于WebKit的浏览器设置span的圆角边框为50%（圆形） */
-moz-border-radius: 50%; /* 为Mozilla Firefox浏览器设置圆角边框 */
-o-border-radius: 50%; /* 为Opera浏览器设置圆角边框 */
-ms-border-radius: 50%; /* 为IE浏览器设置圆角边框 */
border-radius: 50%; /* 为所有支持border-radius属性的浏览器设置圆角边框 */
background-color: #1796f8; /* 设置背景颜色为黑色 */
-webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out; /* 为基于WebKit的浏览器设置宽度和高度的过渡效果 */
-moz-transition: width 0.5s ease-in-out, height 0.5s ease-in-out; /* 为Mozilla Firefox浏览器设置过渡效果 */
-o-transition: width 0.5s ease-in-out, height 0.5s ease-in-out; /* 为Opera浏览器设置过渡效果 */
-ms-transition: width 0.5s ease-in-out, height 0.5s ease-in-out; /* 为IE浏览器设置过渡效果 */
transition: width 0.5s ease-in-out, height 0.5s ease-in-out; /* 为所有支持transition属性的浏览器设置过渡效果 */
-webkit-transform: translate(-50%, -50%); /* 为基于WebKit的浏览器设置span的位移，使其中心对齐父元素的中心 */
-moz-transform: translate(-50%, -50%); /* 为Mozilla Firefox浏览器设置位移 */
-o-transform: translate(-50%, -50%); /* 为Opera浏览器设置位移 */
-ms-transform: translate(-50%, -50%); /* 为IE浏览器设置位移 */
transform: translate(-50%, -50%); /* 为所有支持transform属性的浏览器设置位移 */
z-index: -1; /* 设置span的层叠顺序为-1，确保它位于父元素之下 */
}
/* 当用户将鼠标悬停在类名为 .wthree-btn 且同时具有 .btn-6 的按钮上时，或者该按钮获得焦点时，设置文字颜色为白色 */
.wthree-btn.btn-6:hover,
.wthree-btn.btn-6:focus {
color: #fff;
}
/* 当用户将鼠标悬停在类名为 .wthree-btn 且同时具有 .btn-6 的按钮上时，其内部的 span 元素的宽度设置为 225%，高度设置为 562.5px */
.wthree-btn.btn-6:hover span {
width: 225%;
height: 562.5px;
}
/* 当用户激活(通常是点击)类名为 .wthree-btn 且同时具有 .btn-6 的按钮时，设置背景颜色为 #FFC107 (一种黄色) */
.wthree-btn.btn-6:active {
background-color: #FFC107;
}
/* 设置 h3 元素带有类名 .tittle-w3ls 的文字颜色为黑色，字体大小为 3.7em，字母间距为 1px，文本居中对齐，底部外边距为 50px */
h3.tittle-w3ls {
/* 设置背景渐变 */
background: linear-gradient(to bottom, #3ad3ee, #2fb6ff, #00acfc, #1655c1,deepskyblue,cadetblue);
/* 裁剪背景，使其只显示在文本上 */
-webkit-background-clip: text;
/* 隐藏文本的默认填充颜色 */
-webkit-text-fill-color: transparent;
color: transparent;
font-size: 3.7em;
letter-spacing: 1px;
text-align: center;
margin-bottom: 20px; /* 设置下边距 */
}
.we {
/*margin: 20px 0; !* 可选，增加容器上下的外边距 *!*/
text-align: center; /* 使容器内的内容居中对齐 */
margin-bottom: 5px; /* 设置联系方式与邮箱之间的上边距 */
font-weight: bold; /* 可选，加粗联系方式标签 */
color: #0f1011;
}
.email-link {
display: block; /* 确保邮箱链接作为块级元素显示，从而独占一行 */
margin-top: 5px; /* 设置邮箱链接与联系方式之间的上边距（实际是块级元素的上外边距） */
margin-bottom: 5px; /* 设置邮箱链接下方的外边距，如果需要的话 */
color: #0f1011; /* 设置链接文字颜色 */
text-decoration: none; /* 去掉链接下划线 */
font-size: 16px; /* 可选，调整链接字体大小 */
transition: 0.3s; /* 设置过渡效果持续时间为0.3秒 */
}
.email-link:hover {
text-decoration: underline; /* 鼠标悬停时显示下划线 */
color: #0ecff7;
}
/* 设置 h3 元素带有类名 .tittle-w3ls 内部 span 元素的文字颜色为 #0ecff7 (一种蓝色) */
h3.tittle-w3ls span {
color: #0ecff7;
}
/*为多个类名设置相同的样式：内边距为上下各 1em，左右为 0 */
.banner-bottom-agileits,
.education-agileinfo,
.stats-w3layouts,
.expert-agile,
.experience-w3layouts,
.services-w3-agile,
.contact-w3l {
padding: 20px 0;
}
.banner_bottom_left-w3ls
{
margin-right: 20px;
}
/* 设置 .banner_bottom_left-w3ls 内部 h4 元素的字体大小为 2.2em，颜色为 #262c38 (一种深蓝色)，字母间距为 2px，底部外边距为 20px */
.banner_bottom_left-w3ls h4 {
font-size: 2.2em;
color: #262c38;
letter-spacing: 2px;
margin-bottom: 20px;
}
/* 设置 .banner_bottom_left-w3ls 内部 p 元素的文字颜色为 #666 (一种灰色)，行高为 2em，底部外边距为 1em */
.banner_bottom_left-w3ls p {
color: #666;
line-height: 2em;
margin-bottom: 1em;
}
/* 设置 .banner_bottom_left-w3ls 内部第三个 p 元素的底部外边距为 0 */
.banner_bottom_left-w3ls p:nth-child(3) {
margin-bottom: 0;
}
/* 为 .banner_bottom_right-w3l 设置内边距为上下 20px，左右 50px，并添加各种浏览器兼容的阴影效果 */
.banner_bottom_right-w3l {
padding: 20px 50px;
margin-top: 20px; /* 上边距 */
margin-bottom: 30px; /* 下边距 */
/*margin-left: 500px;*/
/*margin-right: 50px;*/
box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
-webkit-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
-moz-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
-o-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
}
/* 设置 ul.some_facts 内部 li 元素的样式：无列表符号，上下外边距为 15px，文字颜色为 #444 (一种深灰色)，字体大小为 1.1em，字母间距为 1px */
ul.some_facts li {
list-style: none;
margin: 15px 0;
color: #444;
font-size: 1.1em;
letter-spacing: 1px;
}
/* 设置 ul.some_facts 内部 span.fa 元素的样式：颜色为 #ff304f (一种红色)，宽度和高度均为 60px，背景色为白色，文本居中对齐，行高为 57px，
右侧外边距为 30px，边框为 1px 黑色实线，并添加各种浏览器兼容的阴影效果 */
ul.some_facts span.fa {
width: 60px;
font-size: 21px;
height: 60px;
background: #fff;
text-align: center;
line-height: 57px;
margin-right: 30px;
border: 1px solid #000;
box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
-webkit-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
-moz-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
-o-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
}
/* 设置 ul.some_facts 内部 label 元素的字体大小为 1.6em，颜色为黑色，右侧外边距为 12px */
ul.some_facts label {
font-size: 1.6em;
color: #000;
margin-right: 12px;
}
/* 设置 .stats-w3layouts 的背景图像为 ../images/bg.jpg，不重复显示，图像位置为中心，固定定位，背景图像覆盖整个容器 */
.stats-w3layouts {
background: url(../images/bg.jpg)no-repeat center fixed;
background-size: cover;
text-align: center;
}
/* 设置 .stats-grid-w3-agile 的上下外边距为各 4em */
.stats-grid-w3-agile {
margin: 10em 0;
}
/* 为类名为 .stats-info 下的 p 元素设置颜色为 #e6e6e6，字母间距为 3px，字体大小为 20px，以及字体权重为 300 */
.stats-info p {
color: #e6e6e6;
letter-spacing: 3px;
font-size: 20px;
font-weight: 300;
}
/* 为类名为 .right1-w3ls 和 .left1-w3ls 下的 h3 元素设置颜色为 #000，文本转换为大写，下外边距为 .5em，字体大小为 21px，以及字母间距为 1px */
.right1-w3ls h3, .left1-w3ls h3 {
color: #000;
text-transform: uppercase;
margin-bottom: .5em;
font-size: 21px;
letter-spacing: 1px;
}
/* 为类名为 .right1-w3ls 和 .left1-w3ls 下的 p 元素设置字体大小为 15px，字母间距为 .5px，以及颜色为 #909090 */
.right1-w3ls p, .left1-w3ls p {
font-size: 15px;
letter-spacing: .5px;
color: #909090;
}
/* 为类名为 .right1-w3ls 的元素设置下外边距为 3em，左文字安全下边距 */
.right1-w3ls {
margin-bottom: 3em;
}
/* 为类名为 .left1-w3ls 的元素设置下外边距为 7em，文本右对齐，右内边距为 4em，以及相对定位，右文字下边距 */
.left1-w3ls {
margin-bottom: 3em;
text-align: right;
padding-right: 4em;
position: relative;
}
/* 为类名为 .left1-w3ls 下的 span 元素设置绝对定位，位置在父元素的右侧 -11% 和顶部 -4%，字体大小为 38px，以及颜色为 #ff304f */
.left1-w3ls span {
position: absolute;
right: -11%;
top: -4%;
font-size: 38px;
color: #ff304f;
}
/* 为类名为 .left1-w3ls 的第四个子元素设置下外边距为 0em */
.left1-w3ls:nth-child(4) {
margin-bottom: 0em;
}
/* 为类名为 .right1-w3ls 的第四个子元素设置下外边距为 0em */
.right1-w3ls:nth-child(4) {
margin-bottom: 0em;
}
/* 为类名为 .eduright-agileinfo 的元素设置左内边距为 5em */
.eduright-agileinfo {
padding-left: 5em;
}
/* 为类名为 .eduleft-agileinfo 的元素设置右侧一个半透明的黑色边框 */
.eduleft-agileinfo {
border-right: 1px solid rgba(8, 8, 8, 0.25);
}
/* 为类名为 .left1-w3ls 下的 h3 元素设置颜色为 #0ecff7 */
.left1-w3ls h3 {
color: #0ecff7;
}
/* 为类名为 .eduleft-agileinfo 和 .eduright-agileinfo 的元素设置上外边距为 1.5em */
.eduleft-agileinfo, .eduright-agileinfo {
margin-top: 1.5em;
}
/* 为类名为 .expert-agile 的元素设置背景颜色为 #0ecff7 */
.expert-agile {
background: #0ecff7;
}
/* 为类名为 .expert-agile 下的 h3.tittle-w3ls span 元素设置颜色为 #fff */
.expert-agile h3.tittle-w3ls span {
color: #fff;
}
/* 为类名为 .w3-agileits-services-w3-agile-grids 的元素设置上外边距为 4em */
.w3-agileits-services-w3-agile-grids {
margin: 4em 0 0 0;
}
/* 为类名为 .services-w3-agile-right-grid 的元素设置文本居中对齐 */
.services-w3-agile-right-grid {
text-align: center;
}
/* 为#toTop元素设置样式，这是一个返回顶部的按钮 */
#toTop {
display: none; /* 默认不显示 */
text-decoration: none; /* 移除下划线 */
position: fixed; /* 固定定位 */
bottom: 24px; /* 距离底部24px */
right: 1%; /* 距离右侧1% */
overflow: hidden; /* 溢出隐藏 */
z-index: 999; /* 设置较高的层叠顺序，确保按钮在其他元素之上 */
width: 64px; /* 宽度为64px */
height: 64px; /* 高度为64px */
border: none; /* 无边框 */
text-indent: 100%; /* 文本缩进，使文字不可见 */
background: url("../images/move-up.png") no-repeat 0px 0px; /* 设置背景图片，不重复显示 */
}
/* 为#toTopHover元素设置样式，这是#toTop的悬停状态 */
#toTopHover {
width: 64px; /* 宽度为64px */
height: 64px; /* 高度为64px */
display: block; /* 块级显示 */
overflow: hidden; /* 溢出隐藏 */
float: right; /* 右浮动 */
opacity: 0; /* 透明度为0，默认不可见 */
-moz-opacity: 0; /* 针对Mozilla浏览器的透明度设置 */
filter: alpha(opacity=0); /* 针对IE浏览器的透明度滤镜 */
}
/* 当屏幕宽度小于或等于1280px时，应用以下样式 */
@media(max-width: 1280px){
.banner-left-wthree h2 {
font-size: 50px; /* 设置字体大小为50px */
height: 35px; /* 设置元素高度为35px，这可能导致内容溢出或截断，通常不建议为文本元素设置固定高度 */
}
.banner-w3l {
margin-top: 1px; /* 设置上边距为1px */
}
}
/* 对所有元素应用以下样式 */
* {
-webkit-box-sizing: border-box; /* 设置元素的box-sizing属性为border-box，以便padding和border包含在元素的总宽度和高度中 */
}
/* 对具有类img-responsive的元素应用以下样式 */
.img-responsive {
max-width: 100%; /* 设置最大宽度为其父容器宽度的100%，用于响应式图片 */
}
/* 对h1, h2, h6元素应用以下通用样式 */
h1, h2, h6 {
font-family: inherit; /* 继承父元素的字体家族 */
font-weight: 500; /* 设置字体粗细为500 */
line-height: 1; /* 设置行高为1，意味着字体高度和行高相同 */
color: inherit; /* 继承父元素的颜色 */
}
/* 对h1和h2元素应用以下通用样式 */
h1, h2 {
margin-top: 20px; /* 设置上边距为20px */
margin-bottom: 10px; /* 设置下边距为10px */
}
/* 对具有类container的元素应用以下样式 */
.container {
padding-right: 55px; /* 设置右内边距为55px */
padding-left: 55px; /* 设置左内边距为55px */
}
/* 对具有类col-xs-4和col-xs-8的元素应用以下通用样式 */
.col-xs-4, .col-xs-8 {
float: left; /* 设置元素浮动到左侧 */
}
/* 对具有类col-xs-8的元素应用以下样式 */
.col-xs-8 {
width: 60.66666667%; /* 设置元素宽度为其父容器宽度的66.66666667% */
}
/* 对具有类col-xs-4的元素应用以下样式 */
.col-xs-4 {
width: 33.33333333%; /* 设置元素宽度为其父容器宽度的33.33333333% */
}
/* 当屏幕宽度大于或等于992px时，应用以下样式 */
@media (min-width: 992px) {
.col-md-6 {
float: right; /* 设置元素浮动到左侧 */
/*width: 50%; !* 设置元素宽度为其父容器宽度的50% *!*/
}
}
.welcome-sub-agileits {
display: flex; /* 使用Flexbox布局 */
justify-content: space-between; /* 在子元素之间添加空间 */
align-items: center; /* 垂直居中子元素（可选） */
/* 如果需要，可以添加一个额外的内边距或外边距来调整整体间距 */
padding: 0 15px; /* 例如，左右各15px的内边距 */
}
.banner_bottom_left-w3ls,
.banner_bottom_right-w3l {
/* 设置子容器的宽度，确保它们的总和不超过父容器的宽度 */
flex: 0 0 auto; /* 防止子容器在必要时换行 */
width: calc(50% - 15px); /* 假设你想要它们各占50%的宽度，并减去一些间距 */
/* 你可以根据需要调整宽度和间距 */
}
/* 当屏幕宽度大于或等于768px时，应用以下样式 */
@media (min-width: 768px) {
.navbar-header {
float: left; /* 设置元素浮动到左侧 */
}
}
/* 对具有类container的元素后的伪元素:after应用以下样式，用于清除浮动 */
.container:after,
.navbar-collapse:before { /* 对具有类navbar-collapse的元素前的伪元素:before应用以下样式（此处只定义了:before，但未使用） */
display: table; /* 使元素以块级表格显示，用于清除浮动 */
content: " "; /* 设置内容为空格 */
}
/* 对具有类container的元素后的伪元素:after应用以下样式，进一步清除浮动 */
.container:after {
clear: both; /* 清除元素前后的浮动 */
}
/* 导航栏样式 */
/* 设置.top-nav类的样式，用于顶部导航栏 */
.top-nav {
background: #333; /* 背景颜色设置为#333（深灰色） */
padding: 1em 0; /* 上下内边距为1em，左右为0 */
}
/* 设置标题的样式 */
.navbar-header h1{
color: #298ee7; /* 设置文字颜色为白色 */
font-size: 2.5em; /* 设置字体大小为1.5倍于当前字体大小 */
}
/* 设置.nav下的li中的a标签的样式 */
.nav li a {
color: #fff; /* 设置文字颜色为白色 */
padding: 0.5em 1em; /* 设置内边距，上下为0.5em，左右为1em */
text-decoration: none; /* 去掉下划线装饰 */
display: inline-block; /* 设置元素为行内块，使其能在一行显示同时可以设置宽高 */
transition: 0.3s; /* 设置过渡效果，持续时间为0.3秒，用于鼠标悬停等交互效果 */
}
/* 设置.nav下的li中的a标签在鼠标悬停或处于活动状态时的样式 */
.nav li a:hover, .nav li a.active {
background: #73f16f; /* 设置背景颜色为#007BFF（一种蓝色） */
border-radius: 5px; /* 设置圆角半径为5像素，使背景呈现圆角效果 */
}
/* Banner区域样式 */
/* 设置.banner-w3l类的样式，通常用于页面顶部的横幅区域 */
.banner-w3l {
background-size: cover; /* 设置背景图片大小覆盖整个元素，保持比例 */
padding: 6em 0; /* 设置上下内边距为6em，左右为0 */
color: #fff; /* 设置文字颜色为白色 */
text-align: center; /* 设置文本居中对齐 */
}
/* 设置.banner-left-agile下的img标签的样式 */
.banner-left-agile img {
width: 200px; /* 设置图片宽度为200像素 */
height: 200px; /* 设置图片高度为200像素 */
border-radius: 50%; /* 设置圆角半径为50%，使图片呈现圆形 */
}
.banner-left-agile img.animated-img {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
left: 100px; /* 初始位置左移100px（根据需要调整） */
top: -300px; /* 初始位置在顶部之上（根据动画需求调整） */
/* 应用三个动画，每个动画在前一个完成后开始 */
animation: slideDownBounce 3.5s forwards,
shrinkAndMove 1.2s forwards 1.5s,
rotate 3s linear infinite 4.7s;
}
@keyframes slideDownBounce {
0% {
top: -300px; /* 初始位置 */
opacity: 0;
transform: scale(3); /* 初始时放大3倍（这里您之前写的是1.5倍，但注释写的是放大1.5倍，我根据代码实际值写了3倍） */
}
50% {
top: 0; /* 滑动到目标位置 */
opacity: 1;
transform: translateY(-20px) scale(1.1); /* 弹跳效果 */
}
70% {
transform: translateY(0); /* 回到正常位置 */
}
100% {
top: 0; /* 保持在目标位置 */
transform: scale(1.1); /* 稍微放大一点 */
}
}
@keyframes shrinkAndMove {
0% {
transform: scale(1.1); /* 继承上一个动画的结束状态 */
left: 100px; /* 初始左移位置 */
}
100% {
transform: scale(1); /* 缩小到原始大小 */
left: 0; /* 移动到最终位置 */
}
}
@keyframes rotate {
from {
transform: rotate(0deg); /* 从稍微放大的状态开始，并设置初始角度为0度 */
}
to {
transform: rotate(360deg); /* 结束角度为360度，即旋转一圈 */
}
}
/* 设置.banner-left-wthree下的h2标签的样式 */
.banner-left-wthree h2 {
font-size: 2.5em; /* 设置字体大小为2.5倍于当前字体大小 */
margin: 1em 0 0em; /* 设置外边距，上为1em，右左为0，下为0.5em */
}
.popEffect span {
display: block; /* 将span元素设置为块级元素，使其独占一行 */
font-size: 1.5em; /* 字体大小设置为1em（相对于父元素的字体大小） */
margin: 0.3em 0; /* 上下边距设置为0.3em，左右边距为0 */
color: #bb00ff; /* 字体颜色设置为 */
transition: 1s; /* 设置所有可动画属性的过渡效果为1秒 */
}
/*按钮初始*/
.wthree-btn {
display: inline-block; /* 将元素设置为行内块级元素，既可以在行内显示又可以设置宽高 */
padding: 0.7em 2em; /* 内边距设置为上下0.7em，左右2em */
color: #fff; /* 字体颜色设置为白色 */
background: #0d131a; /* 背景颜色设置为#007BFF（一种蓝色） */
text-transform: uppercase; /* 文本转换为大写 */
border: none; /* 去掉元素的边框 */
position: relative; /* 设置元素为相对定位，以便子元素可以使用绝对定位相对于它进行定位 */
overflow: hidden; /* 隐藏超出元素边界的内容 */
z-index: 1; /* 设置元素的层叠顺序为1，确保它位于其他z-index较低的元素之上 */
transition: 0.3s; /* 设置所有可动画属性的过渡效果为0.3秒 */
}
.wthree-btn:hover {
background: #054b93; /* 当鼠标悬停在按钮上时，背景颜色变为#0056b3（一种较深的蓝色） */
}
.wthree-btn:hover span {
left: 0; /* 当鼠标悬停在按钮上时，将span的位置设置为左侧0%，使其滑入视图 */
}
/* 对具有类left1-w3ls和right1-w3ls下的p元素应用以下样式 */
.left1-w3ls p{
font-size: 1em; /* 设置字体大小为1em */
color: #777; /* 设置文本颜色为#777（灰色调） */
line-height: 2em; /* 设置行高为1.8em */
}
.right1-w3ls p
{
font-size: 1em; /* 设置字体大小为1em */
color: #777; /* 设置文本颜色为#777（灰色调） */
line-height: 2em;
}
/* 对具有类gallery-agile的元素应用以下样式 */
.gallery-agile {
padding: 20px 0; /* 设置上下内边距为4em，左右内边距为0 */
background: #f5f5f5; /* 设置背景颜色为#f5f5f5（浅灰色调） */
}
/* 对具有类gallery-agile-grids的元素应用以下样式 */
.gallery-agile-grids {
padding: 0.5em; /* 设置四个方向的内边距均为0.5em */
}
/* 对具有类portfolio-hover下的img元素应用以下样式 */
.portfolio-hover img {
width: 100%; /* 设置图片宽度为父元素宽度的100% */
transition: 0.3s; /* 设置过渡效果持续时间为0.3秒 */
}
/* 对具有类portfolio-hover下的img元素在悬停状态时应用以下样式 */
.portfolio-hover img:hover {
transform: scale(1.1); /* 悬停时放大图片至原尺寸的1.1倍 */
}
/* Footer（页脚） */
/* 对具有类footer-bot-wthree的元素应用以下样式 */
.footer-bot-wthree {
padding: 2em 0; /* 设置上下内边距为2em，左右内边距为0 */
background: #333; /* 设置背景颜色为#333（深灰色调） */
text-align: center; /* 设置文本居中对齐 */
color: #fff; /* 设置文本颜色为#fff（白色） */
}
/* 对具有类copy-right-agile下的a元素应用以下样式 */
.copy-right-agile a {
color: #007BFF; /* 设置链接颜色为#007BFF（蓝色） */
text-decoration: none; /* 移除链接的下划线 */
transition: 0.3s; /* 设置过渡效果持续时间为0.3秒 */
}
/* 对具有类copy-right-agile下的a元素在悬停状态时应用以下样式 */
.copy-right-agile a:hover {
color: #FF6347; /* 悬停时改变链接颜色为#FF6347（橙色） */
}
/* 对具有类scroll的元素应用以下样式 */
.scroll {
cursor: pointer; /* 设置鼠标悬停时的光标样式为指针 */
}好啦~源码中的两个JS文件只需在官网下载即可，里面只用到了三张图片，大家自己配置一下即可
注意：本篇文章所用代码为温轻舟原创，只可用于学习，禁止进行商业用途