<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>天空飘着五朵云</title>

<style>

*{ margin: 0; padding: 0;}

body {

overflow: hidden;

}

#clouds{

padding: 100px 0;

background: #c9dbe9;

background: linear-gradient(top, #c9dbe9 0%, #fff 100%);

}

.cloud {

width: 200px; height: 60px;

background: #fff;

border-radius: 200px;

position: relative;

}

.cloud:before , .cloud:after {

content: '';

background: #fff;

width: 100px; height: 80px;

position: absolute; top: -15px; left: 10px;

border-radius: 100px;

transform: rotate(30deg);

}

.cloud:after {

width: 120px; height: 120px;

top: -55px; right: 15px;left: auto;

}

.x1 {

animation: moveclouds 15s linear infinite;

}

.x2 {

left: 200px;

transform: scale(0.6);

opacity: 0.6;

animation: moveclouds 25s linear infinite;

}

.x3 {

left: -250px; top: -200px;

transform: scale(0.8);

opacity: 0.8;

animation: moveclouds 20s linear infinite;

}

.x4 {

left: 470px; top: -250px;

transform: scale(0.75);

opacity: 0.75;

animation: moveclouds 18s linear infinite;

}

.x5 {

left: 350px; top: -150px;

transform: scale(0.8);

opacity: 0.8;

animation: moveclouds 20s linear infinite;

}

@keyframes moveclouds {

0% {margin-left: 1000px;}

100% {margin-left: -1000px;}

}

</style>

</head>

<body>

<div id="clouds">

<div class="cloud x1"></div>

<div class="cloud x2"></div>

<div class="cloud x3"></div>

<div class="cloud x4"></div>

<div class="cloud x5"></div>

</div>

</body>

</html>

　　

CSS 空中飘动的云动画的更多相关文章

  1. 【动画消消乐】HTML+CSS 白云飘动效果 072

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出-   自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...

  2. Canvas 3D球形文字云动画特效

    Canvas 3D球形文字云动画特效 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器 ...

  3. 简单css实现input提示交互动画效果

    通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...

  4. css3-12 transition+css或transform实现过渡动画

    css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...

  5. 纯CSS制作加<div>制作动画版哆啦A梦

    纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...

  6. 用 CSS 实现酷炫的动画充电效果

    巧用 CSS 实现酷炫的充电动画 循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果. 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了. ...

  7. 用CSS制作伪标签云

    performance testing stress testing conformance testing acceptane testing smoke testing regression te ...

  8. css属性的选择对动画性能的影响

    现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...

  9. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

随机推荐

  1. Android（java）学习笔记179：多媒体之加载大图片到内存（Bitmap API）

    1. Bitmap (API使用) android里面的bitmap中,一个像素点需要4个byte去表示,这是因为android表示颜色是" argb ":其中 a 表示是透明度, ...

  2. SQL数据库移植到ARM板步骤

    SQL作为一种存储数据的数据结构,具有体积小(能堵存储的数据多),容易移植等优点.例如,在Ubuntu或者ARM开发板上被大量应用.下面就简单说一下SQL移植到ARM板的步骤. 下载源代码 (记得在家 ...

  3. html自己写响应式布局（说起来很高大上的样子，但是其实很简单）

    第一步,打开电脑中安装的Sublime Text3,新建demo文件夹用来存放文件,在里面新建一个HTML文件,通过Tab快捷键迅速创建一个HTML模板,并命名标题. 第二步,在Body标签里添加三个 ...

  4. dropuser - 删除一个 PostgreSQL 用户帐户

    SYNOPSIS dropuser [ option...] [ username] DESCRIPTION 描述 dropuser 删除一个现有 PostgreSQL 用户 和 该用户所有的数据库. ...

  5. ES6对象和数组解构

    解构可以避免在对象赋值时再生成多余的中间变量: function foo() { return [1,2,3]; } let arr = foo(); // [1,2,3] let [a, b, c] ...

  6. sklearn之SVC

    sklearn.svm.SVC(C=1.0, kernel='rbf', degree=3, gamma='auto', coef0=0.0, shrinking=True, probability= ...

  7. treeTable的使用（ajax异步获取数据，动态渲染treeTable）

    一.展示效果(treetable基本样式https://www.cnblogs.com/shuihanxiao/p/10413454.html) 二.html文件(若一个页面又多个treetable, ...

  8. L_01 网络字节顺序

    (1)计算机在存储多字节数据时存在大端字节顺序和小端字节顺序两种方式. 大端:高位字节排放在内存的低地址端(即该值的起始地址),低位字节排放在内存的高地址端. 小端:低位字节排放在内存的低地址端(即该 ...

  9. Elasticsearch 索引管理和内核探秘

    1. 创建索引,修改索引,删除索引 //创建索引 PUT /my_index { "settings": { , }, "mappings": { " ...

  10. INFORMATION_SCHEMA InnoDB 表

    INFORMATION_SCHEMA InnoDB Tables 本节提供InnoDB INFORMATION_SCHEMA表的表定义. 有关相关信息和示例,请参见"InnoDB INFOR ...