css绘制一个小企鹅在雪地的效果代码-html代码-BFW代码库

css绘制一个小企鹅在雪地的效果代码

代码语言：html

所属分类：动画

代码描述：css绘制一个小企鹅在雪地的效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
.box {
        position: relative;
        margin: auto;
        display: block;
        margin-top: 8%;
        width: 600px;
        height: 420px;
        background: none;
        background: linear-gradient(to bottom, #33ccff 0%, #ffffff 100%);
        border: ;
}

.body {
        background: ;
        height: 100%;
}

.head {
        background-color: black;
        width: 270px;
        height: 300px;
        top: 16.5%;
        left: 35%;
        display: inline-block;
        position: absolute;
        border-radius: 60% 55% 30% 30%;
}

.head2 {
        background-color: white;
        width: 230px;
        height: 260px;
        top: 9%;
        left: 8%;
        display: inline-block;
        position: absolute;
        border-radius: 55% 55% 30% 30%;
}

.arm-left {
        width: 50px;
        height: 100px;
        background-color: #000;
        position: absolute;
        top: 45%;
        right: 95%;
        animation-name: arms;
        animation-duration: 4s;
        border-radius: 1990% 100% 1700% 100%;
        -webkit-animation: action 1s infinite alternate;
        animation: action 1s infinite alternate;
}

.arm-right {
        width: 50px;
        height: 100px;
        background-color: #000;
        position: absolute;
        top: 43%;
        left: 93%;
        border-radius: 100% 1990% 100% 1700%;
        animation-name: arms;
        animation-duration: 4s;
        -webkit-animation: action 1s infinite alternate;
        animation: action 1s infinite alternate;
}

.blush {
        width: 30px;
        height: 20px;
        background-color: #ffc0cb;
        border-radius: 50%;
        position: absolute;
        top: -3%;
        left: 188%;
        z-index: 3;
}

.blush2 {
        width: 30px;
        height: 20px;
        background-color: #ffc0cb;
        border-radius: 50%;
        position: absolute;
        top: 1%;
        left: -135%;
        z-index: 3;
}

.eye-left {
        position: absolute;
        background: black;
        width: 10%;
        height: 10%;
        top: 35%;
        left: 31%;
        border-radius: 50%;
        z-index: 3;
}

.eye-right {
        position: absolute;
        background: black;
        width: 10%;
        height: 10%;
        top: 35%;
        right: 31%;
        border-radius: 50%;
        z-index: 3;
}

.pupil {
        position: absolute;
        width: 38%;
        height: 35%;
        top: 35%;
        left: 20%;
        border-radius: 50%;
        background: white;
}

.nose {
        width: 55px;
        height: 30px;
        background-color: #feb236;
        border-radius: 90% 90% 80% 90%;
        position: absolute;
        .........完整代码请登录后点击上方下载按钮下载查看