已解决
CSS 经典使用场景
来自网友在路上 147847提问 提问时间：2023-10-08 20:46:52阅读次数： 47
最佳答案 问答题库478位专家为你答疑解惑
CSS 经典使用场景
- 要滚动的页面，滚动条不占据空间，当我们把鼠标悬浮在滚动页面上面的时候，滚动条出现。
- 一段可滚动的文字
要滚动的页面，滚动条不占据空间，当我们把鼠标悬浮在滚动页面上面的时候，滚动条出现。
<style>.box {width: 350px;overflow: hidden; /* 父元素hidden */height: 650px;box-shadow: 0 0 5px rgba(93, 96, 93, 0.5);}.box:hover {overflow: overlay; /* 当hover效果的时候，滚动条出现 */}.box .item {width: 300px;height: 200px;}img {width: 100%;height: 100%;}</style><div class="box"><div class="item"><img src="https://n.sinaimg.cn/sinacn20119/548/w1322h826/20190408/3862-hvhrcxn2259616.jpg" alt=""></div><div class="item"><img src="https://n.sinaimg.cn/sinacn20119/548/w1322h826/20190408/3862-hvhrcxn2259616.jpg" alt=""></div><div class="item"><img src="https://n.sinaimg.cn/sinacn20119/548/w1322h826/20190408/3862-hvhrcxn2259616.jpg" alt=""></div><div class="item"><img src="https://n.sinaimg.cn/sinacn20119/548/w1322h826/20190408/3862-hvhrcxn2259616.jpg" alt=""></div></div>谷歌版本高的浏览器，会把overflow: overlay;当成overflow: auto;用
比较好的解决方法是：el-scrollbar组件。这个自带上面的效果
一段可滚动的文字
其实非常简单，就是给文字的div加一个动画。让整体向左或者右移动。
<!doctype html>
<html>
<head>
<title>LOOP</title>
<style>
@keyframes loop { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); }
} .box { white-space: nowrap;
} .scrollDiv { width: 600px; display: inline-block; text-align: center; animation: loop 2s linear infinite;
}
</style>
</head>
<body>
<div class="box"> <div class="scrollDiv"> 这是一段可以滚动的文本 </div>
</div>
</body> </html> 查看全文
99%的人还看了
相似问题
猜你感兴趣
版权申明
本文"CSS 经典使用场景"：http://eshow365.cn/6-17422-0.html 内容来自互联网，请自行判断内容的正确性。如有侵权请联系我们，立即删除！