按钮显示箭头过度动画transition

最新推荐文章于 2024-04-18 19:11:54 发布

干了这碗小米汤儿

最新推荐文章于 2024-04-18 19:11:54 发布

阅读量660

点赞数

CC 4.0 BY-SA版权

分类专栏： js h5 文章标签： transition

本文链接：https://blog.youkuaiyun.com/MtangEr/article/details/103609856

js 同时被 2 个专栏收录

15 篇文章

订阅专栏

8 篇文章

订阅专栏

本文介绍了一种按钮上的文字和箭头动画过渡效果的实现方法。当鼠标悬停在按钮上时，文字会向左滑动，同时右侧箭头从右向左滑出；当鼠标离开时，文字和箭头会恢复原状。通过CSS样式和过渡属性完成这一动画效果。

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

按钮效果在这里插入图片描述
当鼠标悬停按钮上时，文字向左滑动，并且在右侧箭头从右向左滑出当鼠标再次离开按钮时，文字向右滑动回原位置，并且右侧滑出箭头向右隐藏

附上过渡效果代码

<head>
	    <meta charset="UTF-8">
	    <title>按钮显示箭头动画transition过度</title>
	    <style>
	        .button{
	            border:none;
	            background-color:red;
	            color:white;
	            padding:15px 20px;
	            font-size:15px;
	            cursor:pointer;
	            border-radius:5px;
	            width:150px;
	         }
	        .button span{
	           position: relative;
	           display: inline-block;
	           transition: .5s;
	         }
	       .button span::after{
	           content: "»";
	           opacity:0;
	           right:-20px;
	           position: absolute;
	           transition: .5s;
	         }
	       .button:hover span{
	           padding-right: 25px;
	        }
	       .button:hover span:after{
	           opacity: 1;
	           right: 0;
	        }
	    </style>
	</head>
	<body>
	    <button class="button"><span>我是按钮</span></button>
	</body>