人脸鼠标跟随效果-html代码-BFW代码库

人脸鼠标跟随效果

代码语言：html

所属分类：拖放

代码描述：可从鼠标的位置来模拟人脸的朝向，达到交互的效果

代码标签：效果

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

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

    <style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Redressed&display=swap");
        body {
            background-color: #02020f;
            color: white;
            font-size: 65.2%;
            text-align: center;
            overflow-x: hidden;
            /* Hide horizontal scrollbar */
        }
        body h1 {
            font-family: "Redressed";
            font-size: 5em;
            margin-bottom: 0;
        }
        body p {
            font-family: "Redressed";
            font-size: 3em;
            margin-top: 0;
        }
        body a {
            color: white;
            text-decoration: none;
            -webkit-transition: all .5s;
            transition: all .5s;
        }
        body a:hover {
            color: #b41818;
        }

        .canvas {
            max-height: 600px;
            height: 100%;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            position: relative;
        }
        .canvas svg {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        .canvas svg {
            position: relative;
        }
        .canvas svg.ears {
            top: -110px;
            -webkit-transform: translateZ(40px);
            transform: translateZ(40px);
        }
        .canvas svg.face {
            top: -380px;
            -webkit-transform: translateZ(60px);
            transform: translateZ(60px);
        }
        .canvas svg.wringles {
            top: -780px;
            -webkit-transform: translateZ(80px);
            transform: translateZ(80px);
        }
        .canvas svg.lips {
            top: -765px;
            -webkit-transform: translateZ(140px);
            transform: translateZ(140px);
        }
        .canvas svg.beard {
            top: -860px;
            -webkit-transform: translateZ(120px);
            transform: translateZ(120px);
        }
        .canvas svg.nose {
            top: -950px;
            -webkit-transform: translateZ(140px);
            transform: translateZ(140px);
        }
        .canvas svg.eyes {
            top: -1070px;
            -webkit-transform: translateZ(100px);
            transform: translateZ(100px);
        }
        .canvas svg.eyes .eye_lids {
            fill: rgba(87, 47, 28, 0);
            -webkit-animation: blink 5s infinite;
            animation: blink 5s infinite;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }
@-webkit-keyframes blink {
            0% {
                fill: rgba(87, 47, 28, 0);
            }
            5% {
                fill: #572f1c;
            }
            7% {
                fill: rgba(87, 47, 28, 0);
            }
        }
@keyframes blink {
            0% {
                fill: rgba(87, 47, 28, 0);
            }
            5% {
                fill: #572f1c;
            }
            7% {
                fill: rgba(87, 47, 28, 0);
            }
        }
        .canvas svg.glasses {
            top: -1120px;
            -webkit-transform: translateZ(140px);
            transform: translateZ(140px);
        }
        .canvas svg.eyebrows {
            top: -1230px;
            -webkit-transform: translateZ(100px);
            transform: translateZ(100px);
        }
    </style>

</head>
<body translate="no">
    <h1>"Bob's your uncle"</h1>
    <p>
        <a href="" target="">Illustration by thatAfro</a>
    </p>
    <div class="canvas" data-tilt data-perspective="3500" data-reverse="true" data-base="window">
        <svg class="hair" width="373px" height="338px">
            <path fill-rule="evenodd" fill="rgb(1, 16, 27)" d="M371.483,250.240 C369.491,379.490 187.400,327.143 187.400,327.143 C185.806,325.208 184.822,322.938 184.303,320.451 C165.608,323.207 17.526,342.050 1.701,250.240 C1.701,250.240 -9.324,102.639 52.976,50.184 C113.904,-1.115 183.552,0.089 186.592,0.167 C189.632,0.089 259.280,-1.115 320.208,50.184 C382.508,102.639 371.483,250.240 371.483,250.240 Z" />
        </svg>
        <svg class="ears" width="407px" height="135px">
            <path fill-rule="evenodd" fill="rgb(113, 65, 43)" d="M404.979,29.887.........完整代码请登录后点击上方下载按钮下载查看