css3动画(animation)效果1-漂浮的白云
<!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-漂浮的白云的更多相关文章
- 前端CSS3动画animation用法
前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...
- CSS3 动画animation
关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...
- css3 动画(animation)-简单入门
css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...
- CSS3 动画 animation和@keyframes
CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...
- CSS3动画animation认识,animate.css的使用
CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...
- css3动画animation
动画:animation animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...
- CSS3 动画Animation的8大属性
animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...
- css3动画-animation
animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...
- 最新的css3动画按钮效果
效果演示 插件下载
- 纯CSS3动画按钮效果
在线演示 本地下载
随机推荐
- DataTable相关
设置主键列: this.tableTestData.PrimaryKey = new DataColumn[] { this.tableTestData.Columns[0] };
- laravel phpstorm IDE 代码提示
第一步:在项目的composer.json中添加如下一行 "require": { "laravel/framework": "5.0.*" ...
- solr自动提示 - jquery ui autocomplete
需求: 搜索框中 输入部分关键词之后,有下拉联想提示.选中提示,使用鼠标或者使用enter键,则触发搜索功能.没有选择搜索提示,使用部分输入关键词作为搜索,直接使用enter键也能触发搜索功能.整个过 ...
- Linux下Maven的安装与使用
pache Maven,是一个软件(特别是Java软件)项目管理及自动构建工具,由Apache软件基金会所提供.基于项目对象模型(POM)概念,Maven利 用一个中央信息片断能管理一个项目的构建.报 ...
- loadrunner中回放log看不到参数替代后具体数值
1.打开run-time settings,找到 log - always send messages,选择 extended log--parameter substitution.
- [BAT] 以当前时间为名创建文件夹,将本地文件夹里的文件拷贝到远程共享目录,而且保证本地和Jenkins上运行都成功
@echo off rem connect to szotpc801 net use * /del /yes NET USE X: \\10.66.234.95\d$ Autotest123 /use ...
- Win10安装Mongodb,并配置成服务
好吧,今天突然发现新买的surface上没有安装mongodb,然后想着安装一下,顺便记录一下,虽说安装过程很简单 一:下载安装,然后拷贝到C盘根目录,这个就不多说了,比QQ都简单. 二:把bin文件 ...
- MP3 Lame 转换 参数 设置(转)
我们在对音频格式的转换中,打交道最多的就是MP3了.如果你能彻底玩转MP3,那么对你的音频创作和对其他音频格式的掌握会有很大的帮助.下面我们给大家介绍MP3制作软件:LAME 要制作出高音质的MP3靠 ...
- QML的默认属性default property
qml中,普通的属性,需要添加属性名称,属性内容,如 color: “red” 默认属性则可以直接书写,去掉方括号,在写重用的QML组件式比较有用,例如将一个QmL外部资源封装好,内部具体的item, ...
- HDU 6069 Counting Divisors (素数+筛法)
题意:给定 l,r,k,让你求,其中 l <= r <= 1e12, r-l <= 1e6, k <= 1e7. 析:首先这个题肯定不能暴力,但是给定的区间较小,可以考虑筛选, ...