15.3D效果，盒阴影和滤镜

今天所学的东西，其实与前一篇的内容有较多的相似点，只是应用的规则有些许的变化

A.3D样式效果；

在默认情况下，我们看到的其实是个2D的平面效果，只有X，Y二个轴，如果想要看到3D效果，我们需要增加一个Z轴；这样我们就生成了一个三维坐标系。

新增的Z轴，大家一般也称之为“景深效果”。

** 我们通过给父级元素，增加一个 perspective 的属性，来为父级元素增加一个Z轴，本属性的值，就相当于观察点距离XY平面的距离了;

默认情况下，Z轴并不是在X，Y轴的交叉点上，而是在X，Y平面上，父级元素的正中心点上；即父元素宽高的50%交叉点上；，这一点与我们前一篇所讲的变化样式有点相似，这个Z轴所在的位置，我们可能通过

perspective-origin来进行控制；默认情况下，这个值为 50% 50%; 当我们变更这个值时，就可以变更我们视觉位置点了

在上一篇文章中，我们知道，我们可以在X，Y轴方向上做不同的变化样式，其实这些变化样式也可应用到我们的Z轴上来

a. rotate(旋转角度), 默认情况下，我们的旋转就是围绕着Z轴来旋转的(就是上一篇所讲的元素原点);

我们也可以通过rotageX, rotageY来控制元素在三维坐标系中绕着X转，Y轴来旋转

在Z轴上，有一个变化样式是需要特别注意的，那就是偏移，由于我们在设置景深时是指定了视觉点的，

如果我们在Z轴上正向偏移，元素距离我们的视觉点就会更近一些，通过相似等比原则，我们在屏幕上看见的效果就会是元素变大了，

而当我们在Z轴上做负向偏移时，由于元素与我们的视觉点远了，所以视觉上，元素就变小了；

B. 阴影效果

关于盒阴影效果，其实只是对一个效果的设置;

box-shadow: X方向偏移量 Y方向偏移量阴影模糊距离阴影缩放阴影颜色阴影展示方式

关于阴影应用的参数中，对于四号参数：阴影缩放，这个值并不是说像scale样式一样进行缩放处理，而是在原有的阴影尺寸上进行尺寸的增加或扣减少操作；

可理解为在原尺寸上的变化尺寸，正值表示在原尺寸上增加，为负值，表示在原尺寸上进行扣减操作;

下面我们通过一伪类选择器的效果来演示阴影的效果

C.滤镜样式

关于滤镜样式，当前接触的也不多，我们通过 filter:可以设置滤镜样式；

在这里就讲几个常用的滤镜效果

1).filter：brightness（倍数）；当倍数值大于1的时候元素会变亮，小于1的时候元素会变暗
--> 该属性的作用为调整元素当前的亮度，一般来说可以适用于鼠标悬浮到某元素时的提醒作用

2).filter：contrast（百分比）；所谓对比度，简单理解的话就是一个区域里面每个颜色都会变得格外显眼，黑的更黑，白的更白

--> 当元素只有一种颜色时，该属性看效果和变亮看上去差不多，如果我们给该元素设置一个背景图片的话，那就是另一回事了

3).filter：blur（模糊半径）；给图像设置高斯模糊。模糊半径的值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；\

4).filter：grayscale（）；该属性的作用较为简单，就是将一个颜色复杂的区域改造成一个只有黑白二色的区域。圆括号里面的值定义转换的比例。

--> 值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；\

5). filter：sepia（）；该属性的作用同上，都是将某个区域的颜色进行简化，该属性会将一个颜色丰富的区域变成一种老黑白照片效果，让图片有一种轻微泛黄的样子

关于滤镜效果的应用，依据各自不同的应用需求而定，本节中我们就不过多的详述了，看个例子吧

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            background-color: #000;
        }
        .shadow{
            position:relative;
            width: 500px;
            height: 500px;
            background-color: #000;
            margin:50px auto;

             /*  */
             filter:blur(20px) contrast(10);
        }
        .shadow>div{
            position:absolute;     
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;     
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #fff;           
           
        }
        .son1{
            transform: translateX(-150px);
        }
        .son2{
            animation: shadow 2s linear infinite alternate;
            
        }
        .son3{
            transform: translateX(150px);
        }

        @keyframes shadow{
            0%{
                box-shadow: 350px 0 0 0 #fff;
            }
            100%{
                box-shadow: -350px 0 0 0 #fff;
            }
        }

        
    </style>
</head>

<body>
    <div class="shadow">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>
</body>

</html>

View Code

posted @ 2019-06-17 23:44 耗喜天涯阅读(171) 评论(0) 编辑收藏举报

刷新页面返回顶部

耗喜天涯

15.3D效果，盒阴影和滤镜

公告