HTML div动画

最新推荐文章于 2023-09-25 22:54:41 发布

潜水断桥

最新推荐文章于 2023-09-25 22:54:41 发布

阅读量928

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_37454196/article/details/78656492

版权

本文介绍了如何在HTML中使用CSS实现div元素的动画效果，包括鼠标悬停时的交互变化，通过实例展示了基本的动画技巧和实现方法。

摘要由CSDN通过智能技术生成

没动作

鼠标放上去

<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.div01 {
				width: 882px;
				height: 86px;
				background-color: brown;
				margin: 0 auto;
				padding: 0px;
				position: absolute;
				overflow: hidden;
				border: 3px solid red;
			}
			
			li {
				float: left;
				font-size: 0;
				/*margin: 0px;
				padding: 0px;*/
			}
			
			ul {
				width: 1764px;
				height: 86px;
				margin: 0px;
				padding: 0px;
				background: red;
				list-style: none;
				position: absolute;
				left: 0;
			}
			
			.div01:hover ul {
				left: -126px;
			}
		</style>
	</head>

	<body>

		<div class="div01">
			<ul>
				<li><img src="img/1.jpg" style="float:lef