漂浮的云朵html,CSS3之动画模块实现云朵漂浮效果

动画模块-云层效果

* {

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%;

}

}

效果如下：

Js点击触发Css3的动画Animations、过渡Transitions效果

关键是首先指定动画效果的CSS属性名称,然后在Js中改变这个属性 如果不使用Js触发,可以选择利用css的状态:hover,focus,active 来触发,也可以一开始就触发 下例为Js点击触发过渡 ...

CSS3之动画模块实现轮播图

前言 首先第一步,先布局html代码如下:

CSS3圆圈动画放大缩小循环动画效果

代码如下:

测试css3的动画效果在display:none的时候不耗费性能

也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢?

&lt ...

css3动画的原理 及 各种效果制作

1. 制作小球弹动效果 在这篇文章中,我们将会去探究一下浏览器是如何去处理CSS Animations和CSS Transitions的,   c 以便使你在写一些动画效果之前就可以对该动画在浏览器中 ...

随机推荐

二、secureCRT的 使用过程

准备工作: win7与linux能互相ping通 linux安装了ssh被登陆服务 关闭window 防火墙,,控制面板 下载secureCRT 参考资料:http://zhidao.baidu.co ...

js日期相关函数总结分享

一个倒计时程序,因为经常要在手机端访问,所以没有引用jquery,对于用习惯jquery的我还真不习惯. 下面简单说明js日期相关函数,并说明实现倒计时的原理 var dateTo=new Date( ...

Javascript: Let user select an HTML element like Firebug?综述

Javascript: Let user select an HTML element like Firebug? Javascript: Let user select an HTML elemen ...

struts 中自定义action访问方法

struts中action类继承了ActionSupport  默认实现了execute()方法 struts.xml配置文件中 然后可以配置如下映射:

GLSL Versions和GLSL ES Versions 对比

You can use the #version command as the first line of your shader to specify GLSL version: #version ...

展示金额的方法(1元-->1.00元)

public static String showMoneyByTwoDecimal(String account) { DecimalFormat doubleFormatter = new Dec ...

Linq to SQL -- Join

Join操作 适用场景:在我们表关系中有一对一关系,一对多关系,多对多关系等.对各个表之间的关系,就用这些实现对多个表的操作. 说明:在Join操作中,分别为Join(Join查询), SelectM ...

三十六、Linux 线程——线程基本概念及线程的创建和终止

36.1 线程介绍 36.1.1 线程的基本概念 进程是资源管理的最小单位,线程是程序执行的最小单位 每个进程都有自己的数据段.代码段和堆栈段. 线程通常叫做轻型的进程,它包含独立的栈和 CPU 寄存 ...

HDU3031 To Be Or Not To Be 左偏树 可并堆

欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - HDU3031 题意概括 喜羊羊和灰太狼要比赛. 有R次比赛. 对于每次比赛,首先输入n,m,n表示喜羊羊和灰 ...