数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用 CSS 实现淡入动画效果
我们知道 CSS 为开发者提供了过多的功能。有些只能通过调整现有的功能来实现，而另一些则可以直接实现。例如，不同的动画可以应用于不同的网站元素。其中之一就是 **淡入动画**。
在淡入动画中，当鼠标悬停在某个对象上时，它看起来会变暗。实现此结果的方法有很多种。我们使用此技术来吸引用户对某个特定按钮或图像的注意。我们可以通过调整元素的不透明度来实现这一点。
示例
让我们看看下面的示例，我们将为图像创建淡入动画。
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 50px;
margin: 50px;
}
.tp {
opacity: 40%;
transition: opacity 0.4s;
}
.tp:hover {
opacity: 100%;
transition: opacity 0.4s;
}
</style>
</head>
<body style="background-color:#F4ECF7">
<div class="tp">
<img src="https://tutorialspoint.com/cg/images/logo.png"></img>
</div>
</body>
</html>
当我们运行以上代码时，它将生成一个包含图像的输出，该图像具有较低的不透明度。当用户尝试将鼠标悬停在其上时，它会在网页上显示得更亮。
示例
考虑另一种情况，我们将为文本创建淡入动画。
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
font-family: verdana;
align-items: center;
color: #DE3163;
background-color: #EAFAF1;
}
h2 {
font-size: 100px;
}
.tp {
margin: 60px;
padding: 20px;
}
.x {
opacity: 0;
cursor: pointer;
transition: 0.35s;
}
.x:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="tp">
<h2 class="x">Welcome</h2>
</div>
</body>
</html>
运行以上代码后，输出窗口将弹出，当用户尝试将鼠标悬停在屏幕上时，它将在网页上显示文本。
示例
在下面的示例中，我们将为按钮创建淡入动画。
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 100px;
margin: 100px;
}
.tp {
opacity: 30%;
transition: opacity 0.4s
}
.tp:hover {
opacity: 100%;
transition: opacity 0.4s
}
</style>
</head>
<body style="background-color:#E8DAEF">
<div class="tp">
<button type="button">Click To Submit</button>
</div>
</body>
</html>
运行以上代码后，它将生成一个包含按钮的输出，该按钮具有较低的不透明度。稍后，当用户将鼠标悬停在其上时，它将在网页上显示得更亮。
更新于: 2024年1月8日
451 次浏览
广告