CSS前端学习（online tuorials）

index.html

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
        <div class="skew1">
            <h2 class ="layer"> 憨憨憨憨憨程序员学的前端例子~ </h2>
        </div>
        <div class = "textBox">
            <div class="skew2">
                <div class ="layer" >
                    <h2>
                        憨憨憨憨憨程序员学的前端例子~
                    </h2>
                </div>
            </div>

        </div>
    </section>


<script>
    // 监听鼠标移动事件，当鼠标在页面上移动时，触发 parallax 函数
    document.addEventListener('mousemove', parallax);
    
    // 定义一个名为 parallax 的函数，用于处理视差效果
    function parallax(e) {
        // 使用 querySelectorAll 选择页面中所有 class 为 .layer 的元素
        document.querySelectorAll('.layer').forEach(layer => {
            // 计算水平位移的值
            // e.pageX 是鼠标相对于页面左上角的水平位置
            // window.innerWidth 是窗口的宽度
            // 公式 (window.innerWidth - e.pageX * 2) / 2 用于计算视差效果的水平位移
            let x = (window.innerWidth - e.pageX * 2) / 2;
            
            // 将计算得到的位移值应用到元素的 transform 属性上，产生水平移动的效果
            layer.style.transform = `translateX(${x}px)`;
        });
    }
</script>
    
</body>
</html>

style.css

css 复制代码

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,700,900&display=swap');
*
{
 margin:0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Poppins',sans-serif;
}

section
{
position: relative;
width: 100%;
height: 100vh;
background: #222;
overflow: hidden;
}

section .textBox
{
    position:absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #333;
    clip-path: polygon(0 0,50% 0,50% 100%,0% 100%);

}

section h2,
section .textBox h2{
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 12em;
    line-height: 1em;
    color: #0488f5;
    -webkit-text-stroke: 0px #0876cf;
    cursor: pointer;

}

section h2
{
    -webkit-text-stroke: 2px #0876cf;
    color: transparent;

}

.skew1
{
    position: relative;
    top: 50px;
    transform:skewY(20deg);

}
.skew2
{
    position: relative;
    top: 50px;
    transform:skewY(-20deg);

}

clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%); 使用多边形剪切路径创建一个从左上角到右下角的斜切形状。

-webkit-text-stroke: 0px #0876cf; 为文本添加蓝色边框（0像素宽度），使其变成透明文本并有边框效果。

cursor: pointer; 将鼠标悬停时的光标设置为指针，表示该元素可点击。

color: transparent; 将文本颜色设置为透明，使文本本身不可见，仅显示边框效果。

transform: skewY(20deg); 和 transform: skewY(-20deg); 分别使元素在Y轴方向上倾斜20度和-20度，产生斜切效果。