（三）应用视觉设计（下）-阿里云开发者社区

（三）应用视觉设计（下）

2022-06-17 58

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： （三）应用视觉设计（下）

z-index

可以使用 z-index 属性指定元素的堆叠次序。

z-index 的取值是整数，数值大的元素会叠放到数值小的元素上面。

.first {
    background-color: red;
    position: absolute;
    z-index: 2;
}
.second {
    background-color: blue;
    position: absolute;
    left: 40px;
    top: 50px;
    z-index: 1;
}
复制代码

center horizontally

可以通过 display: block; 把行内元素 img 变为块级元素，将图片水平居中。

<style>
    div {
        background-color: blue;
        height: 100px;
        width: 100px;
        margin: auto;
    }
    img {
        display: block;
        margin: auto;
    }
</style>
<div></div>
<img src="https://gitee.com/mancuojie/typo/raw/master/202109080155881.png" alt="🦔">
复制代码

Color

Color model - Wikipedia

当两个颜色恰好在色环的两端时，这两个颜色就互为补色。两个互为补色的颜色会在混合后变成灰色。

选定主色之后，在色环上选择与它的补色相邻的两种颜色与之搭配。此种搭配既有对比，又不失和谐。

hsl

Hue, Saturation, Lightness

色相值 就是色环里面的颜色对应的从 0 到 360 度的角度值。

饱和度 是指色彩的纯度，也就是颜色里灰色的占比。饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。饱和度的取值范围是表示灰色所占百分比的 0 至 100。

亮度决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。其中，100% 的亮度表示纯白色，0% 的亮度则表示纯黑色，而 50% 的亮度就表示在色相中选取的颜色。

hsl() 使 CSS 更改颜色色调更加方便。比如，用 l 给一个纯色添加白色可以调出更浅的色调；添加黑色可以创造更深的色调。另外，还可以通过 s 给纯色添加灰色来同时改变颜色的深浅和明暗。

所有元素的默认 background-color 都是 transparent，可以通过修改饱和度和亮度来调整色调和阴影。

<style>
    header {
        background-color: hsl(180, 90%, 35%);
        color: #FFFFFF;
    }
    nav {
        background-color: hsl(180, 80%, 25%);
    }
    nav ul {
        margin: 0px;
        padding: 5px 0px 5px 30px;
    }
    nav li {
        display: inline;
        margin-right: 20px;
    }
</style>
<header>
    <h1>Cooking with FCC!</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Classes</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>
复制代码

linear-gradient

第一个参数指定了颜色过渡的方向——它的值是角度。

90deg 表示垂直渐变（从左到右），45deg 表示沿对角线渐变（从左下方到右上方）。

其他参数指定了渐变颜色的顺序。

div {
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin: 50px auto;
    background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
}
复制代码

repeating-linear-gradient() 会重复指定的渐变。

有很多参数，本测试只用到角度值和色标。

div{
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50 auto;
    background: repeating-linear-gradient(
        90deg,
        yellow 0px,
        blue 40px,
        green 40px,
        red 80px
    );
}
复制代码

background

background 属性支持使用 url() 函数作为属性值

我们可以通过链接的方式引入纹理或样式的图片。

<style>
    body {
        background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");
    }
</style>
复制代码

transform

当使用伪类选取元素的指定状态（如 :hover）时，我们可以通过 transform 属性非常方便地给元素添加交互。

scale

用来改变元素的显示比例。

<style>
    div {
        width: 70%;
        height: 100px;
        margin: 50px auto;
        background: linear-gradient(
            53deg,
            #ccfffc,
            #ffcccf
        );
    }
    div:hover {
        transform: scale(1.1);
    }
</style>
<div></div>
复制代码

skewX skewY

skewX()：使选择的元素沿着 X 轴（横向）翻转指定的角度。

skewY()：使元素沿 Y 轴（垂直方向）翻转指定角度。

#top {
    background-color: red;
    transform: skewY(-10deg);
}
#bottom {
    background-color: blue;
    transform: skewX(24deg);
}
复制代码

rotate

旋转元素，正为顺时针，负则为逆时针。

.heart {
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
}
复制代码

Create Graphics

Crescent Moon

创建一个圆的、透明的图形，它具有模糊阴影并略微向两边递减。

如你所见，这个阴影就是新月形狀。

<style>
    .center {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: transparent;
        border-radius: 50%;
        box-shadow: 25px 10px 0 0 blue;
    }
</style>
<div class="center"></div>
复制代码

Heart

伪元素 ::before 和 ::after 可以在所选元素之前或之后添加一些内容。

必须配合 content 来使用，这个属性通常用来给元素添加内容诸如图片或者文字。

content 属性仍然是必需的，用来实现形状时它的值可以是空字符串。

<style>
    .heart {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: pink;
        height: 50px;
        width: 50px;
        transform: rotate(-45deg);
    }
    .heart::after {
        content: "";
        background-color: pink;
        border-radius: 50%;
        position: absolute;
        width: 50px;
        height: 50px;
        top: 0;
        left: 25px;
    }
    .heart::before {
        content: "";
        background-color: pink;
        border-radius: 50%;
        position: absolute;
        width: 50px;
        height: 50px;
        top: -25px;
        left: 0;
    }
</style>
<div class="heart"></div>
复制代码

Animation

给元素添加动画：animation 属性控制动画的外观，@keyframes 规则控制动画中各阶段的变化。

@keyframes 通过给持续时间内的特定帧（从 0% 到 100%）加上 CSS 规则设置动画效果。

8个属性值	说明
animation-name	用来设置动画的名称，也就是在 `@keyframes` 里用到的名称。
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔
animation-iteration-count	定义动画的播放次数
animation-direction	指定是否应该轮流反向播放动画
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-play-state	指定动画是否正在运行或已暂停

<style>
    div {
        height: 40px;
        width: 70%;
        background: black;
        margin: 50px auto;
        border-radius: 5px;
        position: relative;
    }
    #rect {
        animation-name: rainbow;
        animation-duration: 4s;
    }
    @keyframes rainbow {
        0% {
            background-color: blue;
            top: 0;
            left: 0;
        }
        50% {
            background-color: green;
            top: 50px;
            left: 25px;
        }
        100% {
            background-color: yellow;
            top: 0;
            left: -25px;
        }
    }
</style>
<div id="rect"></div>
复制代码

fill-mode

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

<style>
    button {
        border-radius: 5px;
        color: white;
        background-color: #0F5897;
        padding: 5px 10px 8px 10px;
    }
    button:hover {
        animation-name: background-color;
        animation-duration: 500ms;
    }
    @keyframes background-color {
        100% {
            background-color: #4791d0;
        }
    }
</style>
<button>Register</button>
复制代码

iteration-count

nimation-iteration-count	描述
n	定义动画播放次数的数值。
infinite	规定动画应该无限次播放。

<style>
    .back {
        position: fixed;
        padding: 0;
        margin: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        animation-name: backdiv;
        animation-duration: 1s;
        animation-iteration-count: infinite;
    }
    .heart {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: pink;
        height: 50px;
        width: 50px;
        transform: rotate(-45deg);
        animation-name: beat;
        animation-duration: 1s;
        animation-iteration-count: infinite
    }
    .heart:after {
        background-color: pink;
        content: "";
        border-radius: 50%;
        position: absolute;
        width: 50px;
        height: 50px;
        top: 0;
        left: 25px;
    }
    .heart:before {
        background-color: pink;
        content: "";
        border-radius: 50%;
        position: absolute;
        width: 50px;
        height: 50px;
        top: -25px;
        left: 0;
    }
    @keyframes backdiv {
        50% {
            background: #ffe6f2;
        }
    }
    @keyframes beat {
        0% {
            transform: scale(1) rotate(-45deg);
        }
        50% {
            transform: scale(0.6) rotate(-45deg);
        }
    }
</style>
<div class="back"></div>
<div class="heart"></div>
复制代码

timing-function

✿ cubic-bezier.com

使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始，以高速结束。
ease-out	动画以高速开始，以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

cubic-bezier 函数包含了 1 * 1 网格里的4个点：p0、p1、p2、p3。

其中 p0 和 p3 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。

你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。

在 CSS 里面通过 (x1, y1, x2, y2) 来确定 p1 和 p2。

通俗的讲，将一条直线放在范围只有 1 的坐标轴中，并从中间拿 p1 和 p2 两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意）

<style>
    .balls {
        border-radius: 50%;
        position: fixed;
        width: 50px;
        height: 50px;
        top: 60%;
        animation-name: jump;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
    #red {
        background: red;
        left: 25%;
        /*animation-timing-function: linear;*/
        animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    }
    #blue {
        background: blue;
        left: 50%;
        animation-timing-function: ease-out;
    }
    #green {
        background: green;
        left: 75%;
        animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
    }
    @keyframes jump {
        50% {
            top: 10%;
        }
    }
</style>
<div class="balls" id="red"></div>
<div class="balls" id="blue"></div>
<div class="balls" id="green"></div>