You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
173 lines
3.2 KiB
173 lines
3.2 KiB
/**
|
|
* Smooth Scroll Styles
|
|
* 平滑滚动相关样式
|
|
*
|
|
* @package Nenghui Energy Theme
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
/* 回到顶部按钮样式 */
|
|
.back-to-top {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
right: 30px;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: linear-gradient(135deg, #0066cc, #004499);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(20px);
|
|
z-index: 1000;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.back-to-top:hover {
|
|
background: linear-gradient(135deg, #004499, #0066cc);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.back-to-top:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
|
|
}
|
|
|
|
.back-to-top.visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.back-to-top svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* 平滑滚动优化 */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* 为支持平滑滚动的浏览器提供更好的体验 */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* 优化滚动性能 */
|
|
* {
|
|
scroll-behavior: inherit;
|
|
}
|
|
}
|
|
|
|
/* 为偏好减少动画的用户禁用平滑滚动 */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
.back-to-top {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
/* 移动端适配 */
|
|
@media (max-width: 768px) {
|
|
.back-to-top {
|
|
bottom: 20px;
|
|
right: 20px;
|
|
width: 45px;
|
|
height: 45px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.back-to-top i {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
/* 小屏幕设备 */
|
|
@media (max-width: 480px) {
|
|
.back-to-top {
|
|
bottom: 15px;
|
|
right: 15px;
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.back-to-top i {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
/* 滚动条样式优化 */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(135deg, #0066cc, #004499);
|
|
border-radius: 4px;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(135deg, #004499, #0066cc);
|
|
}
|
|
|
|
/* Firefox滚动条样式 */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #0066cc #f1f1f1;
|
|
}
|
|
|
|
/* 页面滚动时的视觉反馈 */
|
|
.scroll-indicator {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, #0066cc, #004499);
|
|
z-index: 9999;
|
|
transition: width 0.1s ease;
|
|
}
|
|
|
|
/* 锚点链接悬停效果 */
|
|
a[href^="#"]:hover {
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
/* 平滑滚动时的页面优化 */
|
|
body.smooth-scrolling {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* 确保所有可滚动元素都有平滑滚动 */
|
|
.scrollable {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* 滚动容器优化 */
|
|
.scroll-container {
|
|
scroll-behavior: smooth;
|
|
-webkit-overflow-scrolling: touch;
|
|
} |