CSS进阶_box-shadow property value-CSDN博客

本文链接：https://blog.csdn.net/qq_43601784/article/details/119146447

文章目录

1.选择器
- 1.1.组合选择符和属性选择器
- 1.2.伪类选择器和伪元素
2. 阴影
2.1.box-shadow
- 2.2.text-shadow
3.CSS变量
4.CSS动画
5.案例
- 5.1.案例一
- 5.2.案例二

1.选择器

1.1.组合选择符和属性选择器

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号～分隔）

属性选择器

标签[attribute=value]

选择属性为attribute值为value的标签

试一试

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* div下所有的p */
    
    div p {
        background: #333;
        color: white;
    }
    /* div下一级子元素的p */
    
    div>p {
        background: red;
        color: white;
    }
    /* 与div相邻的同一级的p */
    
    div+p {
        background: turquoise;
        color: #fff;
    }
    /* 有target属性的a标签 */
    
    a[target] {
        background: red;
    }
    /* 属性type的值为text和email的input标签 */
    
    input[type="text"],
    input[type="email"] {
        width: 100%;
        margin-bottom: 5px;
    }
</style>

<body>
    <div>
        <p>Lorem ipsum dolor sit amet.</p>
        <ul>
            <li>Item 1</li>
            <li>
                <p>Item 2</p>
            </li>
            <li>Item 3</li>
        </ul>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <p>Lorem ipsum dolor sit amet.</p>
    <br>

    <a href="#">第一页</a>
    <a href="#" target="_self">第二页</a>
    <a href="http://baidu.com" target="_blank">百度</a>

    <form>
        <input type="text" placeholder="姓名">
        <input type="email" placeholder="邮箱">
        <input type="submit" placeholder="提交">
    </form>
</body>

</html>

1.2.伪类选择器和伪元素

CSS伪类是用来添加一些选择器的特殊效果。

语法

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

直接上例子

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    li {
        padding: 0.25rem;
        margin: 0.25rem;
        list-style: none;
    }
    /* 父元素的第一个子元素 */
    
    li:first-child {
        background: red;
    }
    /* 父元素的最后一个子元素 */
    
    li:last-child {
        background: red;
    }
    /* 第二个 */
    
    li:nth-child(2) {
        background: rosybrown;
    }
    /* 3的倍数 */
    
    li:nth-child(3n) {
        background: skyblue;
    }
    /* 从7开始三的倍数 */
    
    li:nth-child(3n+7) {
        background: slategrey;
    }
    /* 奇数 */
    
    li:nth-child(odd) {
        background: wheat;
    }
    /* 偶数 */
    
    li:nth-child(even) {
        background: turquoise;
    }
</style>

<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
        <li>Item 11</li>
        <li>Item 12</li>
        <li>Item 13</li>
        <li>Item 14</li>
        <li>Item 15</li>
        <li>Item 16</li>
        <li>Item 17</li>
        <li>Item 18</li>
        <li>Item 19</li>
        <li>Item 20</li>
    </ul>
</body>

</html>

before和after

在元素前或者元素后插入样式

例子

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 在姓名前加了一个红色的*号 */
    
    .is-required::before {
        content: '*';
        color: red;
        padding-left: 2px;
    }
    
    body {
        font-family: Arial, Helvetica, sans-serif;
        background: #333;
        color: #fff;
        margin: 0;
    }
    
    header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 100vh;
    }
    /* 在before中加入透明度较低的图片不会影响到header中的文字，
    如果放在header中则会影响到文字，让文字也不清晰了
    */
    
    header:before {
        content: '';
        background: url('https://source.unsplash.com/1600x900/?nature,water') no-repeat center center/cover;
        opacity: 0.4;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    
    header>h1 {
        font-size: 4rem;
        margin: 1rem;
    }
</style>

<body>
    <!-- <label class=" is-required " for="name">姓名</label>
    <input type="text"> -->
</body>
<header>
    <h1>欢迎光临</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, eius.</p>
</header>
<section>
    <h3>Lorem, ipsum dolor.</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis necessitatibus quisquam eaque sit distinctio itaque hic, recusandae autem inventore corrupti aspernatur quas sequi amet eius delectus eos ullam. Temporibus, ex?</p>
</section>

</html>

图片的透明度没有影响到前面的文字

所有CSS伪类/元素

选择器	示例	示例说明
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty	p:empty	选择所有没有子元素的p元素
:enabled	input:enabled	选择所有启用的表单元素
:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
:in-range	input:in-range	选择元素指定范围内的值
:invalid	input:invalid	选择所有无效的元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
:not(selector)	:not§	选择所有p以外的元素
:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:optional	input:optional	选择没有"required"的元素属性
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:required	input:required	选择有"required"属性指定的元素属性
:root	root	选择文档的根元素
:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)
:valid	input:valid	选择所有有效值的属性
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个元素的第一个字母
:first-line	p:first-line	选择每个元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的元素
:before	p:before	在每个元素之前插入内容
:after	p:after	在每个元素之后插入内容
:lang(language)	p:lang(it)	为元素的lang属性选择一个开始值

2. 阴影

2.1.box-shadow

向div元素添加阴影

语法

box-shadow: h-shadow v-shadow blur spread color inset;

**注意：**boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container {
        display: flex;
    }
    
    .box {
        padding: 1rem;
        margin: 1rem;
        background: bisque;
        /* offset-x/offset-y/color */
        box-shadow: 10px 10px teal;
        /* offset-x|offset-y|blur-radius|color 模糊阴影 */
        box-shadow: 10px 10px 20px teal;
        /* negative values 反向*/
        box-shadow: -10px -10px 20px teal;
        /* offset-x|offset-y|blur-radius|spread-radius|color */
        box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, 1);
        /* offset-x|offset-y｜color｜inset */
        box-shadow: -3px -3px teal inset;
        /* multiple shadows 复合阴影*/
        box-shadow: 3px 3px 10px blue, -3px -3px 10px green;
    }
</style>

<body>
    <div class="container">
        <div class="box">
            <h3>Heading</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut, aperiam.</p>
        </div>
        <div class="box">
            <h3>Heading</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut, aperiam.</p>
        </div>
        <div class="box">
            <h3>Heading</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut, aperiam.</p>
        </div>
    </div>
</body>

</html>

2.2.text-shadow

语法

text-shadow: h-shadow v-shadow blur color;

注意： text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h1 {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 4rem;
    }
    /* h-shadow ｜v-shadow ｜color; */
    
    h1.a {
        text-shadow: 0.2rem 0.2rem steelblue;
    }
    /* h-shadow ｜v-shadow ｜blur|color; */
    
    h1.b {
        text-shadow: 0.4rem 0.4rem 0.7rem steelblue;
    }
    /* white text */
    
    h1.c {
        text-shadow: 0.4rem 0.4rem 0.7rem steelblue;
        color: white;
    }
    /* negetive values */
    
    h1.d {
        text-shadow: -0.4rem -0.4rem 0.7rem steelblue;
        color: white;
    }
</style>

<body>
    <h1 class="a">Gypsophyla</h1>
    <h1 class="b">Gypsophyla</h1>
    <h1 class="c">Gypsophyla</h1>
    <h1 class="d">Gypsophyla</h1>
</body>

</html>

3.CSS变量

可以用css变量定义属性样式，在需要的时候调用。比如页面的一些主颜色，假如需要更改时，只需要将定义这个颜色的变量更改就可以全部更换，极为方便。

下面这个例子定义在:root里的为公共变量即所有选择器都可以调用。在.box里的只有box里的属性可以调用。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 定义css变量 */
    
     :root {
        --primary-color: green;
        --secondary-color: #ccc;
        --light-color: #f4f4f4;
        --max-width: 768px
    }
    
    .box {
        --box-1-width: 3;
        --box-2-width: 1
    }
    
    * {
        padding: 0;
        margin: 0;
    }
    
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.4;
        background: var(--light-color);
    }
    
    header {
        background: var(--primary-color);
        color: #fff;
        border-bottom: 5px var(--secondary-color) solid;
        text-align: center;
    }
    
    .container {
        display: flex;
        margin: 0 auto;
        max-width: var(--max-width);
    }
    
    .box {
        background-color: var(--primary-color);
        border-bottom: 5px var(--secondary-color) solid;
        color: #fff;
        padding: 1rem;
        margin: 1rem;
    }
</style>

<body>
    <header>
        <h1>Gypsophyla</h1>
    </header>
    <div class="container">
        <div class="box box-1">
            <h3>标题</h3>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem inventore ut illo labore, hic quibusdam.
            </p>
        </div>
        <div class="box box-2">
            <h3>标题</h3>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem inventore ut illo labore, hic quibusdam.
            </p>
        </div>
    </div>
</body>

</html>

更改页面颜色时。将--primary-color的值改为grey

整个页面使用其变量的地方都变为了灰色

4.CSS动画

4.1.animation

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。
initial	设置属性为其默认值。阅读关于 initial的介绍。
inherit	从父元素继承属性。阅读关于 initinherital的介绍。

<!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>Keyframes 01</title>

    <style>
        body {
            background: #333;
        }
        
        .box {
            background: white;
            width: 200px;
            height: 200px;
            position: relative;
            /* animation-name: animate1;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-fill-mode: forwards;
            animation-delay: 2s;
            animation-direction: alternate-reverse ;
            animation-timing-function: ease-in-out; */
            animation: animate1 2s infinite forwards alternate-reverse ease-in-out;
        }
        
        @keyframes animate1 {
            from {
                width: 200px;
                top: 0;
            }
            to {
                width: 600px;
                background-color: red;
                top: 300px;
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

from和to定义了起点和终点的状态，在animation中定义了持续时间，持续次数，方向等属性

QQ录屏20210727145601 00_00_00-00_00_30

也可以用百分比来定义动画每个时段的样式

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        background: #333;
    }
    
    .box {
        background: white;
        width: 200px;
        height: 200px;
        position: relative;
        top: 0;
        left: 0;
        animation: animate1 5s forwards ease-in-out;
    }
    
    @keyframes animate1 {
        25% {
            top: 0;
            left: 300px;
            background: red;
            border-radius: 50% 0 0 0;
        }
        50% {
            top: 300px;
            left: 300px;
            background: blue;
            border-radius: 50% 50% 0 0;
        }
        75% {
            top: 300px;
            left: 0;
            background: green;
            border-radius: 50% 50% 50% 0;
        }
        100% {
            top: 0;
            left: 0;
            background: white;
            border-radius: 50% 50% 50% 50%;
        }
    }
</style>

<body>
    <div class="box"></div>
</body>

</html>

动画 00_00_00-00_00_30

4.2.transition

语法

transition: property duration timing-function delay;

属性

值	描述
transition-property	指定CSS属性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        background: #333;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    
    .box {
        background: white;
        width: 100px;
        height: 100px;
        /* 选中所有属性，时间2s，来回都有动画 */
        transition: all 2s ease-in-out;
    }
    
    .box:hover {
        width: 300px;
        height: 300px;
        border-radius: 50% 50% 50% 50%;
        background: red;
    }
</style>

<body>
    <div class="box"></div>
</body>

</html>

transition 00_00_00-00_00_30

4.3.transform

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

语法

transform: none|transform-functions;

属性

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

5.案例

5.1.案例一

exame1 00_00_00-00_00_30

index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section id="page-1" class="page">
        <h1>欢迎光临 Gypsophyla</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam impedit earum architecto molestias provident consequatur ea cupiditate, repellat ab voluptatum reiciendis non doloribus eius obcaecati quasi magnam nemo, quidem esse magni ipsa minus?
            Animi sapiente cum ratione, maxime eum explicabo.</p>
        <a href="#page-2" class="btn">下一页
            <i class="fas fa-arrow-circle-down"></i>
        </a>
    </section>
    <section id="page-2" class="page">
        <h1>第二页</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam impedit earum architecto molestias provident consequatur ea cupiditate, repellat ab voluptatum reiciendis non doloribus eius obcaecati quasi magnam nemo, quidem esse magni ipsa minus?
            Animi sapiente cum ratione, maxime eum explicabo.</p>
        <div>
            <a href="#page-1" class="btn btn-dark">上一页
                    <i class="fas fa-arrow-circle-up"></i>
                </a>
            <a href="#page-3" class="btn">下一页
                <i class="fas fa-arrow-circle-down"></i>
            </a>
        </div>

    </section>
    <section id="page-3" class="page">
        <h1>第三页</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam impedit earum architecto molestias provident consequatur ea cupiditate, repellat ab voluptatum reiciendis non doloribus eius obcaecati quasi magnam nemo, quidem esse magni ipsa minus?
            Animi sapiente cum ratione, maxime eum explicabo.</p>
        <div> <a href="#page-2" class="btn btn-dark">上一页
                <i class="fas fa-arrow-circle-up"></i>
            </a>
            <a href="#page-4" class="btn">下一页
            <i class="fas fa-arrow-circle-down"></i>
        </a></div>

    </section>
    <section id="page-4" class="page">
        <h1>第四页</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam impedit earum architecto molestias provident consequatur ea cupiditate, repellat ab voluptatum reiciendis non doloribus eius obcaecati quasi magnam nemo, quidem esse magni ipsa minus?
            Animi sapiente cum ratione, maxime eum explicabo.</p>
        <div>
            <a href="#page-3" class="btn btn-dark">上一页
                    <i class="fas fa-arrow-circle-up"></i>
                </a>
        </div>

    </section>
</body>

</html>

style.css

:root {
    --p1-color: steelblue;
    --p2-color: tan;
    --p3-color: teal;
    --p4-color: tomato;
    --animate-speed: 2s;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}


/* 平滑过渡 */

html {
    scroll-behavior: smooth;
}

#page-1 {
    background: var(--p1-color);
}

#page-2 {
    background: var(--p2-color);
}

#page-3 {
    background: var(--p3-color);
}

#page-4 {
    background: var(--p4-color);
}

.page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 4rem;
}

.page h1 {
    font-size: 4rem;
    line-height: 1.7;
    margin: 1rem;
}

.page p {
    font-size: 1.5rem;
    margin: 1rem;
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    background: #f4f4f4;
    text-decoration: none;
    border: none;
    margin-top: 1rem;
    font-size: 1.1rem;
    color: #333;
    transition: all 0.3s ease-in;
}

.btn:hover,
.btn-dark {
    background: #333;
    color: white;
}

.btn-dark:hover {
    color: #333;
    background: white;
}

#page-1 h1 {
    /* 让内容在页面之外 */
    transform: translateY(-1000px);
    /* forwads 不会回到原点 */
    animation: heading var(--animate-speed) forwards ease-in
}

#page-1 p {
    transform: translateX(-1800px);
    animation: text var(--animate-speed) forwards ease-in;
}

@keyframes heading {
    to {
        transform: translateY(0);
    }
}

@keyframes text {
    to {
        transform: translateX(0);
    }
}

5.2.案例二

在这里插入图片描述

index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="menu.css">
</head>

<body>
    <div class="menu-wrap">
        <input type="checkbox" class="toggler">
        <div class="hamburger">
            <div></div>
        </div>
        <div class="menu">
            <div>
                <div>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
    <header id="showcase">
        <div class="container showcase-container">
            <h1>欢迎光临 Gypsophyla</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic porro recusandae accusantium. Voluptas dicta perferendis alias vitae eaque atque laudantium?</p>
            <a href="#" class="btn">阅读更多</a>
        </div>
    </header>
</body>

</html>

style.css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: rgba(13, 110, 139, 0.75);
    --secondary-color: rgba(229, 148, 0, 0.9);
    --overlay-color: rgba(24, 39, 51, 0.85);
    --menu-speed: 1.5s;
}

#showcase {
    height: 100vh;
    background: var(--primary-color);
    position: relative;
    color: white;
}

.container {
    max-width: 960px;
    padding: 0 3rem;
    overflow: hidden;
    margin: auto;
}

#showcase::before {
    content: '';
    background: url('https://source.unsplash.com/user/erondu/1600x900') no-repeat center center/cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
}

#showcase .showcase-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    height: 100%;
    text-align: center;
}

#showcase .showcase-container h1 {
    font-size: 4rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

#showcase .showcase-container p {
    font-size: 1.2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.btn {
    display: inline-block;
    border: none;
    text-decoration: none;
    background: var(--secondary-color);
    color: white;
    padding: 0.75rem 1rem;
    transition: opacity 0.5s ease-in-out;
}

.btn:hover {
    opacity: 0.7;
}

menu.css

/* 固定在页面左上角 */

.menu-wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

.menu-wrap .toggler {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    /* 透明度为0 让下面div的内容显示 */
    opacity: 0;
    width: 50px;
    height: 50px;
    z-index: 2;
}

.menu-wrap .hamburger {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 60px;
    height: 60px;
    padding: 1rem;
    background: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
}


/* 利用div的before和after制作三条白线 */

.menu-wrap .hamburger>div {
    position: relative;
    flex: none;
    width: 100%;
    background: white;
    height: 2px;
    transition: all 0.4s ease;
}

.menu-wrap .hamburger>div::before,
.menu-wrap .hamburger>div::after {
    content: '';
    position: absolute;
    z-index: 1;
    background: white;
    width: 100%;
    height: 2px;
    top: -10px;
}

.menu-wrap .hamburger>div::after {
    top: 10px;
}


/* 单选框按钮切换动画样式 */

.menu-wrap .toggler:checked+.hamburger>div {
    transform: rotate(135deg);
}

.menu-wrap .toggler:checked+.hamburger>div::before,
.menu-wrap .toggler:checked+.hamburger>div::after {
    top: 0;
    left: 0;
    transform: rotate(90deg);
}

.menu-wrap .toggler:checked:hover+.hamburger>div {
    transform: rotate(225deg);
}


/* 菜单动画显示 */

.menu-wrap .toggler:checked~.menu {
    visibility: visible;
}

.menu-wrap .toggler:checked~.menu>div {
    transform: scale(1);
    transition-duration: var(--menu-speed);
}

.menu-wrap .toggler:checked~.menu>div>div {
    opacity: 1;
    transition: opacity 0.4s ease 0.4s;
}

.menu-wrap .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
}

.menu-wrap .menu>div {
    background: var(--overlay-color);
    width: 200vw;
    height: 200vw;
    display: flex;
    flex: none;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.4s ease;
}

.menu-wrap .menu>div>div {
    text-align: center;
    max-width: 90vw;
    max-height: 100vh;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.menu-wrap .menu>div>div>ul>li {
    list-style: none;
    color: #fff;
    font-size: 1.5rem;
    padding: 1rem;
}

.menu-wrap .menu>div>div>ul>li>a {
    color: #fff;
    text-decoration: none;
    transition: color 0.4s ease;
}

.menu-wrap .menu>div>div>ul>li>a:hover {
    color: var(--secondary-color);
}