<!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. 禁用DRM

    10G: alter system set "_gc_policy_time"=0 scope=spfile sid='*'; alter system set "_gc ...

  2. Android（java）学习笔记173：服务（service）之绑定服务的细节

    绑定服务的细节 1. 如果onbind方法返回值是null,onServiceConnect方法就不会被调用: 2. 绑定的服务,在系统设置界面,正在运行条目是看不到的: 3. 绑定的服务,不求同时生 ...

  3. python day two

    今日内容: 1.常用数据类型及内置方法 2.文件处理 3.函数 列表类型: 定义: 在[]内,可以存放多个任意类型的值,并以逗号隔开. 一般用于存放学生的爱好,课堂的周期等等... 优先掌握的操作: ...

  4. npm的替代品

    npm安装依赖包太慢,cnpm也快不到哪里去,偶然发现了yarn,特快特好用! 安装yarn:npm install -g yarn 查看版本号:yarn -v 安装依赖项:yarn install

  5. shim和polyfill的区别

    今天看vue的响应原理,突然被提到shim这个词,翻阅些许资料然后整理出以下这些内容. 在JavaScript的世界里,有两个词经常被提到,shim和polyfill. 首先理解这两个词之前我们先来了 ...

  6. JavaScript—获取当下往后七天的时间

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. luogu 3004 宝箱

    题目游戏的加强版,建议先去A掉(双倍经验),数据范围比较大,所以我们不能想原来那样开二维数组来储存,所以我们必须压维,现在我们重新定义状态,一维数组dp[i]表示以i开头的最优拿法. 做法:枚举每一种 ...

  8. InnoDB INFORMATION_SCHEMA Lock Tables

    InnoDB INFORMATION_SCHEMA Lock Tables 三张InnoDB INFORMATION_SCHEMA表使您能够监视事务并诊断潜在的锁定问题: INNODB_TRX:提供有 ...

  9. 7. 配置undo表空间

    7. 配置undo表空间 undo日志可以存储在一个或多个undo表空间中,无需存储在系统表空间中. 要为MySQL实例配置单独的undo表空间,请执行以下步骤 [重要]: 只能在初始化新MySQL实 ...

  10. 利用system-config-kickstart实现半自动化安装

    老司机开车了… 上车请坐稳… centos7系统 首先确认已经安装了system-config-kickstart包,如果没有安装就yum install system-config-kickstar ...