Css:after，before的简单应用，伪类的背景，滚动视差

本文链接：https://blog.csdn.net/Mr_aswl/article/details/112974951

在这里插入图片描述
一个比较失败的…介绍我很喜欢的唱见的页面
主要练习就是想…wu
知道Hover以后就想着用Hover写一个类似，
开门下效果，我很喜欢那种感觉
刚好手里也有图片，今天竟折腾出来了…nice
然而感觉还是没有什么进步
还有一个就是Css的新属性：Scroll Snap

    background: url(../../../Img/img01.jpg);
    background-size: cover;
    background-attachment: fixed;

使图片固定-fixed，
Scroll Snap
（CSS滚动捕捉）允许你在用户完成滚动后多锁定特定的元素或位置。

scroll-snap-align: start;
实现后一个块自动滚入或者前一个块回弹到初始位置这种效果
scroll-snap-type: y mandatory;
规定在那个轴上是实现效果
（着俩属性就可以使页面Y轴滚动）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css页面练习</title>
    <link rel="stylesheet" href="Css页面练习.css">
</head>

<body>
    <!-- 用视差的方法写页面，突然用Hover写一个页面关闭的效果，
        现在页面的主题暂定是：真夜中，视差滚动
        类似一个很简单的页面布置.练手写，大概，嗯嗯
    -->
    <div id="home">
        <div id="nav">
            <ul>
                <li></li>
                <li>
                    真夜中
                </li>
                <li class="video">
                    <video width="100%" height="100%" controls autoplay muted>
                        <source src="../../../Img/真夜中/土星.mp4" type="video/mp4">
                    </video>
                </li>
            </ul>
        </div>
        <div class="centent">
            <div class="text">
                <h2>真夜中のギタ</h2>
                <P>ずっと真夜中でいいのに。(永远是深夜有多好。)，是一个日本的乐队组合，日本乐坛异军突起超级新声，由创作歌手“ACAね”（读法：あかね）领军。<br>
                    仅靠网络上的口耳相传便有着强大的知名度，一开始以VOCALOID进行模仿翻唱，到目前为止从未露过脸，只投稿自弹自唱和翻唱影片的怪物新人。<br>
                    2018年6月4日，在YouTube上发布《秒针を噛む》，其压倒性的歌声与世界观，仅靠着网络上口耳相传的扩散力，浏览次数节节攀升，MV发布20天就超过百万次。接下来这支MV更以百万累进次数每周递增，
                    <br> 至今已突破千万次数，十分惊人，在网络上造成轰动讨论。<br>同年10月，发行迷你专辑《正しい伪りからの起床》，首次亮相EMI唱片公司，实现主流出道。
                </P>
            </div>
        </div>
        <div class="centent">
            <ul style="float: right;">
                <li></li>
                <li>
                    <h2 class="h">《真夜中のギター》是岛谷ひとみ的音乐作品，收录在《CROSSOVERIV》专辑中。</h2>
                </li>
                <li class="lyric">
                    <p><span><br>街のどこかに淋しがり屋がひとりいまにも泣きそうにギターを奏いている爱を失くしてなにかを求めて <br></span>
                        <span><br> さまよう似たもの同士なのね此処へおいでよ夜はつめたく永い黙って夜明けまでギターを奏こうよ空をごらんよ淋しがり屋の星がなみだの尾をひいてどこかへ旅に立つ爱を失くしてなにかを求めて</span>
                        　 <span><br>さまよう似たもの同士なのねそっとしときよみんな孤独でつらい黙って夜明けまでギターを奏こうよ爱を失くしてなにかを求めて</span>
                        <span><br>さまよう似たもの同士なのねそっとしときよみんな孤独でつらい黙って夜明けまでギターを奏こうよギターを奏こうよギターを奏こうよ</span>
                    </p>
                </li>
            </ul>

        </div>
    </div>
</body>

</html>
</html>

*{
    padding: 0;
    margin: 0;
    font-family: 'SimHei';
    font-weight:bold;
}
#home{
    position: relative;
    overflow: auto;
    width: 100%;
    height: 100vh;
    scroll-snap-type: y mandatory;
}
#home #nav{
    position: relative;
    width: 100%;
    height: 50px;
    /* background: cadetblue; */
    position: fixed;
    top: 2px;
    z-index: 999;
}
#home ul{
    list-style: none;
}
#home #nav ul li{
    float: left;
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
}
#home #nav ul li:nth-child(1){
    background: url(../../../Img/真夜中07.jpg) -2.5px;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    margin-left: 50px;
}
#home #nav ul li:nth-child(2){
    float: left;
}
#home #nav ul li:nth-child(3){
    position: absolute;
    width: 500px;
    height: 280px;
    /* border: 1PX solid red; */
    top: 100px;
    left: 500px;
    background-size: cover;
}
#home #nav ul li:nth-child(3) video{
    list-style: none;
    border: none;
}
#home .centent{
    position: relative;
    width: 100%;
    height: 100%;
    /* 设置每页的顶部为捕捉点 */
    scroll-snap-align: start;
    /* 和上面的  scroll-snap-type: y mandatory; 联动形成长度的滚动...自动以下一个元素的顶部对齐捕捉 */
    background-blend-mode: multiply;
    overflow: auto;
}
#home .video{
    /* overflow: hidden; */
    transition:all 3s ;
    border-radius: 5px;
    box-shadow: 10px 10px 20px;
}
#home .video:hover::before{
    left:  500px;
    z-index: 999999999999;
}
#home .video:hover::after{
    left: -250px;
    z-index: 999999999999;
}
#home .video::before{
    content: '';
    position: absolute;
    left: 250px;
    width: 250px;
    height: 280px;
    background: #ffffff;
    transition:all 0.3s ;
    background-size: cover;
    background-image: url(../../../Img/真夜中11.png);
}
#home .video::after{
    content: '';
    position: absolute;
    left: 0;
    width: 250px;
    height: 280px;
    background: #ffffff;
    transition:all 0.3s ;
    background-size: cover;
    background-image: url(../../../Img/真夜中00.png);
}
#home .centent .text{
    background: rgba(0, 0, 0, .7);
    color: rgb(93, 172, 167);
    margin-top: 600px;
    left: 100px;
    background-blend-mode: screen;
}
#home .centent h2{
    background: #ffffff;
    width: 200px;
}
#home .centent:nth-child(2){
    background: url(../../../Img/真夜中02.jpeg);
    background-size: cover;
    background-attachment: fixed;
}
#home .centent:nth-child(3){
    background: url(../../../Img/真夜中07.jpeg);
    background-size: cover;
    background-attachment: fixed;
}
#home .centent .lyric{
    position: absolute;
    top: 200px;
    left: 50px;
    font-size: 2vw;
    border: rgba(0,0,0,.4);
    z-index: 99999999;
    color: rgb(173, 172, 170);
}
#home .centent .h{
    background: #ffffff;
    width: auto;
}
/* css写的真的好乱，
以前没有规范写过，一下子健壮性有点受不了...受是字面意识..珂珂珂珂
*/