css淡入淡出效果

一、效果二、代码一、效果二、代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css淡入淡出效果</title><style>.fadenum1{background-color: green;width: 150px;height: 150px;a

夏已微凉、

12628人浏览 · 2022-02-01 18:25:29

夏已微凉、 · 2022-02-01 18:25:29 发布

一、效果
二、代码

一、效果

在这里插入图片描述

二、代码

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