<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漂浮的白云</title>
<style type="text/css">
.box {
position: relative;
height: 300px;
width: 500px;
} .in1, .in2 {
position: absolute;
height: 100%;
width: 100%;
background-size: cover;
animation: move 100s infinite linear alternate;
} @keyframes move {
100% {
background-position: 500% 0;
}
} .in1 {
background-image: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/cloud.png');
} .in2 {
background-image: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/cloud1.png');
animation-duration: 10s;
}
</style>
</head>
<body>
<h1>漂浮的白云</h1>
<div class="box">
<div class="in1"></div>
<div class="in2"></div>
</div> <strong>【简要介绍】</strong>
  <p>漂浮的白云主要通过远景白云和近景白云来实现立体漂浮效果。远景和近景分别使用两张背景图片,通过改变其背景定位来实现白云移动效果,通过设置不同的动画持续时间来实现交错漂浮的效果</p>
</body>
</html>

效果图:

原链接:https://www.cnblogs.com/xiaohuochai/p/5419236.html

css3动画(animation)效果1-漂浮的白云的更多相关文章

  1. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  2. CSS3 动画animation

    关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...

  3. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  4. CSS3 动画 animation和@keyframes

    CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...

  5. CSS3动画animation认识,animate.css的使用

    CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...

  6. css3动画animation

    动画:animation   animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...

  7. CSS3 动画Animation的8大属性

    animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...

  8. css3动画-animation

    animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...

  9. 最新的css3动画按钮效果

    效果演示     插件下载

  10. 纯CSS3动画按钮效果

    在线演示 本地下载

随机推荐

  1. DataTable相关

    设置主键列:  this.tableTestData.PrimaryKey = new DataColumn[] { this.tableTestData.Columns[0] };

  2. laravel phpstorm IDE 代码提示

    第一步:在项目的composer.json中添加如下一行 "require": { "laravel/framework": "5.0.*" ...

  3. solr自动提示 - jquery ui autocomplete

    需求: 搜索框中 输入部分关键词之后,有下拉联想提示.选中提示,使用鼠标或者使用enter键,则触发搜索功能.没有选择搜索提示,使用部分输入关键词作为搜索,直接使用enter键也能触发搜索功能.整个过 ...

  4. Linux下Maven的安装与使用

    pache Maven,是一个软件(特别是Java软件)项目管理及自动构建工具,由Apache软件基金会所提供.基于项目对象模型(POM)概念,Maven利 用一个中央信息片断能管理一个项目的构建.报 ...

  5. loadrunner中回放log看不到参数替代后具体数值

    1.打开run-time settings,找到 log - always send messages,选择 extended log--parameter substitution.

  6. [BAT] 以当前时间为名创建文件夹,将本地文件夹里的文件拷贝到远程共享目录,而且保证本地和Jenkins上运行都成功

    @echo off rem connect to szotpc801 net use * /del /yes NET USE X: \\10.66.234.95\d$ Autotest123 /use ...

  7. Win10安装Mongodb,并配置成服务

    好吧,今天突然发现新买的surface上没有安装mongodb,然后想着安装一下,顺便记录一下,虽说安装过程很简单 一:下载安装,然后拷贝到C盘根目录,这个就不多说了,比QQ都简单. 二:把bin文件 ...

  8. MP3 Lame 转换 参数 设置(转)

    我们在对音频格式的转换中,打交道最多的就是MP3了.如果你能彻底玩转MP3,那么对你的音频创作和对其他音频格式的掌握会有很大的帮助.下面我们给大家介绍MP3制作软件:LAME 要制作出高音质的MP3靠 ...

  9. QML的默认属性default property

    qml中,普通的属性,需要添加属性名称,属性内容,如 color: “red” 默认属性则可以直接书写,去掉方括号,在写重用的QML组件式比较有用,例如将一个QmL外部资源封装好,内部具体的item, ...

  10. HDU 6069 Counting Divisors (素数+筛法)

    题意:给定 l,r,k,让你求,其中 l <= r <= 1e12, r-l <= 1e6, k <= 1e7. 析:首先这个题肯定不能暴力,但是给定的区间较小,可以考虑筛选, ...