CSS如何创建淡入背景动画
作者:admin 时间:2022-8-8 20:41:40 浏览:在前面，已经介绍过图片淡入动画效果，文本淡入动画效果。本文将介绍如何创建淡入背景动画。
CSS允许你设计背景颜色渐变的网页，要实现这一点，需要使用CSS中的animation属性来设置body元素的样式。
例子
假设你正在为本地电子商店创建登录页，要创建一个独特的背景色淡入效果。
假设，你希望在五秒钟内将背景色从灰色转换为橙色，并且是循环进行。
以下是如何在CSS中实现此功能：
body
{
background: grey;
animation: fadebackground 5s infinite;
}
@keyframes fadebackground
{
from
{
background-color: grey;
}
to
{
background-color: orange;
}
}
完整HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body
{
background: grey;
animation: fadebackground 5s infinite;
}
@keyframes fadebackground
{
from
{
background-color: grey;
}
to
{
background-color: orange;
}
}
</style>
</head>
<body>
</body>
</html>
background: grey; 是背景初始颜色，animation: fadebackground 5s infinite; animation是一个动画属性，fadebackground是动画名称，其绑定@keyframes的名称，5s是动画过渡时间，infinite是无限循环。
可以通过以下文章，详细了解animation动画属性。
- 一图解释 animation-timing-function 6个属性值的区别
- 一图了解animation-fill-mode: none|forwards|backwards|both各属性值
- 【实例】详解 CSS3 animation 6个动画属性
- 一图理解animation属性linear/ease/ease-in/ease-out/ease-in-out
@Keyframes 规则
示例中，使用了@Keyframes 规则创建淡入动画效果。
使用@keyframes 规则，你可以逐渐更改所选元素的样式。这就是你可以在 CSS 中创建动画的方式。为此，请在 @keyframes 规则中使用动画名称的属性值。
这样，你就可以选择适用于渐变样式的动画。在@keyframes规则中，你可以在应用样式时使用“from”和“to”等选择器。请记住，“from”和“to”选择器与 0% 和 100% 相同。
你使用“from”选择器应用的样式将逐渐更改为你使用“to”选择器应用的样式。请记住，更改将在你为动画持续时间属性指定的时间段内发生。
有了这些，你可以通过使用 @keyframes 规则选择器将元素的不透明度从0更改为1，轻松创建动画 CSS 的淡入淡出。
@keyframes 规则的语法
@keyframes animation-name
{
keyframes-selector
{
/* CSS 样式 */
}
}
相关文章
相关文章
x
- 站长推荐
