scrollTop与offsetTop解决小分辨率区域块向上滚动效果效果，结合animation与@keyframes实现标题左右闪动更换颜色效果。
在CSS中，scrollTop和offsetTop是两个常用于处理滚动条位置的属性。scrollTop表示元素的滚动条垂直方向上的偏移量，而offsetTop表示元素的顶部边缘距离其定位容器（定位祖先元素）顶部的距离。
如果你想要在小分辨率的屏幕上实现区块向上滚动的效果，并且结合CSS动画（animation）和关键帧（@keyframes），你可以设置一个固定的动画，当屏幕尺寸变化时，通过监听resize事件调整区块的位置。
以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Top and Offset Top Example</title>
<style>
.box {
width: 100%;
height: 200px;
position: relative;
background-color: skyblue;
animation: scroll-top 5s infinite alternate;
}
@keyframes scroll-top {
from {
transform: translateY(0);
}
to {
transform: translateY(-100px);
}
}
</style>
</head>
<body>
<div class="box"></div>
<script>
window.addEventListener('resize', function() {
let box = document.querySelector('.box');
// 根据屏幕大小调整动画的偏移量
let offset = window.innerHeight > 600 ? 100 : 50;
box.style.animation = `scroll-top ${5 / (window.innerHeight / 600)}s infinite alternate`;
});
</script>
</body>
</html>在这个例子中，.box元素初始化时会有一个向上移动的动画。通过监听窗口的resize事件，我们可以在屏幕尺寸变化时根据屏幕的高度来调整动画的时长和偏移量，从而模拟出在不同分辨率下的滚动效果。这里的5s是原始动画时间，通过屏幕高度的比例来计算新的动画时间。
评论已关闭