纯css布局绘制男子举重健身动画效果-html代码-BFW代码库

纯css布局绘制男子举重健身动画效果

代码语言：html

所属分类：动画

代码描述：纯css布局绘制男子举重健身动画效果

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

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
    * {
    margin: 0;
    padding: 0;
}


body {
    background: #e3edf7;
    font-family: sans-serif;
}

.container {
    position: relative;
    margin: 20px auto;
    border-radius: 20px;
    background: #435175;
    width: 800px;
    height: 600px;

}
.man {
    position: absolute;
    top: 40%;
    left: 25%;
    width: 55%;
    height: 45%;
    z-index: 3;
}


.man .legs {
    position: absolute;
    width: 20%;
    height: 64%;
    bottom: 4%;
}

.man .legs .leg {
    position: absolute;
    width: 20%;
    height: 100%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
.man .legs .leg::after {
    content: "";
    background: #53313e;
    position: absolute;
    width: 100%;
    height: 5%;
    bottom: 0;
}
.man .legs .leg::before {
    content: "";
    background: #53313e;
    position: absolute;
    width: 50%;
    height: 5%;
    bottom: 3px;
    left: -12%;
    border-radius: 50%;
}

.man .legs .one {
    background: #ffaf72;
    left: 20%;
    z-index: 3;

}
.man .legs .two {
    background: #f78d5c;
    left: 10%;
    z-index: 2;
    transform: rotate(10deg);
    /* transform-origin: bottom; */
}

.man .legs .thy {
    z-index: 2;
    position: absolute;
    height: 12%;
    width: 120%;
    left: 24%;
    background: #649740;
}

.man .legs .thy::after {
    content: "";
    position: absolute;
    border-top-left-radius: 40%;
    border-bottom-left-radius: 40%;
    top: -70%;
    height: 240%;
    width: 25%;
    right: -20%;
    background-color: #649740;
}

.man .main-parts {
    position: absolute;
    left: 33%;
    width: 40%;
    height: 30%;
    top: 15%;
}
.man .main-parts .upper {
    position: absolute;
    height: 30%;
    width: 48%;
    bottom: 36%;
    background: #e75a46;
    z-index: 1;
    transform: rotate(-5deg);
}

.man .main-parts .upper .above {
    
    position: absolute;
    right: 0;
    background: #e75a46;
    width: 150%;
    height: 331%;
    border-radius: 50%;
    right: -104%;
    top: -92%;

}
.man .main-parts .lower {
    position: absolute;
    height: 40%;
    width: 100%;
    bottom: 0%;
    background: #cf4444;
    z-index: 2;

}
.man .main-parts .lower::after {
    content: "";
    position: absolute;
    height: 201%;
    width: 56%;
    right: 0;
    top: -99%;
    border-radius: 100%;
    background: #cf4444;
}
.man .hand {
    position: absolute;
    right: 28%;
    height: 40%;
    width: 9%;
    border-radius: 20px;
    background: #ffaf72;
    z-index: 5;
    top: 12%;
    animation: animate-hand 2s infinite;
}

.man  .weight {
    position: absolute;
    height: 30%;
    width: 18%;
    border-radius: 50%;
    border: 4px solid black;
    left: 57%;
    top: -10%;
    background: #e75a46;
    z-index: 10;
    animation: animate-hand 2s infinite;

}

.man  .weight:after {
    content: "";
    background-color: #cf4444;
    position: absolute;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 }

.man  .weight:before {
    content: "";
    background-color: #5aada7;
    position: absolute;
    width: 20%;
    height: 20%;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

@keyframes animate-hand {
    50% {
        transform: translateY(-40px);
    }
}

.man .arm {
    position: absolute;
    right: 28%;
    width: 10%;
    height: 10%;
    z-index: 5;
    top: 88px;
    background: #f78d5c;
    border-radius: 30px 5px 5px 30px;
}
.man .neck {
    position: absolute;
    left: 73%;
    width: 20%;
    height: 12%;
    background: #f78d5c;
    top: 32%;
    overflow: hidden;
}

.man .neck .head {
    position: absolute;
    right: 0;
    bottom: -8%;
    width: 69%;
    height: 166%;
    border-radius: 50%;
    background: #ffaf72;
}
.man .nose {
    width: 10%;
    height: 10%;
    position: absolute;
    right: 5%;
    top: 21%;
    display: .........完整代码请登录后点击上方下载按钮下载查看