【悲战蓝桥杯国赛】css属性曙光博客-随笔小窝曙光博客

我们看到，图片的近处是模糊的，而远处是清晰的，我们把这种效果称为景深。

CSS 中有一个属性可以支持元素的平移、旋转、缩放或倾斜。同时，CSS 中还有一个属性可以将模糊或颜色偏移等图形效果应用于元素。大家可以试着通过 MDN 或者其他方式查找哪些 CSS 属性可以满足上述需求。

通常，我们会在 CSS 中对需要应用上述效果的元素直接书写相应的属性值。但是，如何根据场景动态修改上述属性值也是日常业务中常见的需求。

本节挑战，我们为大家提供这样的场景，希望大家能通过 JS 的方式为图片动态添加景深效果。

图片[1]曙光博客-随笔小窝【悲战蓝桥杯国赛】css属性曙光博客-随笔小窝曙光博客

在 CSS 中，可以支持元素的平移、旋转、缩放或倾斜的属性是 transform。而可以将模糊或颜色偏移等图形效果应用于元素的属性是 filter。

`transform` 属性

transform 属性可以对元素进行二维或三维变换。常见的值包括：

translate(x, y): 平移
rotate(angle): 旋转
scale(x, y): 缩放
skew(x-angle, y-angle): 倾斜

示例：

/* 平移 */
transform: translate(50px, 100px);

/* 旋转 */
transform: rotate(45deg);

/* 缩放 */
transform: scale(1.5, 1.5);

/* 倾斜 */
transform: skew(30deg, 20deg);

`filter` 属性

filter 属性可以对元素应用图形效果，如模糊、亮度、对比度等。常见的值包括：

blur(px): 模糊
brightness(percentage): 亮度
contrast(percentage): 对比度
grayscale(percentage): 灰度
hue-rotate(angle): 色相旋转
invert(percentage): 反转颜色
sepia(percentage): 深褐色

示例：

/* 模糊 */
filter: blur(5px);

/* 亮度 */
filter: brightness(150%);

/* 对比度 */
filter: contrast(200%);

/* 色相旋转 */
filter: hue-rotate(90deg);

动态修改属性值

在日常业务中，可能需要根据场景动态修改这些属性值。这通常可以通过 JavaScript 来实现。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic CSS Transformation</title>
    <style>
        #myElement {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: transform 0.5s, filter 0.5s;
        }
    </style>
</head>
<body>
    <div id="myElement"></div>
    <button onclick="applyTransform()">Transform</button>
    <button onclick="applyFilter()">Filter</button>
    <script>
        function applyTransform() {
            var element = document.getElementById('myElement');
            element.style.transform = 'translate(50px, 100px) rotate(45deg) scale(1.5)';
        }

        function applyFilter() {
            var element = document.getElementById('myElement');
            element.style.filter = 'blur(5px) brightness(150%)';
        }
    </script>
</body>
</html>

在这个示例中，当点击按钮时，JavaScript 函数会动态修改 #myElement 元素的 transform 和 filter 属性，从而实现相应的效果。

<html>

<head>
    <META charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>为图片添加景深效果</title>
    <link rel="stylesheet" href="https://labfile.oss.aliyuncs.com/courses/9203/style06.css">
</head>

<body>
    <header>
        <div><img class="img1" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-1.png" title="枫叶林"></div>
        <div><img class="img2" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-2.png" title="人物"></div>
        <div><img class="img3" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-3.png"></div>
        <div><img class="img4" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-4.png"></div>
        <div><img class="img5" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-5.png"></div>
        <div><img class="img6" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-6.png"></div>
    </header>
    <script>
        document.querySelector(`img[title="枫叶林"]`).style.filter="blur(0px)"
        document.querySelector(`img[title="人物"]`).style.filter="blur(0px)"
      // 请在这里编写代码，根据需求，使得图片达到景深效果
    </script>
</body>

</html>

这段代码是使用 JavaScript 中的 querySelector 方法选择文档中的两个图片元素，并分别为它们设置了 filter 样式属性。

具体解释如下：

document.querySelector(img[title=”枫叶林”]’): 这一部分是使用 CSS 选择器语法选取了一个具有title属性值为“枫叶林”` 的图片元素。
.style.filter="blur(0px)": 这一部分将选中的图片元素的 filter 样式属性设置为 "blur(0px)"，即取消了模糊效果，将图片恢复为原来的清晰状态。

同样的操作也针对另一个图片元素：img[title="人物"]，将其模糊效果也取消，使其恢复清晰。

文章版权声明 1、本网站名称：曙光博客
2、本站永久网址：pqblog.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ86512进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

学习经验

【悲战蓝桥杯国赛】css属性

transform 属性

filter 属性

动态修改属性值

请登录后发表评论

`transform` 属性

`filter` 属性