CSS全面解析之三：CSS 效果

2019-07-08 本文已影响14人望穿秋水小作坊

box-shadow

语法
box-shadow: 5px 5px 24px 0px rgba(0, 0, 0, 0.5);
解析：
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */

补充一个可能遇到的小知识点：如果阴影不想被其他兄弟 div 遮挡住，可以通过 z-index 来控制遮挡顺序。但是 z-index 仅对 position= relative | absolute 生效哟。

效果图
一个有趣点，一个 div 画图系列其实就是用 box-shadow 来实现的。

效果图，仅仅使用一个 div 元素来实现

总结 box-shadow 作用

营造层次感（立体感）
充当没有宽度的边框
特殊效果

总结 text-shadow 作用

立体感
印刷品质感

总结 border-radius 作用

圆角矩形
圆形（border-radius:50%）
半圆、扇形
一些奇怪的角角

总结 background 作用

纹理、图案
渐变
雪碧图动画
背景图尺寸适应

总结clip-path 作用

对容器进行裁剪
常见几何图形遮罩效果
支持自定义路径

裁剪效果

变换 transform 几种基本的变换

translate 移动
scale 缩放
skew 倾斜
rotate 旋转

练习：绘制如下的 3D 图形，熟悉 transform translate transition 的区别。

练习效果

实现代码如下：

<!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>变换 1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 200px;
            height: 200px;
            margin: 75px 0 0 75px;
            border: none;
        }

        .pers650 {
            perspective: 650px;
        }

        .cube {
            width: 100%;
            height: 100%;
            backface-visibility: visible;
            perspective-origin: 150% 150%;
            transform-style: preserve-3d;
            transition: transform 0.3s;
        }

        .cube:hover {
            transform: rotate(180deg)
        }

        .face {
            display: block;
            position: absolute;
            width: 100px;
            height: 100px;
            border: none;
            line-height: 100px;
            font-family: sans-serif;
            font-size: 60px;
            color: white;
            text-align: center;
        }

        .face {
            display: block;
            position: absolute;
            width: 100px;
            height: 100px;
            border: none;
            line-height: 100px;
            font-family: sans-serif;
            font-size: 60px;
            color: white;
            text-align: center;
        }

        /* Define each face based on direction */
        .front {
            background: rgba(0, 0, 0, 0.3);
            transform: translateZ(50px);
        }

        .back {
            background: rgba(0, 255, 0, 1);
            color: black;
            transform:  translateZ(-50px) rotateY(180deg);
        }

        .right {
            background: rgba(196, 0, 0, 0.7);
            transform:  translateX(50px) rotateY(90deg);
        }

        .left {
            background: rgba(0, 0, 196, 0.7);
            transform: translatex(-50px)  rotateY(90deg)
        }

        .top {
            background: rgba(196, 196, 0, 0.7);
            transform: translateY(-50px) rotateX(90deg);
        }

        .bottom {
            background: rgba(196, 0, 196, 0.7);
            transform: translateY(50px) rotateX(90deg);
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="cube pers650">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
        </div>
    </div>
</body>

</html>

CSS全面解析之三：CSS 效果

猜你喜欢

热点阅读