15.3D动画、盒阴影、滤镜样式

最新推荐文章于 2022-11-10 00:14:26 发布

宠儿呀

最新推荐文章于 2022-11-10 00:14:26 发布

阅读量156

点赞数

分类专栏： html+css笔记文章标签： css3 css html html5

本文链接：https://blog.csdn.net/qq_46055080/article/details/104561378

版权

html+css笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章目录

1.3d动画

感觉讲原理也没有什么用，3d动画就是建立在空间坐标系上的，使物体产生立体感的东东吧。

默认情况下前端的3D坐标系是没有Z轴值的, 所以默认看不到3d物体的远近, 只能看到3D物体的投影，通过给坐标系添加perspective样式即可增加Z轴。

perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。

下边是perspective不同值的效果：
在这里插入图片描述
默认情况下，坐标系的Z轴位于父元素的水平中线与垂直中线的交界处。可以用perspective-origin样式来设置原点位置。（与变化原点类似）

值得注意的是，使用3d效果，必须再加上transform-style: preserve-3d;

1-1立方体代码

下方附上一立方体（骰子）效果图和代码:

立方体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 700px;
            background: linear-gradient(#fff 0%, #6fb4d0 100%) no-repeat;
            opacity: .8;
        }
        .fa {
            width: 400px;
            margin: 200px auto;
            position: relative;
            transform-style: preserve-3d;
            perspective: 1000px;
            transform: rotateX(-10deg) rotateY(-40deg);
        }
        .fa>div {
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            border: 1px solid #ccc;
            background-color: rgba(123,169,201,.3);
            position: absolute;
            color: #fff;
            font-size: 40px;
        }
        .aa {
            transform: translateY(-100px) rotateX(90deg);
        }
        .bb {
            transform: translateZ(100px);
        }
        .cc {
            transform: translateX(-100px) rotateY(-90deg);
        }
        .dd {
            transform: translateX(100px) rotateY(90deg);
        }
        .ee {
            transform: translateZ(-100px) rotateY(180deg);
        }
        .ff {
            transform: translateY(100px) rotateX(-90deg);
        }
    </style>
</head>
<body>
    <div class="fa">
        <div class="aa">1</div>
        <div class="bb">2</div>
        <div class="cc">3</div>
        <div class="dd">4</div>
        <div class="ee">5</div>
        <div class="ff">6</div>
    </div>
</body>
</html>

2.盒阴影box-shadow

盒阴影:水平方向偏移垂直方向偏移阴影模糊距离阴影缩放阴影颜色阴影显示方式；

box-shadow：0px 0px 0 0 blue outset;

盒阴影
盒阴影思维导图
文字阴影思维导图

2-1凹凸文字代码

下边是一个凹凸文字案例效果图和代码：

凹凸文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /*通配符不建议使用，这里为方便*/
        div {
            width: 900px;
            height: 400px;
            margin: 50px auto;
            background-color: #bbb;
        }
        p {
            width: 100%;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 120px;
            font-weight: bolder;
        }
        .p01 {
            color: #ccc;
            text-shadow: 3px 4px 1px #000,-1px -1px 1px #fff;
        }
        /*文字阴影*/
        .p02 {
            color: #aaa;
            text-shadow: -1px -1px 1px #000, 2px 1px 3px #fff;
        }
    </style>
</head>
<body>
    <div>
        <p class="p01">我是凸起的文字</p>
        <p class="p02">我是凹下的文字</p>
    </div>
</body>
</html>

3.滤镜样式

宠儿呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
15.3D动画、盒阴影、滤镜样式

15.3D动画、盒阴影、滤镜样式文章目录15.3D动画、盒阴影、滤镜样式1.3d动画1-1立方体代码2.盒阴影box-shadow2-1凹凸文字代码3.滤镜样式1.3d动画感觉讲原理也没有什么用，3d动画就是建立在空间坐标系上的，使物体产生立体感的东东吧。默认情况下前端的3D坐标系是没有Z轴值的, 所以默认看不到3d物体的远近, 只能看到3D物体的投影，通过给坐标系添加perspectiv...
复制链接

扫一扫