HTML的小动画

HTML平滑动画实践

最新推荐文章于 2024-02-15 09:15:57 发布

原创最新推荐文章于 2024-02-15 09:15:57 发布 · 935 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何使用HTML实现元素属性的平滑动画效果，通过0.4秒内将外边距移动5%，并探讨了其在多属性动画和背景组合应用中的适用性。

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML的小动画</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>

<style>
	* {
		margin: 0;
		padding: 0;
		list-style: none;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	body{
		max-height: 100%;
		max-width: 100%;
		background-color:#EAF5FF;
	}
	.box{
		width: 800px;
		margin: 200px auto;
	}
	.cartoon{
		height: 100px;
		margin:0 auto 10px auto;
		padding-left: 20%;
	}
	.cartoon div{
		height: 80px;
		width: 80px;
		float: left;
		margin-left: 5%;
	}
	.cartoon input{
		height: 65px;
		width: 65px;
		margin-top: 5%;
		border-radius: 10px;
		margin: 9% 0 0 9%;
		-webkit-transition:margin-top 0.4s;
		-webkit-transition-timing-function:linear;
	}
	.cartoon input:hover{
		margin-top: 0%;
		-webkit-transition:margin-top 0.3s;
		-webkit-transition-timing-function:linear;
	}
	
</style>
<body>
	<div class="box">
		<ul class="cartoon">
			<div><input id="input1" type="button" style="background-color: #EF9799;" href="#"></div>
			<div><input id="input2" type="button" style="background-color: #7FA8F0;" href="#"></div>
			<div><input id="input3" type="button" style="background-color: #2FFDFF;" href="#"></div>
			<div><input id="input4" type="button" style="background-color: #F5F7FF;" href="#"></div>
		</ul>
	</div>
</body>
    
</html>

效果图：

对元素属性进行平滑的动画调整，也就是0.4秒让外边距移动5%；
可以用于多个属性，和background的组合写法类似，适合一些简单的动画。
在这里插入图片描述