源代码如下：

<!DOCTYPE html>
<html>
<head>
<title>xi</title>
<meta charset="utf-8">
<style type="text/css">
.ww{
width: 70px;
height: 70px;
background: red;
border-radius: 50%;
position: absolute;
left: 200px;
z-index: 1;
animation-name: dong;
animation-duration: 0.3s;
animation-timing-function:linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes dong{
0%{top: 100px;}
50%{top:150px;}
100%{top:250px;}
}
.one{
border: 1px solid gray;
height: 10px;
width: 10px;
background: gray;
border-radius: 50%;
margin-top: 220px;
position: absolute;
opacity: 1;
left: 200px;
top:100px;
z-index: 2;
transform:skewX(70deg);
animation-name: yingy;
animation-duration:0.4s;
animation-delay: 0.3s;
animation-iteration-count: infinite;
}
@keyframes yingy{
0%{width: 60px; opacity: 0.8;}
50%{width:70px;opacity: 0.5;}
100%{width:80px;opacity: 0.4;}
}
.tuo{
width: 70px;
height: 70px;
background: lime;
border-radius: 50%;
position: absolute;
left: 200px;
top: 150px;
animation-name: dongz;
animation-duration: 0.4s;
animation-timing-function:linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes dongz{
0%{left: 200px; }
50%{left:500px;}
100%{left:800px; top: 300px;}
}
.tre{
width: 70px;
height: 70px;
background: lime;
border-radius: 50%;
position: absolute;
left: 200px;
top: 150px;
animation-name: donga;
animation-duration: 0.4s;
animation-timing-function:linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes donga{
0%{left: 200px; }
50%{left:500px;}
100%{left:800px;}
}
.uu{
width: 70px;
height: 70px;
background: lime;
border-radius: 50%;
position: absolute;
left: 200px;
top: 900px;
animation-name: dongb;
animation-duration: 0.4s;
animation-timing-function:linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes dongb{
0%{top: 800px; }
50%{top:500px;}
100%{top:200px;}
}
.uu1{
width: 70px;
height: 70px;
background: yellow;
border-radius: 50%;
position: absolute;
left:0px;
top: 0px;
animation-name: dongc;
animation-duration: 1s;
animation-timing-function:linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes dongc{
0%{top:0px;left: 0px;}
25%{top:0px;left: 800px;}
50%{top:800px;left: 800px}
75%{top:800px;left: 0px;}
100%{top:0px;left: 0px;}
}
.uu2{
width: 70px;
height: 70px;
background: pink;
border-radius: 50%;
position: absolute;
left:20px;
top: 20px;
animation-name: donge;
animation-duration: 4s;
animation-timing-function:linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes donge{
0%{top:0px;left: 0px;}
25%{top:0px;left: 800px;}
50%{top:800px;left: 800px}
75%{top:800px;left: 0px;}
100%{top:0px;left: 0px;}
}
.uu3{
width: 70px;
height: 70px;
background: white;
border-radius: 50%;
position: absolute;
left:20px;
top: 0px;
animation-name: dongf;
animation-duration: 1s;
animation-timing-function:linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes dongf{
0%{top:0px;left: 0px;}
25%{top:800px;left: 0px;}
50%{top:800px;left: 800px}
75%{top:0px;left: 800px;}
100%{top:0px;left: 0px;}
}
.uu4{
width: 70px;
height: 70px;
background: orange;
border-radius: 50%;
position: absolute;
left:20px;
top: 0px;
animation-name: dongh;
animation-duration:2s;
animation-timing-function:linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes dongh{
0%{top:0px;left: 0px;}
25%{top:500px;left: 0px;}
50%{top:500px;left: 500px}
75%{top:0px;left: 500px;}
100%{top:0px;left: 0px;}
}
.uu5{
width: 70px;
height: 70px;
background: gold;
/*border-radius: 50%;*/
position: absolute;
left:20px;
top: 0px;
animation-name: dongg;
animation-duration:1s;
animation-timing-function:linear;
animation-direction: alternate;
animation-iteration-count: infinite;

}
@keyframes dongg{
0%{top:0px;left: 0px;}
25%{top:500px;left: 0px;}
50%{top:900px;left: 900px}
75%{top:0px;left: 900px;}
100%{top:0px;left: 0px;}
}
.uu6{
width: 70px;
height: 70px;
background: blue;
border-radius: 50%;
position: absolute;
left:20px;
top: 0px;
animation-name: dongd;
animation-duration: 3s;
animation-timing-function:linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes dongd{
0%{top:0px;left: 0px;}
25%{top:0px;left: 700px;}
50%{top:700px;left: 700px}
75%{top:700px;left: 0px;}
100%{top:0px;left: 0px;}
}
.uu7{
width: 70px;
height: 70px;
background: teal;
position: absolute;
left:0px;
top: 0px;
animation-name: dongl;
animation-duration: 1s;
animation-timing-function:linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes dongl{
0%{top:0px;left: 0px;}
10%{top:0px;left: 100px;}
20%{top:0px;left: 200px;}
30%{top:20px;left: 300px;}
40%{top:50px;left: 400px}
75%{top:600px;left: 0px;}
100%{top:0px;left: 0px;}
}
.uu8{
width: 70px;
height: 70px;
background: teal;
border-radius: 50%;
position: absolute;
left:200px;
top:850px;
animation-name: dongb;
animation-duration: 1s;
animation-timing-function:linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes dongb{
0%{left: 200px; }
50%{left:500px;}
100%{left:800px;}
</style>
</head>
<body bgcolor="black">
<div class="ww"></div>
<div class="one"></div>
<div class="tuo"></div>
<div class="tre"></div>
<div class="uu"></div>
<div class="uu1"></div>
<div class="uu2"></div>
<div class="uu3"></div>
<div class="uu4"></div>
<div class="uu5"></div>
<div class="uu6"></div>
<div class="uu7"></div>
<div class="uu8"></div>
</body>
</html>

转载于:https://www.cnblogs.com/yzybc/p/5673513.html

css动画+滚动的+飞舞的小球相关推荐

  1. 简单的代码就能实现动画滚动？

    开发工具与关键技术:DW中的HTML和CSS动画滚动 作者:木有窝的鸟~小通 撰写时间:2019年01月17日 我们知道,利用代码实现能千姿百态动画效果,用思维创作动画效果缔造各种各样的作品,确让人感 ...

  2. vue 监听页面滚动事件：触发animate.min.css动画特效

    一.问题答疑: 1. animate.css 如何在vue项目中引入?或引用? 2. 如何监听滚动事件,触发animate.class动画播放? vue 监听滚轮滚动事件,for循环 ,动态id,代码 ...

  3. Nuxtjs上使用wow.js+animate.css实现滚动加载动画

    最近做个官网(技术栈使用Nuxt)需要用到滑动到可视区域才触发动画效果,几乎所有的页面都要"动"起来,手写要累死的节奏,赶紧寻找工具!发现wow.js+animate.css可以满 ...

  4. wow.js+animate.css实现滚动加载动画

    迅雷官网有这种效果: 迅雷网络-关于我们迅雷是全球领先的共享计算与区块链技术创新企业,公司成立于2003年,基于深耕十几年.获得国际专利的P2SP下载加速技术优势,面向个人用户和企业用户打造了丰富的下 ...

  5. css动画，小球运动

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 前言 随着用户的需求,以及为提升用户体验今天我们讲利用css制作动画 提示:以下是本篇文章正文内容,下面案例可供参考 一.定义关键帧 ...

  6. 利用CSS动画制作 Html 表格数据滚动显示

    直接上图看最终实现效果: DataV里有这个效果,看起来高大上,实际自己开发也不难实现.实现的方法很多,下面是本人的一种实现方案,分享给大家. 这个效果需要解决2个问题: 1:首尾的数据衔接: 2:c ...

  7. css动画和js动画比较！

    原文地址:http://css-tricks.com/myth-busting-css-animations-vs-javascript/ 译文地址:https://github.com/classi ...

  8. html设定元素动画执行,CSS动画 _Animation 教程_W3cplus

    本文是为帮助您入门和熟悉CSS动画而编写的,使用它们来为您带来基于Web的接口以及为艺术带来生命.虽然W3C的CSS动画规范仍在修订中,但是如今它已经有大量的内容可以供我们使用了. 对我而言,CSS动 ...

  9. 前端技术周刊 2019-01-07：CSS 动画

    2019-01-07 前端快爆 Chrome 72 已经进入了 beta 阶段.新增:公有类成员的声明和初始化.一些 DevTools 新功能(可视化性能指标.高亮 text nodes.复制节点的 ...

最新文章

  1. IOS学习博客不错的大部分是原创
  2. 用它5分钟以后，我放弃用了四年的 Flask
  3. android查看报错日志,android运行错误日志帮看下 不懂啊
  4. 安卓多语言设置,深渊巨坑,适配7.0以上,并且解决因WebView产生的问题
  5. 希尔排序python实现
  6. bash 的进站欢迎提示
  7. mysql自带订阅功能_为博客提供订阅功能
  8. 两个八进制小数怎么相加_两个十六进制怎么相加的
  9. 【Flink】Flink TimeServer 之 timerService().registerProcessingTimeTimer
  10. Centos7 安装Jdk1.8u172
  11. 聚能聊每周精选 第十一期
  12. 跳蚤 BZOJ 4310
  13. 彻底理解 Window 和 WindowManager
  14. 陈睿提供2009-06-19
  15. 原来js让任务栏闪烁这么简单
  16. 滴水逆向三期笔记与作业——02C语言——02数据类型
  17. SAP License：SAP常见问题与解决办法（汇总帖）
  18. 华擎主板设置来电开机_主板四大品牌BIOS设置开机第一启动项图文教程
  19. 天梯赛 L1-021 重要的话说三遍 (5 分) 简单易懂
  20. 《OpenSSL3.0学习之二十七 EVP_OpenXXX》

热门文章

  1. boss直聘改回系统头像_BOSS直聘“带”薪直播告诉你，跟对老板有多重要？
  2. [Docker] 基于 Leanote 搭建私有笔记服务器的经历
  3. 从零搭建Maven私有仓库
  4. windows 下 pycuda 安装问题
  5. 工程财务—财务会计基础
  6. MATLAB小技巧（17）矩阵分析--灰色关联度计算
  7. Linux热插拔udev机制
  8. R语言学习笔记（六）：OLS回归
  9. sinee303a变频器说明书_EM303A系列变频器说明书
  10. 阿里十大开源项目，看看你用过几个