<!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. Java实现Web页面前数字字母验证码实现

    最近公司做项目开发中用到了验证码实现功能,将实现代码分享出来, 前段页面实现代码: 为了表达清晰,样式部分代码去掉了,大家根据自己的需求,自己添加样式. 页面JS代码:触发变动验证码改变的JS 后台 ...

  2. Python3简明教程（十二）—— 模块

    在这节我们将要学习 Python 模块相关知识.包括模块的概念和导入方法,包的概念和使用,第三方模块的介绍,命令行参数的使用等. 模块 到目前为止,我们在 Python 解释器中写的所有代码都在我们退 ...

  3. k近邻法（kNN）

    <统计学习方法>(第二版)第3章 3 分类问题中的k近邻法 k近邻法不具有显式的学习过程. 3.1 算法(k近邻法) 根据给定的距离度量,在训练集\(T\)中找出与\(x\)最邻近的\(k ...

  4. PRJ0003 : Error spawning 'midl.exe'

    原因:出现该错误的是由于:C:\Program Files\Microsoft SDKs\Windows\v6.0A midl.exe 和midlc.exe缺失. 解决方法:从别人电脑上拷贝这个两个文 ...

  5. linux下tomcat服务的相关命令

    一:Linux下tomcat服务的启动.关闭与错误跟踪,使用PuTTy远程连接到服务器以后,通常通过以下几种方式启动关闭tomcat服务:切换到tomcat主目录下的bin目录(cd usr/loca ...

  6. vue计算属性computed和methods的区别

    computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...

  7. 「 Luogu P2801 」 教主的魔法——分块

    # 解题思路 修改,就是一个区间修改的常规操作,但是为了迎合查询的需要,对两端的不完整的块需要暴力重构,重新进行排序操作,保证每一块都是单调上升的顺序. 然后再说进行查询的操作,起初,我们需要在每一个 ...

  8. poj2065 SETI

    题目描述: 多组数据,每次给出一个模数$p$和一个表示答案的字符串, 相当于给出一个方程组:$$a_1*1^{1}+a_2*1^{2}+……+a_n*1^{n}=f_1$$ $$a_1*2^{1}+a ...

  9. 6. 将单独表空间（File-Per-Table Tablespaces）复制到另一个实例

    6. 将单独表空间复制到另一个实例 本节介绍如何将单独表空间从一个MySQL实例复制 到另一个MySQL实例,也称为可传输表空间功能. 将InnoDB单独表空间复制到其他实例的原因有很多: - 在不对 ...

  10. 蓝牙bluez学习（1） Stack Architecture

    Bluez支持的features Core Specification 4.2 (GAP, L2CAP, RFCOMM, SDP, GATT) Classic Bluetooth (BR/EDR) B ...