纯css文字字母悬浮放大效果-html代码-BFW代码库

纯css文字字母悬浮放大效果

代码语言：html

所属分类：悬停

代码描述：纯css文字字母悬浮放大效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        /* google fonts */
@import url(https://fonts.googleapis.com/css2?family=Arvo:wght@700&family=Indie+Flower&family=Playfair+Display:wght@600&family=Righteous&family=Rowdies&display=swap);

        * {
            transition: all 0.3s ease;
        }

        body {
            font-family: "helvetica", sans-serif;
            font-weight: bold;
            font-size: 10rem;
            color: white;
            background: black;
        }

        .wrapper {
            width: 100%;
            margin: auto;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .m:hover,
        .e:hover,
        .g:hover,
        .a:hover,
        .n:hover,
        .ex:hover {
            padding: 0 20px;
            cursor: none;
        }

        .m {
            color: white;
            font-family: "Righteous", cursive;
        }

        .e {
            color: white;
            font-family: "Indie Flower", cursive;
        }

        .e:hover {
            color: yellow;
        }

        .g {
            color: white;
            font-family: "Arvo", serif;
        }

        .a {
            color: white;
            font-family: "Playfair Display", serif;
        }

        .n {.........完整代码请登录后点击上方下载按钮下载查看