div+css实现北极熊漂浮冰块动画效果代码-html代码-BFW代码库

div+css实现北极熊漂浮冰块动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现北极熊漂浮冰块动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
        background-color:#c7f1fd
    }
    .container {
        top:-250px;
        left:0;
        position:absolute;
        animation:float 7s infinite
    }
    @keyframes float {
        0% {
        left:50px
    }
    50% {
        left:-100px
    }
    100% {
        left:50px
    }
    }.water {
        width:2400px;
        height:600px;
        background:#8de3fb;
        position:absolute;
        top:500px;
        left:-50px;
        z-index:-9
    }
    .bear {
        position:relative
    }
    .head {
        width:100px;
        height:90px;
        background:#f8f8f8;
        border-radius:20px 20px 20px 20px;
        position:relative;
        left:400px;
        box-shadow:3px 3px 20px #e8e7e7;
        animation:nod 5s infinite
    }
    @keyframes nod {
        0% {
        top:200px
    }
    25% {
        top:190px
    }
    50% {
        top:175px
    }
    75% {
        top:190px
    }
    100% {
        top:200px
    }
    }.jaw {
        width:82px;
        height:82px;
        background:#f8f8f8;
        border-radius:20px 20px 20px 20px;
        transform:rotate(45deg);
        position:relative;
        left:9px;
        top:33px;
        box-shadow:10px 10px 10px #e8e7e7
    }
    .nose {
        width:25px;
        height:25px;
        background:#464646;
        border-radius:8px 8px 8px 8px;
        transform:rotate(45deg);
        position:relative;
        top:35px;
        left:35px
    }
    .eyes {
        width:8px;
        height:8px;
        border-radius:100%;
        background:#464646;
        position:absolute
    }
    .pos1 {
        position:absolute;
        top:35px;
        left:5px
    }
    .pos2 {
        position:absolute;
        top:5px;
        left:35px
    }
    .ears {
        width:30px;
        height:30px;
        border-radius:50% 0 0 50%;
        background:#d7d7d7;
        position:relative;
        border:8px solid #f8f8f8;
        z-index:-1
    }
    .posi1 {
        position:absolute;
        left:-15px;
        bottom:62px;
        transform:rotate(45deg)
    }
    .posi2 {
        position:absolute;
        left:75px;
        bottom:62px;
        transform:rotate(135deg)
    }
    .bearbody {
        width:300px;
        height:180px;
        border-radius:100px;
        background:#f8f8f8;
        position:relative;
        left:440px;
        top:120px;
        z-index:-2
    }
    .leg {
        width:50px;
        height:150px;
        border-radius:0 0 20px 0;
        background:#f8f8f8
    }
    .leg1 {
        width:50px;
        height:150px;
        background:#a4a4a4;
        z-index:-3!important
    }
    .paw1 {
        width:30px;
        height:35px;
        border-radius:25px 0 0 0;
        background:#f8f8f8;
        position:relative;
        top:115px;
        right:22px
    }
    .paw2 {
        wi.........完整代码请登录后点击上方下载按钮下载查看