按钮动画

最新推荐文章于 2021-12-10 22:40:43 发布

原创最新推荐文章于 2021-12-10 22:40:43 发布 · 411 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#按钮

css3 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的HTML页面实现CSS过渡效果的方法，并通过一个按钮的悬停动画展示了如何使用CSS属性来创建平滑的过渡动画效果。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Home</title>
	
	<script src="http://og9n58fei.bkt.clouddn.com/jquery-2.2.4.min.js"></script>
</head>
<style>
body a {
transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
-moz-transition: 0.5s all ease; 
-o-transition: 0.5s all ease; 
-ms-transition: 0.5s all ease;
}

a{border: 2px solid #05a6b3;
    font-size: 15px;
    font-weight: 400;
    color: #05a6b3;
    padding: 5px 18px;
    font-family: 'Play-Regular';text-decoration:none;	
}
	
.hvr-shutter-out-horizontal {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
.hvr-shutter-out-horizontal:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #05a6b3;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active {
	color: white;
}
.hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}
</style>

<body>
<a href="#" class="hvr-shutter-out-horizontal">Read More</a>	
	
</body>
</html>