欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

按钮显示箭头过度动画transition

程序员文章站 2024-03-24 22:56:58
...

按钮效果按钮显示箭头过度动画transition
当鼠标悬停按钮上时，文字向左滑动，并且在右侧箭头从右向左滑出按钮显示箭头过度动画transition当鼠标再次离开按钮时，文字向右滑动回原位置，并且右侧滑出箭头向右隐藏
按钮显示箭头过度动画transition

附上过渡效果代码

<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>
相关标签： transition 过渡 transition

上一篇： MATLAB实践 - 让计算机去玩24点

下一篇：

推荐阅读