×

【CSS3动画】生命在于运动

作者:shiji2018.03.20来源:Web前端之家浏览:1044评论:0
关键词:css3动画
微信公众号

微信公众号

用CSS3制作一个跑动的动画,生命在于运动啊。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        @keyframes leftMove {
            from{
                transform: rotate(40deg);
            }
            to{
                transform: rotate(-50deg);
            }
        }
        @keyframes rightMove {
            from{
                transform: rotate(-50deg);
            }
            to{
                transform: rotate(40deg);
            }
        }
        @keyframes bodyMove  {
            from{
                left:0;
            }
            to{
                left: 80%;
            }
        }
        body{
            overflow: hidden;
            min-height: 400px;
            width: 100%;
            background: linear-gradient(0deg, #999, #fff);
            background-repeat: no-repeat;
        }
        .ab>div {
            position: absolute;
            left: 50%;
            background-color: #111;
        }
        .cont {
            width: 300px;
            height: 300px;
            position: absolute;
            animation: bodyMove 9s  infinite;
            animation-timing-function: linear;
        }
        .head{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-left: -20px;
        }
        .body{
            width: 10px;
            height: 150px;
            top:50px;
        }
        .limb{
            transform-origin: 0% 0%;
        }
        .hand{
            width: 6px;
            height: 70px;
            top:80px
        }
        .leg{
            width:  8px;
            height: 80px;
            top:200px;

        }
        .left{
            transform: rotate(-40deg);
        }
        .right{
            transform: rotate(40deg);
        }
        .leg.left , .hand.left{
            animation: leftMove 0.5s  infinite ;
        }
        .leg.right , .hand.right{
            animation: rightMove 0.5s  infinite ;
        }
        .hand::after{
            display: block;
            content: ' ';
            width: 6px;
            height: 50px;
            position: absolute;
            top: 95%;
            background: #111;
            transform: rotate(-20deg);
            left: -15%;
            transform-origin: 0% 0%;
        }
        .leg i {
            display: block;
            content: ' ';
            width: 8px;
            height: 50px;
            position: absolute;
            top: 95%;
            background: #111;
            transform: rotate(30deg);
            left: 30%;
            transform-origin: 0% 0%;

        }
        .leg i::before{
            display: block;
            content: ' ';
            width: 8px;
            height: 18px;
            position: absolute;
            top: 100%;
            background: #111;
            transform: rotate(-70deg);
            transform-origin: 0% 0%;
            border-bottom-right-radius: 80%;
        }
    </style>
</head>
<body>
    <div class="cont ab">
        <div class="head"></div>
        <div class="body "></div>
        <div class="limb hand left"></div>
        <div class="limb hand right"></div>
        <div class="limb leg left"><i></i></div>
        <div class="limb leg right"><i></i></div>
    </div>

</body>
</html>
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/css3sdfjsdklfjsldkjfl.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    谢谢楼主。。。。。。。。...

  • weblft

    表示不想加班,但是很难!!!...

  • 前端菜鸟

    也不全是我总结的哟,只是学习,大部分是来自大神的杰作。...

  • admin

    感觉不像前端菜鸟,学术很专啊,加油!...

  • admin

    可以的,底部有申请连接的。...

  • BudgetVM优惠码

    朋友交换链接吗...

  • 问我

    我...

  • admin

    是的,很难,可以笔记下来,便于查阅。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero