CSS3之动画模块实现云朵漂浮效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画模块-云层效果</title>
<style>
* {
margin:0;
padding:0;
}
ul {
height: 400px;
background-color: skyblue;
margin-top: 100px;
/* 动画名 动画时长 延迟时间 动画次数 来回交替*/
animation: change 5s 0s infinite alternate;
position: relative;
}
ul li {
list-style: none;
width: 400%;/*保证图片可以不超出ul*/
height: 100%; position: absolute;
left: 0px;
top: 0px;
}
ul li:nth-child(1){
background-image: url("images/cloud_one.png");
animation: one 30s linear 0s infinite alternate;
}
ul li:nth-child(2){
background-image: url("images/cloud_two.png");
animation: two 30s linear 0s infinite alternate;
}
ul li:nth-child(3){
background-image: url("images/cloud_three.png");
animation: three 30s linear 0s infinite alternate;
}
@keyframes change {
from {
background-color: skyblue;
}
to {
background-color: black;
}
}
@keyframes one {
from{
margin-left: 0;
}
to {
margin-left: -100%;/*时间相同，距离不同，所以移动速度不一样*/
}
}
@keyframes two {
from{
margin-left: 0;
}
to {
margin-left: -200%;
}
}
@keyframes three {
from{
margin-left: 0;
}
to {
margin-left: -300%;
}
} </style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
效果如下：
CSS3之动画模块实现云朵漂浮效果的更多相关文章
- Js点击触发Css3的动画Animations、过渡Transitions效果
关键是首先指定动画效果的CSS属性名称,然后在Js中改变这个属性 如果不使用Js触发,可以选择利用css的状态:hover,focus,active 来触发,也可以一开始就触发 下例为Js点击触发过渡 ...
- CSS3之动画模块实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 美妙的 CSS3 动画！一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
- css3关键帧动画实现轮播效果
实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...
- CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现
前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...
- CSS3圆圈动画放大缩小循环动画效果
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- 测试css3的动画效果在display:none的时候不耗费性能
也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...
- css3动画的原理 及 各种效果制作
1. 制作小球弹动效果 在这篇文章中,我们将会去探究一下浏览器是如何去处理CSS Animations和CSS Transitions的, c 以便使你在写一些动画效果之前就可以对该动画在浏览器中 ...
随机推荐
- Python学习之路并发编程--信号量、事件、队列及生产消费模型
1. 信号量 对于多进程来说,多个进程同时修改数据,就可能出现安全隐患,所以引入了锁,这一机制,但锁只能有一把来控制一个的开关,当你需要几把锁的时候,就可能用到信号量的概念.他是用了锁的原理,内置了一 ...
- python学习5---实现凸包
1.暴力法 def g(A,B,P): """ 判断点PA矢量在AB矢量的顺时针还是逆时针方向, 若在逆时针方向则返回1,同向返回0,在顺时针方向返回-1 :param ...
- UGUI之用ScrollRect做下拉刷新
在ScrollView下有中层次是scorllview->viewport->content scorllView对象下的ScrollRect组件是关键 ,scorllRect中指定其对 ...
- zoj 2524 并查集裸
Description There are so many different religions in the world today that it is difficult to keep tr ...
- 【OO学习】OO第一单元作业总结
OO第一单元作业总结 在第一单元作业中,我们只做了一件事情:求导,对多项式求导,对带三角函数的表达式求导,对有括号嵌套的表达式求导.作业难度依次递增,让我们熟悉面向对象编程方法,开始从面向过程向面向对 ...
- jumpserver管理入门
比较规范一点的步骤 1.先在用户管理查看用户组里,添加用户组 2.在用户管理查看用户里,添加用户 3.在资产管理里查看资产,添加资产.在批量增加那里可以使用表格快速导入添加 4.在授权管理里的系统用户 ...
- Java技术开发程序员如果在2019年立足
2019年的互联网环境相对以往来说要更复杂一些,互联网领域也正在经历从消费互联网向产业互联网转型的阵痛期.其实不少公司从2018年开始已经在陆续进行结构化调整,这些调整中的重要内容就是岗位调整,而岗位 ...
- Java高级特性 第7节 多线程
一.进程与线程的概念 1. 进程 进程是应用程序的执行实例,有独立的内存空间和系统资源. 如上图,标红色的是一个Office Word进程. 进程的特点: 动态性:进程是动态的创建和消亡: 并发性:操 ...
- 18.21 关键字extern
用#include可以包含其他头文件中变量.函数的声明,为什么还要extern关键字? 1.头文件 其实头文件对计算机而言没什么作用,只是在预编译时在#include的地方展开一下,没别的意义了.将头 ...
- Jquery 一个页面多个倒计时 实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...