关于前端:CSS实现文字镂空效果炫酷背景效果

44次阅读

共计 826 个字符，预计需要花费 3 分钟才能阅读完成。

css3 中有一个 mix-blend-mode 的 screen 混合模式，能够轻松实现镂空文字效果。背景咱们能够固定定位设置一个动态图片，gif 动态图，视频 video，svg 动画等等。

<!DOCTYPE html>
<html >
<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 {
        margin: 0;
        padding: 0;
    }
    .test-title {
        width: 100vw;
        height: 100vh;
        background: #ffffff; /* 要害加了背景色能力混合 */
        text-align: center;
        font-size: 100px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 800;
        position: absolute;
        margin: auto;
        top: 0;
        z-index: 1;
        padding-top: 20%;
        mix-blend-mode: screen; /* 要害 screen 混合模式 */
    }
</style>
<body>
    <!--video 视频做动静炫酷背景 -->
    <video style="width: 100%;" src="./testvideo.mp4" loop autoplay muted="muted">
    </video>
    <div class="test-title">
        Hello World
        Hello World
        Hello World
    </div>
</body>
</html>

正文完