<!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. ZGC，一个超乎想象的垃圾收集器

    Z Garbage Collector,即ZGC,是一个可伸缩的.低延迟的垃圾收集器,主要为了满足如下目标进行设计: 停顿时间不会超过10ms 停顿时间不会随着堆的增大而增大(不管多大的堆都能保持在1 ...

  2. Python3简明教程（五）—— 流程控制之循环

    有些时候我们需要多次执行相同的任务,我们使用一个计数器来检查代码需要执行的次数.这个技术被称为循环. while循环 while语句的语法如下: while condition: statement1 ...

  3. exportfs - 管理NFS共享文件系统列表

    概述 (SYNOPSIS) /usr/sbin/exportfs [-avi] [-o options,..] [client:/path ..] /usr/sbin/exportfs -r [-v] ...

  4. C++虚析构函数的使用

    如果,你设计的程序里,释放对象实例的时候,有“使用某个基类的指针,来释放它指向的派生类的实例”这种用法出现的话,那么,这个基类的destructor就应该设计成virtual的. 如果,基类不是vir ...

  5. python之int (整型)

    用途: 用于计算和比较 整型的格式: 10203 123 3340 整型的运算: + - * / ** // % 整数的加: a = 10 b = 20 print(a + b) # 输出结果 30 ...

  6. 开源代码生成器，基于mybatis-generator扩展，结合freemarker

    git源码地址:https://github.com/JonSnow592622272/free-generator-code 码云gitee源码地址:https://gitee.com/a59262 ...

  7. svn up 更新 校验和不匹配

    BUNTU/Iproject/svn/dzradioclock-code/trunk/libs/dzlib/components/packages/DelphiXE2/dzComponentsR.dp ...

  8. SV学习之interface

    普通的模块使用法:注意我们这里只实现了部分功能....不是完全的读写模块....     module mem_core(   input logic wen,  input logic ren,   ...

  9. 使用js获取页面的各种高度

    使用js获取相关高度: 获取网页被滚动条卷去的高度——兼容写法: scrollHeight = documen.body.scrollTop || document.documentElement.s ...

  10. HDU 2196 Computer(求树上每个点的最长距离)

    题意: 这题想了挺久的, 参考了kuangbin大神的代码:https://www.cnblogs.com/kuangbin/archive/2012/08/28/2659915.html 给出树上边 ...