纯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: 1.........完整代码请登录后点击上方下载按钮下载查看