如何在 HTML 中导入淡入淡出和缩放效果？

CSS 的`scale()`函数指定一个变换，该变换可调整二维元素的大小。由于缩放量由向量定义，因此它可以以不同的比例调整垂直和水平尺寸。结果，它会产生一个``数据类型。它可以与`transform`属性一起使用，以在二维或三维空间中变换元素。

这种缩放变换由一个二维向量来表征。它的坐标指定每个方向的缩放量。

语法

scale(sx) (or)
scale(sx, sy)

sx：表示缩放向量的横坐标的数字或百分比。

sy：表示缩放向量的纵坐标的数字或百分比。

CSS 的淡入淡出过渡是一种视觉效果，当页面上的元素（例如图像、文本或背景）逐渐出现或消失时会发生这种效果。为了实现这些效果，我们可以使用 CSS 的`transition`或`animation`属性。当使用`transition`属性时，我们只能指定初始状态和最终状态——没有中间点。

在本文中，我们将讨论在 HTML 中创建简单的淡入淡出和缩放动画的方法，并查看一些示例。

使用 CSS 动画属性

**CSS 动画**是用于在 HTML 中设置内容动画的三种方法之一。CSS 动画具有简单的用途。它们使我们能够在其影响的元素上设置 CSS 属性的动画。这使我们能够做一些很酷的事情，例如使事物移动、淡入淡出、更改颜色等等。

CSS 动画属性在样式之间添加动画。此属性是下面列出的 CSS 属性的简写

  • animation-delay

  • animation-direction

  • animation-duration

  • animation-fill-mode

  • animation-iteration-count

  • animation-name

  • animation-play-state

  • animation-timing-function

示例

在这个例子中，我们将使用 CSS 动画，由两个关键帧定义。一个设置透明度为 0，另一个设置透明度为 1。我们的动画设置为运行 6 秒，并且包含实际动画细节的 `@keyframes` 规则的名称为 `fadeAndScale`。因为我们的动画本质上是在两个状态之间的转换，所以我们只有 `from` 和 `to` 关键帧来定义动画的行为。

此关键帧的内容正式定义了我们的观察结果，透明度设置为 0，缩放函数设置为 90%。在 `animation-duration` 结束时，我们的文本将完全可见，并且其比例在最终状态下设置为 100%。

在我们已经很细微的动画中，另一个细微的效果是在结尾处轻微的反弹，我们的文本比需要的稍大一些，然后在文本淡入淡出并缩放时弹回原位。

这是由于缓动函数。尽管我们的关键帧为我们的透明度和缩放函数定义了明确的起始值和结束值，但缓动函数控制中间的属性值，通常以超出起始和结束动画时严格定义的边界的新颖方式。

Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>Fade and Scale</title>
<style>
    body {
        background-color: #F5F5F5;
        margin: 50px;
        margin: 25px 0 0 0;
    }
    #container {
        margin:20px;
        width: 400px;
        height: 220px;
        background-color:lightsalmon;
        border-radius:10px;
    }
    h3 {
        font-size: 70px;
        color: #FFF;
        padding: 20px 10px 10px 90px;
        transform-origin: 50% 100%;
        -webkit-text-stroke: 1px sienna;
        
        animation-duration: .3s;
        animation-name: fadeAndScale;
        animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
    }
    @keyframes fadeAndScale {
        from {
            opacity: 0;
            transform: scale(.7, .7);
        }
        to {
            opacity: 1;
            transform: scale(1, 1);
        }
    }
</style>
</head>
<body>
    <div id="container">
        <h3>Hello<br>World</h3>
    </div>
</body>
</html>

使用过渡和变换属性

`transition`属性是以下属性的简写：

  • `transition-property:` 指定将受过渡效果影响的 CSS 属性的名称。

  • `transition-duration:` 指定过渡效果完成所需的时间（秒或毫秒）。

  • `transition-timing-function:` 指定过渡效果的速度曲线。

  • `transition-delay:` 定义过渡开始后的时间间隔。

语法

transition: property duration timing-function delay|initial|inherit;

`transform`属性在二维或三维空间中变换元素。此属性使我们能够旋转、缩放、移动、倾斜等等。

语法

transform: none|transform-functions|initial|inherit;

示例

在这个例子中，主体最初在较小的比例下将透明度设置为 0，稍后使用过渡和变换属性进行动画处理。`onload` 事件用于在页面加载时将透明度设置为 1，比例设置为 (1,1)。由于过渡和变换属性，调整透明度和比例现在似乎会淡入页面并增大尺寸。`transition` 属性允许我们指定淡入和比例更改的时间。

Open Compiler
<!DOCTYPE html>
<html>
<head>
    <title>Fade and Scale</title>
    <style>
        body {
            opacity: 0;
            transition: opacity 10s, transform 10s;
            transform: scale(0.5,0.5);
        }
        div {
            background-color: aquamarine;
            width: 200px;
            height: 80px;
            padding: 10px 40px 20px 90px;
        }
    </style>
</head>
<body onload="fadeandscale()">
    <div>
        <h2>Hello World!</h2>
    </div>
    <script>
        function fadeandscale() {
        document.getElementsByTagName('body')[0].style.opacity='1';
        document.getElementsByTagName('body')[0].style.transform='scale(1,1)';
        }
    </script>
</body>
</html>

更新于：2023年9月12日

82 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告