<!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. Linux重置管理员密码

    对于一些非专业的Linux运维工程师或者偶尔使用Linux系统的学习者而言,比如我,经常会碰到忘记密码的尴尬,那这时候,快速的重置密码就相当重要了.废话不多说,今天我们就一起来学习一下如何快速重置密码 ...

  2. div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

    说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的 ...

  3. CentOS 6.4一键自动化安装ISO镜像光盘

    下载CentOS-6.4-x86_64-minimal.iso 1 http://mirrors.163.com/centos/6.4/isos/x86_64/CentOS-6.4-x86_64-mi ...

  4. Oracle和Mysql的区别 转载

    一.并发性 并发性是oltp数据库最重要的特性,但并发涉及到资源的获取.共享与锁定. mysql:mysql以表级锁为主,对资源锁定的粒度很大,如果一个session对一个表加锁时间过长,会让其他se ...

  5. OpenSceneGraph3.4.0+Qt5.6.1MinGW开发环境部署

                基本步骤如下描述: Step1:CMake3.10编译openscenegraph3.4.0,生成makefile文件(中间过程可能会涉及到很多三方库,需要下载编译,然后按cm ...

  6. python准确判断文件类型

    判断文件类型在开发中非常常见的需求,怎样才能准确的判断文件类型呢?首先大家想到的是文件的后缀,但是非常遗憾的是这种方法是非常不靠谱的,因为文件的后缀是可以随意更改的,而大家都知道后缀在linux系统下 ...

  7. [Schema] I have updated my XML Schema for my service but SoapUI still generates/validates according to the old schema.

    SoapUI caches XML schemas when they are first loaded. If you need to force a reload of an interfaces ...

  8. 白盒测试实践-任务进度-Day04

    所使用静态代码检查工具 阿里巴巴Java开发代码检测IDE插件 小组成员 华同学.郭同学.覃同学.刘同学.穆同学.沈同学 任务进度 对大家完成各自任务情况进行询问后,以下是对小组成员完成任务进度的情况 ...

  9. mysql 用户创建，修改和忘记root密码的操作

    #创建用户CREATE USER 'zzq'@'localhost' IDENTIFIED by 'zzq';#flush privileges 命令本质上的作用是将当前user和privilige表 ...

  10. centos7用fdisk进行分区

    1.查看分区信息:fdisk -l 从上面可以看到,/dev/sdb分区还没有使用,现在将其划分成2个10G的分区. 2.执行:fdisk /dev/sdb 1):fdisk命令参数 p:打印分区表. ...