<!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. slf4j日志框架

  2. S数据导入

    一. 职责下的视图导入先对比UAT172和PROD 177的数据,若177比172多的数据进行删除,若172比177多的数据,重新加入到177. 1．删除177多余的 搜索一个177比172多的,进行 ...

  3. ZPP002M可重复执行

    AutoOutToSAP一直未回写完成,查看得知最后一步执行时间超长, stop job ZPP002M可重复执行

  4. Linux重启mysql Error getting authority: Error initializing authority: Could not connect: Resource temporarily unavailable (g-io-error-quark, 27)

    问题: Linux下重启mysql: systemctl restart mysqld 出现以下错误: Error getting authority: Error initializing auth ...

  5. C#使用NPOI导出excel设置单元格背景颜色

    ICellStyle cellStyle = workbook.CreateCellStyle(); cellStyle.FillPattern = FillPattern.SolidForegrou ...

  6. 《DNA比对》蓝桥杯复赛试题

    题目描述 脱氧核糖核酸即常说的DNA,是一类带有遗传信息的生物大分子.它由4种主要的脱氧核苷酸(dAMP.dGMP.dCMT和dTMP)通过磷酸二酯键连接而成.这4种核苷酸可以分别记为:A.G.C.T ...

  7. linux常用的一些命令行操作（ubuntu）

    软件安装 sudo apt-get install xxx 压缩和解压缩 1. *.tar 用 tar –xvf 解压 2. *.gz 用 gzip -d或者gunzip 解压 3. *.tar.gz ...

  8. C#在控制台输出异常所在的行数

    对于异常,我们经常用try-catch语句来处理,一种常见的方式是在catch语句块用MessageBox.Show("异常")这种弹窗的方式来报告异常.但是有些时候,有些异常发生 ...

  9. [C++] c Struct VS c++ Struct

    c Struct c语言生命变量要加上struct c语言结构体内部不能有函数 C语言结构体没有共有,私有和继承

  10. 计蒜客D2T2 蒜头君的排序（动态维护树状数组）

    蒜头君的排序(sort) 2000ms 262144K 蒜头君是一个爱思考的好孩子,这一天他学习了冒泡排序,于是他就想,把一个乱序排列通过冒泡排序排至升序需要多少次交换,这当然难不倒他,于是他想来点刺 ...