csss两种动态滚动条的制作方法

最新推荐文章于 2024-05-01 10:04:13 发布

梨树呐

最新推荐文章于 2024-05-01 10:04:13 发布

阅读量459

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/weixin_45249740/article/details/107281877

版权

csss两种多态滚动条的制作方法

方法一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.ab{
				position: relative;
				width: 500px;
				height: 300px;
				background: rgb(44,44,44);
			}
			.cd{
				position: absolute;
				top:120px;
				left:50px;
			    width: 400px;
			    height: 40px;
				background-size: 40px 40px;
			    background-image: linear-gradient(
			          -45deg,
			          rgb(44, 44, 44) 25%,
			          rgb(99, 99,99) 0,
			          rgb(99, 99,99) 50%,
			          rgb(44, 44,44) 0,
			          rgb(44, 44,44) 75%,
			          rgb(99, 99,99) 0);
				box-shadow: #fff 5px 5px 40px;
				border-radius: 10px;
				animation: aaa 10s infinite;
			}
			@keyframes aaa {
			  from {
			    background-position-x: 0px;
			  }
			  to {
			    background-position-x: 600px;
			  }
			}
		</style>
	</head>
	<body>
		<div class="ab">
			<div class="cd"></div>
		</div>
	</body>
</html>

方法二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.ab{
				position: absolute;
				width: 600px;
				height: 300px;
				background: rgb(44,44,44);
			}
			.cd{
				position: relative;
			    width: 400px;
			    height: 40px;
				left:100px;
				top:120px;
				box-shadow: #fff 5px 5px 40px;
				border-radius: 10px;
				overflow: hidden;
			}
			.jdt{
				position: relative;
				top:0;
				left:-100px;
				width: 500px;
				height: 40px;
				animation: aaa 1s infinite linear;
			}
			.jxt{
				width: 15px;
				height: 60px;
				background: rgb(99,99,99);
				position: absolute;
				top:-10px;
				transform: rotate(30deg);
			}
			.a1{left:0;}
			.a2{left:38px;}
			.a3{left:72px;}
			.a4{left:114px;}
			.a5{left:152px;}
			.a6{left:190px;}
			.a7{left:228px;}
			.a8{left:266px;}
			.a9{left:304px;}
			.a10{left:342px;}
			.a11{left:380px;}
			.a12{left:418px;}
			.a13{left:456px;}
			.a14{left:494px;}
			@keyframes aaa {
			  from {left:-100px;}
			  to {left:-65px;}
			}
		</style>
	</head>
	<body>
		<div class="ab">
			<div class="cd">
				<div class="jdt">
						<div class="jxt a1"></div>
						<div class="jxt a2"></div>
						<div class="jxt a3"></div>
						<div class="jxt a4"></div>
						<div class="jxt a5"></div>
						<div class="jxt a6"></div>
						<div class="jxt a7"></div>
						<div class="jxt a8"></div>
						<div class="jxt a9"></div>
						<div class="jxt a10"></div>
						<div class="jxt a11"></div>
						<div class="jxt a12"></div>
						<div class="jxt a13"></div>
						<div class="jxt a14"></div>
				</div>
			</div>
		</div>
	</body>
</html>

梨树呐

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
csss两种动态滚动条的制作方法

csss两种多态滚动条的制作方法方法一：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .ab{ position: relative; width: 500px; height: 300px; background: rgb(44,44,44); }
复制链接

扫一扫