静态html页面效果

最新推荐文章于 2021-06-04 16:28:29 发布

写代码的贝塔子

最新推荐文章于 2021-06-04 16:28:29 发布

阅读量264

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： html javascript css css3

本文链接：https://blog.youkuaiyun.com/weixin_42556438/article/details/114400803

css 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在HTML页面中实现锚点滑动、返回顶部滑动以及文字滚动的动态效果，通过结合CSS和JavaScript，创建出丰富的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写目录标题

- - 标签做锚点跳转的时候实现滑动效果
  - 返回顶部滑动效果
  - 文字滚动效果，电子屏效果

标签做锚点跳转的时候实现滑动效果

// 给a标签锚点加滑动效果
$("a").click(function () {
	$("html, body").animate({scrollTop: $($(this).attr("href")).offset().top - 60 + "px"}, 500);
	return false;//不要这句会有点卡顿
})

返回顶部滑动效果

// 返回顶部
 $('.back-container').click(function() {
   // document.documentElement.scrollTop = document.body.scrollTop = 0
   var time = setInterval(function () {
     var top = document.documentElement.scrollTop || document.body.scrollTop;
     if (top === 0) {
         clearInterval(time);
     } else {
         window.scrollTo(0, top - 100);
     }
  }, 20)
})

文字滚动效果，电子屏效果

css样式

.animate-box {
  border: 1px solid #f00;
}
.animate {
   padding-left: 20px;
   font-size: 24px;
   color: #000;
   display: inline-block;
   white-space: nowrap;
   animation: 8s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
   0% {
     transform: translateX(200px);
     -webkit-transform: translateX(200px);
   }
   100% {
     transform: translateX(-100%);
     -webkit-transform: translateX(-100%);
   }
}
@-webkit-keyframes wordsLoop {
   0% {
     transform: translateX(200px);
     -webkit-transform: translateX(200px);
   }
   100% {
     transform: translateX(-100%);
     -webkit-transform: translateX(-100%);
   }
}

HTML

<div class="animate-box">
   <p class="animate">
       滚动的内容滚动的内容滚动的内容滚动的内容滚动的内容滚动的内容滚动的内容
   </p>
</div>