<!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. 推荐一款功能强大的Tomcat 管理监控工具，可替代Tomcat Manager

    我们在本地启动Tomcat服务器后,用localhost:访问: 再点Manager App,即可进入Tomcat自带的Manager这个应用,此处可以单独部署/卸载每一个应用.可以看到在Manage ...

  2. （转）配置Spring管理的bean的作用域

    http://blog.csdn.net/yerenyuan_pku/article/details/52833477 Spring管理的bean的作用域有: singleton 在每个Spring ...

  3. OSI七层模型和TCP/IP五层模型详解

    OSI是一个开放性的通信系统互连参考模型,他是一个定义得非常好的协议规范.OSI模型有7层结构,每层都可以有几个子层. OSI的7层从上到下分别是 7 应用层 6 表示层 5 会话层 4 传输层 3 ...

  4. python之道03

    1.有变量name = " aleX leNb " 完成如下操作: 移除 name 变量对应的值两边的空格,并输出处理结果 答案: name = " aleX leNb ...

  5. 雷林鹏分享：Lua 数据类型

    Lua是动态类型语言,变量不要类型定义,只需要为变量赋值. 值可以存储在变量中,作为参数传递或结果返回. Lua中有8个基本类型分别为:nil.boolean.number.string.userda ...

  6. 【简●解】[ZJOI2005]午餐

    [简●解][ZJOI2005]午餐 [关键词] \(DP\) 排序/贪心 [分析] 首先,一个很明显的贪心思路,就是吃的慢的人先打饭.所以把数据按吃饭时间从大到小排一遍序. 根据\(dp\)的尿性,比 ...

  7. ssh服务介绍

    基本介绍 ssh:安全的远程登陆 要有客户端与服务器端,客户端主动链接服务端,那么服务端地址是不能变的. socket:套接字 标识应用唯一的地址 tcp/udp port端口号 cat /etc/s ...

  8. LeetCode（69） Sqrt(x)

    题目 Total Accepted: 67411 Total Submissions: 286086 Difficulty: Medium Implement int sqrt(int x). Com ...

  9. 【BZOJ 2761】 不重复数字 （哈希算法）

    链接 http://www.lydsy.com/JudgeOnline/problem.php?id=2761 Description 给出N个数,要求把其中重复的去掉,只保留第一次出现的数. 例如, ...

  10. 算法导论 第十二章 二叉搜索树（python）

    上图: 这是二叉搜索树(也有说是查找树的)基本结构:如果y是x的左子树中的一个结点,那么y.key <= x.key(如a图中的6根结点大于它左子树的每一个结点 6 >= {2,5,5}) ...