找回密码
当前位置：前端开发者 > CSS > 正文

CSS实现动画

2018-09-26 21:10:28 分类：CSS 阅读(154) 评论(0)

web前端开发需要美术功底吗 前端开发需要考证吗 前端开发需要c语言吗

html 代码

<!DOCTYPE html>
<head>
    <title>Rock Man</title>
    <style>
        .rock-man {
            width: 400px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid #000;
            position: relative;
        }
        .man-head {
            position: absolute;
            top: 8px;
            left: 100px;
            width: 200px;
            height: 200px;
            animation: head-move 0.5s ease alternate infinite;
        }
        @keyframes head-move {
            0% {
                left: 80px;
                transform: rotateZ(-25deg);
            }
            100% {
                left: 120px;
                transform: rotateZ(25deg);
            }
        }
        .man-face {
            width: 200px;
            height: 180px;
            background: #c3c17b;
            border-radius: 50% 50% 40% 40%;
            z-index: 1;
            border: 1px solid #ccc;
        }
        .man-eye-left {
            position: absolute;
            top: 80px;
            left: 30px;
            width: 15px;
            height: 15px;
            background: #000;
            border-radius: 50%;
            z-index: 1;
        }
        .man-eye-right {
            position: absolute;
            top: 80px;
            left: 155px;
            width: 15px;
            height: 15px;
            background: #000;
            border-radius: 50%;
            z-index: 1;
        }
        .man-mouth {
            position: absolute;
            top: 80px;
            left: 20px;
            width: 150px;
            height: 60px;
            border-bottom: 5px solid #905218;
            border-left: 5px solid #c3c17b;
            border-right: 5px solid #c3c17b;
            border-radius: 50%;
        }
        .man-body {
            width: 0;
            height: 0;
            margin: 100px auto auto auto;
            border-bottom: 300px solid #c3c17f;
            border-left: 150px solid transparent;
            border-right: 150px solid transparent;
        }
        .man-arm-left {
            position: absolute;
            top: 240px;
            left: 131px;
            width: 50px;
            height: 100px;
            background: linear-gradient(#c3c17f, #b3ae41);
            border-radius: 50% 0 50% 50%;
            transform: rotateZ(-35deg);
            box-shadow: -1px 1px 3px -2px;
        }
        .man-arm-right {
            position: absolute;
            top: 240px;
            left: 219px;
            width: 50px;
            height: 100px;
            background: linear-gradient(#c3c17f, #b3ae41);
            border-radius: 0 50% 50% 50%;
            transform: rotateZ(35deg);
            box-shadow: 1px 1px 3px -2px;
        }
        .man-foot-left {
            position: absolute;
            top: 280px;
            left: 10px;
            width: 120px;
            height: 150px;
            background: #c3c17f;
            border-radius: 50% 50% 45% 45%;
            border: 1px solid #ccc;
            transform: rotateZ(-20deg);
            box-shadow: -2px 1px 3px;
        }
        .man-foot-right {
            position: absolute;
            top: 280px;
            left: 260px;
            width: 120px;
            height: 150px;
            background: #c3c17f;
            border-radius: 50% 50% 45% 45%;
            border: 1px solid #ccc;
            transform: rotateZ(20deg);
            box-shadow: -2px 3px 1px -1px;
        }
    </style>
</head>
<body>
    <div class=”rock-man”>
        <div class=”man-head”>
            <div class=”man-face”>
                <div class=”man-eye-left”></div>
                <div class=”man-eye-right”></div>
                <div class=”man-mouth”></div>
            </div>
        </div>
        <div class=”man-body”></div>
        <div class=”man-arm-left”></div>
        <div class=”man-arm-right”></div>
        <div class=”man-foot-left”></div>
        <div class=”man-foot-right”></div>
    </div>
</body>
</html>

前端开发需要数据结构 从事前端开发需要考研吗 银行需要前端开发吗

» 本文来自：前端开发者 » 《CSS实现动画》
» 本文链接地址：https://www.rokub.com/5865.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论