css淡入淡出效果

一、效果

css淡入淡出效果

二、代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>css淡入淡出效果</title>

<style>

.fadenum1{
	background-color: green;
	width: 150px;
	height: 150px;
	animation:fadenum12 5s 1;
}

@keyframes fadenum12{
   0%{opacity: 1;}
   10%{opacity: 0.8;}
   100%{opacity: 0;}
}

.showDiv{
	background-color: blue;
	width: 150px;
	height: 150px;
	animation:showDivAni 5s 1;
}

@keyframes showDivAni{
	0%{opacity:0;}
	100%{opacity: 1;}
	
}

</style>

</head>

<body>

<div class="fadenum1"></div>

<div class="showDiv"></div>

</body>

</html>
上一篇:【css】响应式 Web 设计


下一篇:CSS制作网页布局