首页 > 其他分享> > css淡入淡出效果

css淡入淡出效果

2022-02-01 18:31:33 作者：互联网

一、效果
二、代码

一、效果

在这里插入图片描述

二、代码

<!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>

标签：opacity,效果,淡入淡出,color,keyframes,height,5s,css,150px
来源： https://blog.csdn.net/qq_36025814/article/details/122765306