<!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. 大数据Hadoop生态圈：Pig和Hive

    前言 Pig最早是雅虎公司的一个基于Hadoop的并行处理架构,后来Yahoo将Pig捐献给Apache的一个项目,由Apache来负责维护,Pig是一个基于 Hadoop的大规模数据分析平台. Pi ...

  2. 【POJ1284】Primitive Roots

    [题目大意] 给你一个素数n,求n的原根个数. [题解] 关于原根有一个定理: 定理:如果模有原根,那么它一共有个原根. 所以这题就是求phi[phi[n]] 很简单吧...(如果知道这个定理的话) ...

  3. iOS倒计时

    现在开发基本上都有发送验证码,倒计时,下面说一种 #import <UIKit/UIKit.h> @interface UIButton (CountDown) -(void)startT ...

  4. 《Android Studio实用指南》4.27 使用演示模式

    本文节选自<Android Studio实用指南> 第4章第27节 作者: 毕小朋 目前本书已上传到百度阅读, 在百度中搜索[Anroid Studio实用指南]便可以找到本书. 什么是演 ...

  5. Linux ls命令详解-乾颐堂CCIE

      ls命令用法举例: 例一:列出/home文件夹下的所有文件和目录的详细资料: 1 ls -l -R /home 命令参数之前要有一短横线“-”, 上面的命令也可以这样写: 1 ls -lR /ho ...

  6. win10 startup启动目录路径命令

    仅对当前用户生效: C:\Users\Username\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup 开始-运行 shel ...

  7. 删除右键菜单中的Git Gui Here、Git Bash Here的方法

    修改注册表的方法: 1.点击左下角开始菜单 - 运行(输入regedit)- 确定或者回车: 2.在打开的注册表中找到:HKEY_CLASSES_ROOT,并点HKEY_CLASSES_ROOT前面的 ...

  8. Android动态加载--JVM 类加载机制

    动态加载,本质上是通过JVM类加载机制将插件模块加载到宿主apk中,并通过android的相关运行机制,实现插件apk的运行.因此熟悉JVM类加载的机制非常重要. 类加载机制:虚拟机把描述类的数据从C ...

  9. poi 获取excel数据 导入数据库

    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; Map<String, ...

  10. Java 栈与堆简介

    一.前言 长久以来,一直被Java的内存分配问题,堆和栈问题困扰好久,面试的时候也非常心虚,这几天好好通过看书和技术博客来整理了一下,希望能找到我自己的理解方式. 二.内存 内存分物理内存和虚拟内存, ...