CSS按钮动画(三)

最新推荐文章于 2024-06-01 17:33:11 发布

卡卡西Sensei

最新推荐文章于 2024-06-01 17:33:11 发布

阅读量1.2k

点赞数

分类专栏： web前端 # CSS 文章标签： CSS动画 CSS按钮动画

本文链接：https://blog.csdn.net/zjpjay/article/details/112319188

版权

web前端同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 1 订阅

订阅专栏

在前端的开发中，我们都会用到很多种动画，按钮动画就是最基础和最简单的一种了。

例如像下面这种按钮的动画效果该怎么实现呢？

简单分析一下，无非就是，鼠标移入和移出的时候，改变下白色的一个“遮罩”的宽度和透明度的问题

废话就不多说，咱们直接上代码，干就完了！！！

html代码

<body>
		<div class="abc">
			<div>
				<button class="btn btn-1 btn-1d">hello world</button>
			</div>
		</div>
</body>

css样式代码

.btn-1d:after {
			    width: 0;
			    height: 100%;
			    top: 50%;
			    left: 50%;
			    background: #fff;
			    opacity: 0;
			    transform: translateX(-50%) translateY(-50%);
			}
			.btn-1d {
			    overflow: hidden;
			}
			.btn-1d:hover::after {
				 width: 100%;
				 opacity: 1.0;
			}

其他样式(class="btn btn-1")就不再赘述了，参考

CSS按钮动画(二)

CSS按钮动画(一)

是不是非常的简单，毫无技术难度，非常人性化，哈哈😁，赶紧自己动手试一试吧！！！

卡卡西Sensei

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS按钮动画(三)

在前端的开发中，我们都会用到很多种动画，按钮动画就是最基础和最简单的一种了。例如像下面这种按钮的动画效果该怎么实现呢？简单分析一下，无非就是，鼠标移入和移出的时候，改变下白色的一个“遮罩”的宽度和透明度的问题废话就不多说，咱们直接上代码，干就完了！！！html代码<body> <div class="abc"> <div> <button class="btn btn-1 btn-1d">hello ...
复制链接

扫一扫