jquery+css实现女孩头部跟随鼠标移动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：jquery+css实现女孩头部跟随鼠标移动动画效果代码

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

<html>
<head>
    <style>
@import url("https://fonts.googleapis.com/css?family=Archivo+Black");
        html, body {
            height: 100%;
            width: 100%;
            background: #d43959;
            overflow: hidden;
            padding: 0;
            margin: 0;
        }

        .container {
            text-align: center;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 200px;
        }
        .container div {
            position: absolute;
        }
        .container .me {
            left: 0;
            position: absolute;
            right: 0;
            margin: auto;
            width: 80px;
            height: 160px;
        }
        .container .me .head {
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
            width: 70px;
            height: 90px;
            background: #ffd3c1;
            -moz-border-radius: 100px;
            -webkit-border-radius: 100px;
            border-radius: 100px;
            top: 10px;
            left: 5px;
        }
        .container .me .head .bangs {
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
            height: 50px;
            width: 94%;
            background: #111427;
            content: "";
            position: absolute;
            -moz-border-radius: 100px 100px 10px 10px;
            -webkit-border-radius: 100px;
            border-radius: 100px 100px 10px 10px;
            top: -12px;
            left: 3px;
        }
        .container .me .look-left.head {
            width: 70px;
            left: -10px;
        }
        .container .me .look-left.head .bangs {
            width: 106%;
            left: -7px;
        }
        .container .me .look-right.head {
            width: 70px;
            left: 15px;
        }
        .container .me .look-right.head .bangs {
            width: 106%;
            left: 5px;
        }
        .container .me .look-down.head {
            height: 90px;
            top: 20px;
            width: 70px;
            left: 5px;
            -moz-transform-origin: bottom center 50%;
            -ms-transform-origin: bottom center 50%;
            -webkit-transform-origin: bottom center 50%;
            transform-origin: bottom center 50%;
        }
        .container .me .look-down.head .bangs {
            height: 80px;
            top: -32px;
        }
        .container .me .look-up.head {
            height: 90px;
            top: 0px;
            width: 70px;
            left: 5px;
            -moz-transform-origin: bottom center 50%;
            -ms-transform-origin: bottom center 50%;
            -webkit-transform-origin: bottom center 50%;
            transform-origin: bottom center 50%;
        }
        .container .me .look-up.head .bangs {
            height: 40px;
            top: -12px;
        }
        .container .me .look-down-right.head {
            top: 20px;
            left: 25px;
            width: 70px;
            -moz-transform: rotate(10deg);
            -ms-transform: rotate(10deg);
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
            -moz-transform-origin: bottom left 50%;
            -ms-transform-origin: bottom left 50%;
            -webkit-transform-origin: bottom left 50%;
            transform-origin: bottom left 50%;
        }
        .container .me .look-down-right.head .bangs {
            height: 60px;
            width: 106%;
        }
        .container .me .look-up-right.head {
            height: 90px;
            top: 0px;
            width: 70px;
            left: 15px;
            -moz-transform-origin: bottom center 50%;
            -ms-transform-origin: bottom center 50%;
            -webkit-transform-origin: bottom center 50%;
            transform-origin: bottom center 50%;
            -moz-transform: rotate(-15deg);
            -ms-transform: rotate(-15deg);
            -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
        }
        .container .me .look-up-right.head .bangs {
            width: 105%;
            height: 40px;
            top: -12px;
            left: 5px;
        }
        .container .me .look-down-left.head {
            top: 20px;
            left: -15px;
            width: 70px;
            -moz-transform: rotate(-10deg);
            -ms-transform: rotate(-10deg);
            -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
            -moz-transform-origin: bottom right 50%;
            -ms-transform-origin: bottom right 50%;
            -webkit-transform-origin: bottom right 50%;
            transform-origin: bottom right 50%;
        }
        .container .me .look-down-left.head .bangs {
            height: 60px;
            width: 106%;
            left: -10px;
        }
        .container .me .look-up-left.head {
            height: 90px;
            top: 0px;
            width: 70px;
            left: -10px;
            -moz-transform-origin: bottom center 50%;
            -ms-transform-origin: bottom center 50%;
            -webkit-transform-origin: bottom center 50%;
            transform-origin: bottom center 50%;
            -moz-transform: rotate(15deg);
            -ms-transform: rotate(15deg);
            -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
        }
        .container .me .look-up-left.head .bangs {
            width: 105%;
            height: 40px;
            top: -12px;
            left: -10px;
        }
        .container .me .neck {
            height: 60px;
            width: 20px;
            position: absolute;
            -moz-border-radius: 0px 0px 100px 100px;
            -webkit-border-radius: 0px;
            border-radius: 0px 0px 100px 100px;
            background: #ffd3c1;
            top: 60px;
            left: 30px;
            overflow: hidden;
        }
        .container .me .neck:before {
            content: "";
            position: absolute;
            width: 60px;
            height: 60px;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            top: -12px;
            background: #ebbfad;
            left: -18px;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.........完整代码请登录后点击上方下载按钮下载查看