HTML5CSS3特效-上下跳动的小球-遁地龙卷风
(-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特效-上下跳动的小球-遁地龙卷风的更多相关文章
- jquery toggle方法使用出错?请看这里-遁地龙卷风
这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function() { alert(1);//1,3,5,7... },function( ...
- 逻辑思维面试题-java后端面试-遁地龙卷风
(-1)写在前面 最近参加了一次面试,对笔试题很感兴趣,就回来百度一下.通过对这些题目的思考让我想起了建模中的关联,感觉这些题如果没接触就是从0到1,考验逻辑思维的话从1到100会更好,并且编程简易模 ...
- JQuery data方法的使用-遁地龙卷风
(-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage ...
- JQuery simpleModal插件的使用-遁地龙卷风
(0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simpl ...
- JQuery实战图片特效-遁地龙卷风
(-1)写在前面 这个idea是我拷贝别人的,但代码是我自已一点点敲出来的,首先向这位前辈致敬,我用的是chrome49.firefox43.IE9,jquery3.0.言辞请结合代码,避免断章取意. ...
- 《p5.js创意游戏编程》第一课：跳动的小球
准备:Hbuilder/vscode等可以编写网页的编辑器 如果想立刻上手也可以使用在线编译器p5.js官方在线编辑器,如果打不开也可以使用国内的一款在线编辑器jsrun编辑器,(第一课先使用jsru ...
- HTML中的标记-遁地龙卷风
第三版 上一版本在未经验证的情况下,盲目的认为很多东西是那样,造成错误,非常抱歉. 0.什么是标记 <input type="checkbox" checked />& ...
- mysql SQL优化之嵌套查询-遁地龙卷风
(-1) 写在前面 这篇随笔的数据使用的是http://blog.csdn.net/friendan/article/details/8072668#comments里的,里面有一些常见的select ...
- mysql练习题-查询同时参加计算机和英语考试的学生的信息-遁地龙卷风
(-1)写在前面 文章参考http://blog.sina.com.cn/willcaty. 针对其中的一道练习题想出两种其他的答案,希望网友给出更多回答. (0) 基础数据 student表 +-- ...
随机推荐
- 将对象转化成json字符串
public static String getObjectString(Object object){ String ObjectString = null; try { ObjectMapper ...
- iOS Webview 实现修改javascript confirm 和 alert
贴代码: @interface UIWebView (JavaScriptAlert) -(void) webView:(UIWebView *)sender runJavaScriptAlertPa ...
- （原创）JAVA多线程一传统多线程
一,多线程 多线程是提高程序效率,避免资源浪费的很好的解决方案,下面来慢慢的介绍多线程的一些基本知识,而这些是晋级高级不可或缺的一部分 1,Thread类 类实现多线程需要实现Runnable接口,我 ...
- css的命名规则
本文转载自谈笑涧<css的命名规则> 操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.35 ...
- unity导出工程导入到iOS原生工程中详细步骤
一直想抽空整理一下unity原生工程导入iOS原生工程中的详细步骤.做iOS+vuforia+unity开发这么长时间了.从最初的小小白到现在的小白.中间趟过了好多的坑.也有一些的小小收货.做一个喜欢 ...
- linux perf - 性能测试和优化工具
Perf简介 Perf是Linux kernel自带的系统性能优化工具.虽然它的版本还只是0.0.2,Perf已经显现出它强大的实力,足以与目前Linux流行的OProfile相媲美了. Perf 的 ...
- 内存溢出VS内存泄漏
内存溢出是指用户在对其数据缓冲区操作时,超过了其缓冲区的边界,尤其是对缓冲区进行写操作缓冲区的溢出很可能导致程序的异常. 内存泄露是指程序在运行过程中动态申请的内存空间不再使用后没有及时释放,从而很可 ...
- android MVC && MVP && MVVM分析和对比
相关:http://www.cnblogs.com/wytiger/p/5305087.html 出处http://blog.csdn.net/self_study,对技术感兴趣的同鞋加群544645 ...
- for循环嵌套执行效率
今天做项目时遇到一个for循环的嵌套问题,一个循环次数多,一个次数少,怎样设计效率较高. 想起以前笔试时遇到过这个问题,当时由于时间仓促,没有细想,今天在实际代码中遇到这么问题,于是动笔算了下. 设两 ...
- 使用jquery脚本获取随笔、文章和评论的统计数，自定义显示位置
为了这个问题,花了好些时间去摸索,无奈没有搞定.于是,我就到博问去提问,终于搞定! 在此,非常感谢SeayXu的热心帮助. 1.在需要的位置添加一个标签 <div id="stats_ ...