20 HTML动画、过渡实例

最新推荐文章于 2025-12-01 06:10:14 发布

原创最新推荐文章于 2025-12-01 06:10:14 发布 · 345 阅读

0 ·

CC 4.0 BY-SA版权

HTML5+CSS+JS 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了20个使用HTML5和CSS3实现的精彩动画和过渡效果实例，涵盖了页面元素滑动、旋转、淡入淡出等多种交互体验，帮助开发者提升网页动态视觉效果。

<html>
<head>
	<meta charset='utf-8'>
	<title>case</title>
	<style type='text/css'>
		.div{
			text-align:center
		}
		.img{
			margin-top:100px;
			width:200px;
			height:200px
		}
		html:hover .img{
			animation-name:img;
			animation-delay:500ms;
			animation-duration:1s;
			animation-fill-mode:forwards
		}
		@keyframes img{
			to{
			margin-top:0px;
			width:50px;
			height:50px
			}
		}
		p{
			font-family:微软雅黑;
			font-size:30px;
			text-shadow:1px 1px 2px #b0b0b0;
			opacity:1
		}
		html:hover p{
			transition-delay:500ms;
			transition-duration:1s;
			font-family:微软雅黑;
			font-size:10px;
			text-shadow:1px 1px 2px #b0b0b0;
			opacity:0
		}
	</style>
</head>
<body>
<div class='div'>
	<img src='D:\0Files\HTML+CSS+JS\20 bilibili.png' class='img'>
	<p>哔哩哔哩</p>
</div>
</body>
</html>