3D动画和盒阴影

最新推荐文章于 2021-04-11 18:19:38 发布

顾九七

最新推荐文章于 2021-04-11 18:19:38 发布

阅读量193

点赞数

分类专栏： CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_44681872/article/details/105170359

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

3D动画

下面的代码一般写在3D效果的父元素中，来开辟出三维的立体空间：
transform-style:preserve-3d; /设定其为3D的空间/
perspective: px;/来设定景深即z轴的长度/

z轴始终与元素平面垂直，子元素中用transform来调动元素，使之成型。
坐标演示

盒阴影—box-shadow

必须有
h-shadow-----水平阴影，即元素在水平方向的距离
v-shadow-----垂直阴影，即元素在垂直方向的距离
自行选择
blur-----模糊距离
spread-----阴影尺寸
color-----阴影颜色
inset----内阴影
box-shadow: h-shadow v-shadow blur spread color inset;

文字阴影—text-shadow

必须有
h-shadow-----水平阴影，即元素在水平方向的距离
v-shadow-----垂直阴影，即元素在垂直方向的距离
自行选择
blur-----模糊距离
color-----阴影颜色

3d动画实例

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <style>
            .fa{
                width: 400px;
                height: 400px;
                /* 为其加一个平面来观察效果，可解开注释看一下 */
                /* background-color: pink; */
                /* 父相子绝 */
                position: relative;
                margin: 100px auto 0;
                /* 为其开辟3D空间 */
                transform-style: preserve-3d;
                /* 设定Z轴深度，比这个大也有效果，我试过，太抽象了，搞不懂 */
                /* 如果有看到并且懂了的，麻烦讲讲呗 */
                /* perspective: 1000px; */
                transform:rotateX(20deg) rotateY(30deg);
                /* 为其加动画 */
                animation: dc 2s infinite alternate linear;
                /* transform-origin: 50% 50%; */
            }
            /* 动画效果 */
            @keyframes dc{
                0%{
                   transform: rotateX(0) rotateY(0); 
                }
                100%{
                    /* 可试一下rotate(360deg),rotateX(360deg) rotateY(360deg),rotateX(360deg) rotateZ(360deg),rotateX(360deg) rotateY(360deg) rotateZ(360deg) */
                    transform:rotateX(360deg) rotateZ(360deg);
                }
            }
            /* 中间数字的样式 */
            .fa>div{
                width: 100px;
                height: 100px;
                background-color:#b33333;
                text-align: center;
                line-height: 100px;
                border:1px solid #ccc;
                font-size: 50px;
                position: absolute;
            }
            /* 可将下面的.son0$的注释解开看看 */
            .fa:hover>.son01{
                transform: rotateX(90deg) translateZ(150px) scale(2);
            }
            .fa:hover>.son02{
                transform: translateZ(50px) scale(2);
            }
            .fa:hover>.son03{
                transform: rotateY(-90deg) translateZ(150px) scale(2);
            }
            .fa:hover>.son04{
                transform: rotateY(90deg) translateZ(150px) scale(2);
            }
            .fa:hover>.son05{
                transform:rotateY(180deg) translateZ(150px)  scale(2);
            }
            .fa:hover>.son06{
                transform: rotateX(-90deg) translateZ(150px) scale(2);
            }
            /* .son01{
                transform: rotateX(90deg) translateZ(50px);
            }
            .son02{
                transform: translateZ(50px);
            }
            .son03{
                transform: rotateY(-90deg) translateZ(50px);
            }
            .son04{
                transform: rotateY(90deg) translateZ(50px);
            }
            .son05{
                transform:rotateY(180deg) translateZ(50px) ;
            }
            .son06{
                transform: rotateX(-90deg) translateZ(50px);
            } */
        </style>
    </head>
    <body>
        <!-- 正方体六个面 -->
        <div class="fa">
            <div class="son01">1</div>
            <div class="son02">2</div>
            <div class="son03">3</div>
            <div class="son04">4</div>
            <div class="son05">5</div>
            <div class="son06">6</div>
        </div>
    </body>
</html>

盒阴影示例

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <style>
            div{
                width: 300px;
                height: 300px;
                background-color: rgb(243, 207, 6);
                margin:100px auto 0;
                border-radius: 50%;
                /* box-shadow:	h-shadow v-shadow blur spread color inset; */
                box-shadow: 3px 5px 10px 30px #a5b368 inset;
            }
            /* span{
                font-size: 200px;
                text-shadow: 6px 4px 8px rgb(122, 110, 192);
            } */
        </style>
    </head>
    <body>
        <div></div>
        <!-- <span>jbwgys</span> -->
    </body>
</html>