<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Robot</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div id="robot">

        <div class="piston"><!--外框-->

            <div class="block"><!--字母框-->

                A

                <div class="arm"></div><!--摆杆-->

            </div>

            <div class="rotator"><!--低圈-->

            </div>

        </div>

        <div class="piston"><!--外框-->

            <div class="block"><!--字母框-->

                A

                <div class="arm"></div><!--摆杆-->

            </div>

            <div class="rotator"><!--低圈-->

            </div>

        </div>

        <div class="piston"><!--外框-->

            <div class="block"><!--字母框-->

                A

                <div class="arm"></div><!--摆杆-->

            </div>

            <div class="rotator"><!--低圈-->

            </div>

        </div>

        <div class="piston"><!--外框-->

            <div class="block"><!--字母框-->

                A

                <div class="arm"></div><!--摆杆-->

            </div>

            <div class="rotator"><!--低圈-->

            </div>

        </div>

        <div class="piston"><!--外框-->

            <div class="block"><!--字母框-->

                A

                <div class="arm"></div><!--摆杆-->

            </div>

            <div class="rotator"><!--低圈-->

            </div>

        </div>

    </div>

</body>

</html>

css

/*定义动画*/

/*上下摆动*/

@-webkit-keyframes topbottom{

    0% { margin-top:; }

    50% { margin-top: 80px; }

    100% { margin-top:; }

}

@keyframes topbottom{

    0% { margin-top:; }

    50% { margin-top: 80px; }

    100% { margin-top:; }

}

/*左右摇摆*/

@-webkit-keyframes rightleft {

    0% { -webkit-transform: rotate(0); }

    25% { -webkit-transform: rotate(-18deg); }

    50% { -webkit-transform: rotate(0); }

    75% { -webkit-transform: rotate(18deg); }

    100% { -webkit-transform: rotate(0); }

}

@keyframes rightleft {

    0% { -webkit-transform: rotate(0); }

    25% { -webkit-transform: rotate(-18deg); }

    50% { -webkit-transform: rotate(0); }

    75% { -webkit-transform: rotate(18deg); }

    100% { -webkit-transform: rotate(0); }

}

*{

    margin:;

    padding:;

    list-style: none;

}

img{

    border:none;

}

body{

    text-align: center;

    margin: 60px 0 0;

    background:linear-gradient(to bottom, #333, tomato);

    /*渐变 上到下*/

}

html{

    height: 100%;

}

#robot{

    position: absolute;

    width: 540px;

    height: 250px;

    margin: auto;

    left:;

    top:;

    bottom:;

    right:;

    color: #444;

    font-weight:;

    text-shadow:0 -1px 1px rgba(0,0,0,0.7),0 1px 1px rgba(255,255,255,0.4);

    /*投影*/

    font-family: 'Oswald', sans-serif;

}

.piston{

    float: left;

    margin-right: 10px;

    position: relative;

    width: 100px;

    height: 250px;

    background: rgba(0,0,0,0.1);

    border-radius: 10px 10px 50px 50px;

    box-shadow: 0 -4px 0 rgba(0,0,0,0.2), 0 4px 0 rgba(255,255,255,0.2);

}

.piston:last-child{

    margin:;

}

.block{

    position: relative;

    width: 100px;

    height: 60px;

    line-height: 60px;

    background: #555;

    border-radius: 10px;

    animation:topbottom 1.2s cubic-bezier(0.5,0,0.5,1) infinite;

    /*cubic-bezier动画方式(曲线)*/

    -webkit-animation:topbottom 1.2s cubic-bezier(0.5,0,0.5,1) infinite;

    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2), inset 0 4px 0 rgba(255,255,255,0.2)

}

.piston:nth-child(1) .block { -webkit-animation-delay: 0s; animation-delay: 0s; }

.piston:nth-child(2) .block { -webkit-animation-delay: .1s; animation-delay: .1s; }

.piston:nth-child(3) .block { -webkit-animation-delay: .2s; animation-delay: .2s; }

.piston:nth-child(4) .block { -webkit-animation-delay: .3s; animation-delay: .3s; }

.piston:nth-child(5) .block { -webkit-animation-delay: .4s; animation-delay: .4s; }

.arm{

    position: absolute;

    top:50%; left:50%;

    margin: -10px 0 0 -10px;

    width: 20px;

    height: 150px;

    background: #555;

    border-radius: 10px;

    box-shadow: inset 0 -22px 0 rgba(0,0,0,.2);

    z-index: -110;

    -webkit-transform-origin: center 10px;

    -webkit-animation: arm 1.2s linear infinite;

    -webkit-animation-delay: inherit;

    transform-origin: center 10px;

    animation: rightleft 1.2s linear infinite;

    animation-delay: inherit;

}

.arm:before,.arm:after{

    content:"";

    position: absolute;

    left:;

    right:;

    height: 16px;

    width: 16px;

    border-radius: 50%;

    margin: 2px;

    background:#eee;

}

.arm:before{

    top:;

}

.arm:after{

    bottom:;

}

.rotator{

    position: absolute;

    bottom:;

    width: 100px;

    height: 100px;

    border:20px solid rgba(0,0,0,0.1);

    box-sizing:border-box;

    z-index: -110;

    border-radius: 50%;

}

css3动画、边框、投影知识的更多相关文章

  1. 鼠标悬停显示CSS3动画边框

    效果体验:http://keleyi.com/keleyi/phtml/css3/14.htm 以下是代码: <!DOCTYPE html> <html xmlns="ht ...

  2. css3动画--超级基础知识

    这么乱的笔记....供自己阅读!

  3. CSS3动画详解(结合实例)

    一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...

  4. 6种炫酷的CSS3按钮边框动画特效

    6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...

  5. CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

  6. CSS3动画基本的转换和过渡

    理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x ...

  7. CSS3动画那么强，requestAnimationFrame还有毛线用？

    一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,万种迷人的requestAnimationFrame,呵呵呵呵.很高兴和大家见面,请多 ...

  8. CSS3动画那么强，requestAnimationFrame还有毛线用--摘抄

    CSS3动画那么强,requestAnimationFrame还有毛线用? 这篇文章发布于 2013年09月30日,星期一,19:12,归类于 web综合. 阅读 197124 次, 今日 84 次 ...

  9. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  10. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

随机推荐

  1. ActiveMQ RabbitMQ RokcetMQ Kafka实战 消息队列中间件视频教程

    附上消息队列中间件百度网盘连接: 链接: https://pan.baidu.com/s/1FFZQ5w17e1TlLDSF7yhzmA 密码: hr63

  2. Ansible学习 Inventory文件

    Ansible可同时操作属于一个组的多台主机,组与主机之间关系配置在inventory文件中,inventory默认的配置文件是/etc/ansible/hosts 1.在/etc/ansible/h ...

  3. proc的妙用

    今天在在公司做网络驱动开发测试时,随机包出现收包计数停止的现象,当时怀疑是DMA rx buffer不足导致,想通过对比收发包正常和收发包不正常是DMA相关寄存器的情况. 后跟踪代码,若在收发包里面增 ...

  4. A1055 The World's Richest（25 分）

    A1055 The World's Richest(25 分) Forbes magazine publishes every year its list of billionaires based ...

  5. C语言中strtod()函数的用法详解

    函数原型: #include <stdlib.h> double strtod(const char *nptr, char **endptr); C语言及C++中的重要函数. 名称含义 ...

  6. windows下pip安装python模块时报错【转】

    windows下pip安装python模块时报错总结 请给作者点赞--> 原文链接 1 权限问题 C:\Users\ljf>pip install xlwt Exception: Trac ...

  7. Python基础闯关失败总结

    对列表进行创建切片增删改查 对列表进行创建 L1 = []  # 定义L1 为一个空列表 List() #创建List 空列表 对列表进行查询 L2 = ['a','b','c','d','a','e ...

  8. Python 内置函数isinstance

    isinstance 用来判断对象的类型 isinstance(对象,类型/类型集合) 如果属于 返回True 不属于返回 False >>> a = 1 >>> ...

  9. Linux服务器管理员必备Linux命令TOP5

    Linux桌面环境的界面友好度.图形性能及附件工具已经大幅进化,然而Linux服务器却还没有能达到这一步. 作为系统管理员必须熟练掌握Linux命令.Linux命令的内容很多,其中的一些TOP命令对于 ...

  10. 极简Node教程-七天从小白变大神（一：你需要Express）

    如果说用一句话来概括Node那就是:它开启了JavaScript服务器端语言. Node系列的文章并不会从一开始长篇概论的讲Node的历史,安装,以及其他很琐碎的事情.只会专门介绍关于Node或者准确 ...