(-1)写在前面

我用的是chrome49，这个idea是我在stackoverflow上回答问题时看到了，多谢这位同行，加深了我对很多技术点的理解，最近刚到北京，忙碌了一两天，在后续的日子里，会被安排面试，学习计划只能按工作流走了，做完这个要看一个特别酷的效果，好激动!

(0)效果演示

（1）实现方案

动画效果都是用animation做的

（2）知识点详解

a. border-radius:40px;

当div的长高都是80px的时候，div是一个圆形，其实长高都是60px的时候也是圆型，同理都是40、30也是圆型，当然案例中没有使用这种方式。具体实现在代码中说明

b. position:absolute;

当div使用此属性时，margin：0 auto是无效的，小球使用了这个属性，他的水平居中的实现方式在代码中说明

c. animation:down 1.5s infinite alternate;

I.1.5s 是动画的持续时间，因为延迟时间出现在持续时间的后面，所以只出现一个带s的参数是持续时间。

II.这里的alternate是指反向播放动画，比如说一个动画的帧如下

@keyframes down

{

from

{

…

}

95%

{

…

}

to

{

…

}

}

正向播放是from-95-to,反向播放to-95%-from

d. @keyframes down{95%{…}}

如果对应animate：down 1.5s;

动画在执行到95%就到达了最终状态，剩余5%的时间会用在回到初始状态。

(3)代码加解释

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset=utf-8>

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<title>为了生活</title>

<style type="text/css">

*

{

margin:0;

padding:0;

}

#lol

{

margin:0px auto;

top:100px;

width:80px;

height:80px;

background-color:red;

border-radius:40px;

position:absolute;

left:160px;

animation:down 1.5s infinite alternate;

}

@keyframes down

{

95%

{

width:15px;

height:15px;

border-radius:7.5px; /*保证div始终是个圆形*/

top:300px;

left:192.5px;/*保证小球始终水平居中*/

background:blue;

}

}

#frame

{

width:400px;

height:315px;

margin:100px auto;

border:1px red solid;

position:relative;

}

#head

{

width:400px;

height:100px;

text-align:center;

font-size:40px;

font-weight:bold;

line-height:100px;

background-image:-webkit-linear-gradient(90deg, #be1e1e, #be9b1e, #1ebe21, #1ebeb5, #1e24be, #ba1ebe, #be1e1e);

/*前面文章有提到*/

-webkit-background-clip: text;/*剪切背景颜色，只在文字上显示*/

-webkit-text-fill-color:transparent;/*文字填充为透明色*/

background-size:100% 700%;

/*前面文章有提到*/

animation:bc 6s infinite;

}

@keyframes bc

{

to

{

background-position:100% 100%;

/*前面文章有提到*/

}

}

</style>

<script type="text/javascript">

</script>

</head

<body>

<div id="frame">

<div id="head">Animatiom</div>

<div id="lol"></div>

</div>

</body>

</html>

HTML5CSS3特效-上下跳动的小球-遁地龙卷风的更多相关文章

  1. jquery toggle方法使用出错?请看这里-遁地龙卷风

    这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function() { alert(1);//1,3,5,7... },function( ...

  2. 逻辑思维面试题-java后端面试-遁地龙卷风

    (-1)写在前面 最近参加了一次面试,对笔试题很感兴趣,就回来百度一下.通过对这些题目的思考让我想起了建模中的关联,感觉这些题如果没接触就是从0到1,考验逻辑思维的话从1到100会更好,并且编程简易模 ...

  3. JQuery data方法的使用-遁地龙卷风

    (-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage ...

  4. JQuery simpleModal插件的使用-遁地龙卷风

    (0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simpl ...

  5. JQuery实战图片特效-遁地龙卷风

    (-1)写在前面 这个idea是我拷贝别人的,但代码是我自已一点点敲出来的,首先向这位前辈致敬,我用的是chrome49.firefox43.IE9,jquery3.0.言辞请结合代码,避免断章取意. ...

  6. 《p5.js创意游戏编程》第一课：跳动的小球

    准备:Hbuilder/vscode等可以编写网页的编辑器 如果想立刻上手也可以使用在线编译器p5.js官方在线编辑器,如果打不开也可以使用国内的一款在线编辑器jsrun编辑器,(第一课先使用jsru ...

  7. HTML中的标记-遁地龙卷风

    第三版 上一版本在未经验证的情况下,盲目的认为很多东西是那样,造成错误,非常抱歉. 0.什么是标记 <input type="checkbox" checked />& ...

  8. mysql SQL优化之嵌套查询-遁地龙卷风

    (-1) 写在前面 这篇随笔的数据使用的是http://blog.csdn.net/friendan/article/details/8072668#comments里的,里面有一些常见的select ...

  9. mysql练习题-查询同时参加计算机和英语考试的学生的信息-遁地龙卷风

    (-1)写在前面 文章参考http://blog.sina.com.cn/willcaty. 针对其中的一道练习题想出两种其他的答案,希望网友给出更多回答. (0) 基础数据 student表 +-- ...

随机推荐

  1. [No000071]C# 进制转换（二进制、十六进制、十进制互转）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. Android5.0资源 colorAccent,colorPrimary,colorPrimaryDark

  3. 微信小程序之知乎日报

    上一次的<微信小程序之小豆瓣图书>制作了一个图书的查询功能,只是简单地应用到了网络请求,其他大多数小程序应有的知识.而本次的示例是知乎日报,功能点比较多,页面也比上次复杂了许多.在我编写这 ...

  4. 微信快速开发框架（七）--发送客服信息，版本更新至V2.2 代码已更新至github

    在V2版本发布的博文中,已经介绍了大多数Api的用法,同时也收到了很多意见,其中发布了几个修正版本,修改了几个bug,在此感谢大家的使用,有了大家的支持,相信快速开发框架会越来越好,也会越来越完善的. ...

  5. sublime编辑器插件

    sublime---插件 http://www.cnblogs.com/dudumao/p/4054086.html sublime--- Emmet插件  使用方法 http://docs.emme ...

  6. 我的第一篇blog

    加入博客园两年多了,学习.从事编程也两年多了,一直是在网上找资料,都没有认真写写博客. 博客园里面好多功能都还不会用,今天起我也要在博客园写自己的blog了.感觉很高大上的样纸!!

  7. vim2

    一.光标控制命令   命令                   移动    k                   向上移一行    j                   向下移一行    h    ...

  8. 日常资料(TNB)

    http://www.med66.com/html/2005/5/hu47563183418550025733.html http://www.guokr.com/article/192045/ ht ...

  9. 优化Table View

    优化Table View Table view需要有很好的滚动性能,不然用户会在滚动过程中发现动画的瑕疵. 为了保证table view平滑滚动,确保你采取了以下的措施: 正确使用`reuseIden ...

  10. Linux系统概述

    1.Linux是一套免费使用 和自 由传播的类Unix操作系统. 这个系统是由世界各地的成千上万的程序员 设计和实现的.其目 的是建立不受任何商品化软件的版权制约的. 全世界都能自 由使用的Unix兼 ...