<!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. 免费视频教学：30天精通iPho…

    原文地址:免费视频教学:30天精通iPhone手机编程(全)作者:苹果iphone软件编程 土豆连接http://www.tudou.com/playlist/id12638619.html

  2. 解决OpenFeign默认无法上传文件的问题

    前言 最近在项目中使用OpenFeign时,发现其不支持文件上传功能.网上找了很多资料,最后找到feign-form和feign-form-spring的解决方案.但其默认只支持单文件上传,不支持多文 ...

  3. Excel VBA入门（二）数组和字典

    数组和字典也是VBA的常用到数据类型之一.但是我翻了有四五本VBA教程相关的书,里面都没有介绍到字典,数组到是在介绍数据类型时有介绍,而并没有提到字典. 事实上,字典不是VBA内置的类型,它是Wind ...

  4. malloc realloc calloc free

    自上次发现自己对这几个C函数不熟悉,就打算抽空整理一下,也就现在吧.这几个函数都是跟堆内存打交道的,还有一个好玩的函数--alloca,它是跟栈内存打交道的,我想留在以后研究出好玩点的来,再专门为其写 ...

  5. linux系统命令行基本组成元素

    一.shell prompt(PS1) 命令行提示符 1. 游标(coursor) 当你成功登录进一个文字界面之后,大部份情形下,你会在荧幕上看到一个不断闪烁的方块或底线(视不同版本而别),我们称之为 ...

  6. Python监控日志程序-乾颐堂

    一个简易的日志监控的脚本,功能如下:1.windows环境2.当匹配日志关键字时会发出声音,匹配的关键字不同,播放的声音不同3.能做到实时响应 注意:是在win环境下哦 直接上代码吧 1 2 3 4 ...

  7. name相同获取值

    <html> <head> </head> <body> <form name="form1" method="po ...

  8. ProGuard之——代码混淆

    ProGuard之——代码混淆 2015年11月03日 21:39:40 阅读数:2756 标签: JavaProGuard 更多 个人分类: JAVA 所属专栏: Java 版权声明:本文为博主原创 ...

  9. IE6 BUG及解决方案

    1.IE6中奇数宽高的BUG 一个外部的相对定位div,内部一个绝对定位的div(right:0) 可是在IE6下查看,却变成了right:1px的效果了: 解决方案就是将外部相对定位的div宽度改成 ...

  10. Python 简单模块学习

    1. openpyxl / xlrd / xlwt  => 操作Excel 文件(xlsx格式) => xlrd + xlwt : 只能操作xls文件,分别负责读写, 暂时不讨论 => ...