CSS(div滚动条优化/流光按钮)

最新推荐文章于 2024-06-03 16:33:41 发布

飞鸿w

最新推荐文章于 2024-06-03 16:33:41 发布

阅读量995

点赞数

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

本文链接：https://blog.csdn.net/qq_41558265/article/details/106025287

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

滚动条优化

//让div拥有滚动条
div{
    overflow-y:scroll;
}
//设置滚动条整体样式
::webkit-scrollbar{
    width:10px;
	height: 10px;
	background-color: rgba(0,0,0,.3);
}
//设置滚动条内小方块的样式
::webkit-scrollbar-thumb{
    width:10px;
	border-radius:10px;
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	background-color: black;
}
//设置滚动条内轨道的样式
::webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	border-radius: 10px;
	background: #EDEDED;
}

效果如下：

流光按钮

效果：鼠标悬停在btn上会有流光效果。

纯css实现，思路：

1：为btn设置渐变，background-size属性（此属性的目的是放大背景，否则我们设置了几种渐变色会全部显示在btn上）。

2：设置鼠标悬停动画，animations属性，指定动画，持续时间等。动画设置属性background-position（此属性的目的是改变背景定位位置，配合动画造成流光效果）

3：为btn添加before伪类，伪类的目的是给btn增加模糊的流光边框效果，使得btn看上去不那么突兀。主要属性filter：blur(8px)

4：添加伪类后设置z-index属性控制层级，伪类在下btn在上，此时悬停会发现btn边框效果没有流光。与btn一样为其增加hover悬停动画。

		.btn-box{
			width: 100vw;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btn{
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			width: 200px;
			height: 50px;
			border-radius: 25px;
			background: linear-gradient(90deg,#03a9f4,#f551a5,#ffeb3b,#03a9f4);
			background-size: 400%;
			cursor: pointer;
			position: relative;
			z-index: 10;
		}
		.btn:hover{
			animation: sun 8s infinite;
		}
		.btn::before{
			content: "";
			position:absolute;
			top: -5px;
			left: -5px;
			bottom: -5px;
			right:-5px;
			background: linear-gradient(90deg,#03a9f4,#f551a5,#ffeb3b,#03a9f4);
			background-size: 400%;
			border-radius: 25px;
			filter: blur(8px);
			z-index: -1;
		}
		.btn:hover::before{
			animation: sun 8s infinite;
		}
		/* c3动画更改背景位置 */
		@keyframes sun{
			100%{
				background-position: -400% 0;
			}
		}
		@-ms-keyframes sun{
			100%{
				background-position: -400% 0;
			}
		}
		@-webkit-keyframes sun{
			100%{
				background-position: -400% 0;
			}
		}
	</style>
</head>
<body>
	<div class="btn-box">
		<div class="btn">流光按钮</div>
	</div>
</body>

飞鸿w

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS(div滚动条优化/流光按钮)

滚动条优化//让div拥有滚动条div{ overflow-y:scroll;}//设置滚动条整体样式::webkit-scrollbar{ width:10px; height: 10px; background-color: rgba(0,0,0,.3);}//设置滚动条内小方块的样式::webkit-scrollbar-thumb{ width:10px; border-radius:10px; -webkit-box-shadow: inset 0
复制链接

扫一扫

专栏目录