<!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. Javascript 模块化指北

    前言 随着 Web 技术的蓬勃发展和依赖的基础设施日益完善,前端领域逐渐从浏览器扩展至服务端(Node.js),桌面端(PC.Android.iOS),乃至于物联网设备(IoT),其中 JavaScr ...

  2. ArcGis API for JavaScript学习——离线部署API

    ArcGis API for JavaScript开发笔记——离线部署API 以3.18版API为例: 在加载图图前引用GIS服务是必须的.有两种方法,一是在线引用,而是离线部署引用. 在线引用: & ...

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

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

  4. 【转】Python操作MongoDB

    Python 操作 MongoDB   请给作者点赞--> 原文链接 这篇文章主要介绍了使用Python脚本操作MongoDB的教程,MongoDB作为非关系型数据库得到了很大的宣传力度,而市面 ...

  5. 笔记-python-tutorial-8.errors and exceptions

    笔记-python-tutorial-8.errors and exceptions 1.      errors and exceptions 1.1.    syntax errors >& ...

  6. WPF实现QQ群文件列表动画（二）

    上篇(WPF实现QQ群文件列表动画(一))介绍了WPF实现QQ群文件列表动画的大致思路,结合我之前讲过的WPF里ItemsControl的分组实现,实现起来问题不大,以下是效果图: 其实就是个List ...

  7. Android开发——JVM、Dalvik以及ART的区别

    )预编译也可以明显改善电池续航,因为应用程序每次运行时不用重复编译了,从而减少了 CPU 的使用频率,降低了能耗.

  8. NopCommerce 导航菜单HTML静态处理以提高性能

    因网站要快速上线,有时候NopCommerce性能问题一直是困扰我们的最大因素,查找出来需要优化的部分代码进行修改重构是方法之一,我等非主流优化方式只为快速提高程序整体性能. 我以导航菜单为例,列出我 ...

  9. SetUnhandledExceptionFilter

    SetUnhandledExceptionFilter 设置未捕获异常处理 通常windows程序长时间运行,会发生各种问题,例如访问异常,内存溢出,堆栈破坏等. 这时候通常希望程序自己能增加处理,而 ...

  10. phpMyAdmin 4.7.x CSRF

    phpMyAdmin 4.7.x CSRF 场景:管理员登陆phpmyadmin之后,我试验了一下,发现只要是登陆session没有失效应该是都可以的, 利用,phpmyadmin可以通过get方式操 ...