HTML5CSS3特效-上下跳动的小球-遁地龙卷风

2024-06-21 20:53:02

(-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特效-上下跳动的小球-遁地龙卷风相关推荐

html代码小球上下波动,HTML5CSS3特效-上下跳动的小球-遁地龙卷风
(-1)作一新求抖直微圈写在前面我用的是chrome49,这个idea是我在stackoverflow上回答问题时看到了,多谢这位同行,加深了我对很多技术点的理解,最近刚到北京,忙碌了一两天,在后续 ...
jquery toggle方法使用出错?请看这里-遁地龙卷风
这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function(){alert(1);//1,3,5,7...},function(){a ...
JQuery data方法的使用-遁地龙卷风
(-1)说明我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本测试例子用到的showMessage ...
mysql输出学生和考试信息_mysql练习题-查询同时参加计算机和英语考试的学生的信息-遁地龙卷风...
文章参考http://blog.sina.com.cn/willcaty. 针对其中的一道练习题想出两种其他的答案,希望网友给出更多回答. (0) 基础数据 student表 +-----+----- ...
3dmax：3dmax动画栏之关键帧动画经典案例(弹跳小球、实活力小球(上升慢下降快)、小球跳墙、跳动越来越低的小球实例、空间跳动的小球、球跳阶梯)之详细攻略
3dmax:3dmax动画栏之关键帧动画经典案例(弹跳小球.实活力小球(上升慢下降快).小球跳墙.跳动越来越低的小球实例.空间跳动的小球.球跳阶梯)之详细攻略目录
maya的颤动怎么做_maya基础动画实例：跳动的小球方案.ppt
调整小球弹跳重量感此时再点播放按钮可再次观察小球运动情况,我们发现此时小球运动比较呆板. 怎么样才能给小球以生命力呢,这就需要用动动画中的绽放与拉伸的效果. 缩放与拉伸变形在制作小球的缩放与拉伸动 ...
html跳动的小球,canvas绘制跳动的小球
动画反弹 *{ margin:0; padding:0; } canvas1{ box-shadow: 0px 0px 10px red; position: absolute; left:50px; ...
制作小游戏--跳动的小球
VS配置图形库:easyX Sleep(1000),表示暂停1000毫秒: cleardevice()清屏函数绘制一个圆形 #include<graphics.h> #include&l ...
java模拟摇摆小球程序代码_用java实现跳动的小球示例代码
实现效果为一个小球接触左右侧时,会反向的运动. import javafx.application.Application; import javafx.event.ActionEvent; impo ...

最新文章

热门文章