2020-12-26-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_51900835/article/details/111748341

博客介绍了CSS3和HTML相关的过渡案例以及综合动画内容，聚焦于信息技术领域中前端开发的动画实现，展现了CSS3和HTML在页面动态效果方面的应用。

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

CSS3
过渡的案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>过渡</title>
	<style type="text/css">
  body{
  
    	margin: 100px;
    }
div{

	width: 200px;
	height: 200px;
	border: 1px solid red;
	transition:background-color 2s,color 2s,border 2s,margin-left 2s;
}
div:hover{

	background-color: #888888;
	color: red;
	border: 1px solid green;
	margin-left: 50px;
	animation:myfirst 5s;
}
@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}



	</style>
</head>
<body>
<div>
</div>
</body>
</html>

综合动画：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
body{
	margin:100px; 
}
div{
width: 100px;
height: 100px;
border: 1px solid red;
transition:background-color 2s,color 2s,margin-left 2s,border 2s,transform 2s;

}
div:hover{

margin-left: 100px;
color: blue;
background-color: #ccc;
border: 1px solid green;
transform:rotateX(30deg) rotateY(30deg) translate(100px,100px);
animation:myfirst 5s;
}

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
	</style>
</head>
<body>
	<div>
	2
	</div>
</body>
</html>