如何将淡入淡出和缩放效果导入 HTML?

htmlweb developmentfront end technology更新于 2025/3/29 20:28:17

scale() CSS 函数指定一种调整二维元素大小的变换。由于缩放量由矢量定义，因此它可以以各种比例调整垂直和水平维度的大小。因此，它生成一个数据类型。它可以与 transform 属性一起使用，在二维或三维空间中变换元素。

二维矢量表征这种缩放变换。其坐标指定了每个方向上的缩放量。

语法

scale(sx)(或)
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。因为我们的动画本质上是两种状态之间的过渡，所以我们只有一个起始和终止关键帧来定义动画的行为。

这个关键帧的内容正式定义了我们的观察结果，不透明度设置为 0，缩放函数设置为 90%。在动画持续时间结束时，我们的文本将完全可见，其缩放比例设置为最终状态的 100%。

我们已经很微妙的动画中的另一个微妙效果是，在结尾处会有轻微的弹跳，文本会变得比需要的稍微大一点，然后在文本淡入淡出并缩小时弹回到原位。

这是由于缓动函数的作用。尽管我们的关键帧为不透明度和缩放函数定义了明确的起始值和终止值，但缓动函数控制着两者之间的属性值，通常以新颖的方式超越了动画开始和结束时设置的严格界限。

<!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 持续时间 timing-function 延迟|初始|继承;

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

语法

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

示例

在此示例中，body 元素最初在较小比例下设置为不透明度 0，transition 和 transform 属性稍后用于动画。onload 事件用于在页面加载时将不透明度设置为 1，比例设置为 (1,1)。由于 transition 和 transform 属性的存在，调整不透明度和比例现在看起来像是页面在尺寸增大的同时逐渐淡入。transition 属性允许我们指定淡入和比例变化的时间。

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