CSS文字上下滚动可以增加网页的动态感,比如用在公告通知或新闻资讯等地方。下面是实现上下滚动的代码示例:
.marquee { height: 50px; /* 滚动框高度 */ overflow: hidden; /* 滚动框超出隐藏 */ position: relative; /* 父级相对定位 */ } .marquee p { position: absolute; /* 绝对定位 */ top: 0; /* 上边距为0 */ left: 0; /* 左边距为0 */ animation: fadein 3s linear infinite; /* 动画持续时间3秒,线性变化,无限重复 */ } @keyframes fadein { 0% { opacity: 0; transform: translateY(-50px); /* 上移50px */ } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(50px); /* 下移50px */ } }
运用这个代码,你可以轻松实现文字的上下滚动。自定义高度、动画时间和滚动内容,使你的网页更具魅力!