CSS动画案例--天空中云朵变化效果

图片素材：

需要用到的云朵素材为三张图片（白色云朵透明背景）

html部分：

用一个大的div标签包裹三个子div，外面的div是天空背景，三个子div分别用来存放三朵云。

<body><div class="bg"><div class="cloud_one"></div><div class="cloud_two"></div><div class="cloud_three"></div></div>
</body>

天空的样式以及动画效果：

 .bg{height: 100vh;animation: sky 10s linear infinite;}@keyframes sky{0%{background-color: skyblue;}50%{background-color: rgb(7, 93, 147);}100%{background-color: rgb(3, 45, 61);}}

此时我们可以得到一个颜色随时间渐变的天空背景效果。

云朵的样式以及动画效果：

.bg .cloud_one{width: 300%;height: 100%;background: url(../day09/images/images/cloud_one.png);position: fixed;top: 0;left: 0;animation: cloud 20s linear infinite;}.bg .cloud_two{background: url(../day09/images/images/cloud_two.png);width: 300%;height: 100%;position: fixed;top: 0;left: 0;animation: cloud 40s linear infinite;}.bg .cloud_three{background: url(../day09/images/images/cloud_three.png);width: 300%;height: 100%;position: fixed;top: 0;left: 0;animation: cloud 60s linear infinite;}@keyframes cloud{from{left: 0;}to{left: -200px;}}

shy

CSS动画案例--天空中云朵变化效果相关推荐

12个优美的CSS动画案例
大家好,我是前端实验室的大师兄! 对于网页设计师和开发工程师而言,创建一款极具趣味性和实用性的CSS网页动画,能让网站美观不少 CSS动画,就是通过CSS代码搭建网页动画.允许设计师和开发人员,通过编 ...
css动画定义,CSS3中Animation动画的定义和调用
现在经常会看到一些门户网站的专题使用到CSS3的动画,咋也不能落伍,在此这梳理下动画知识吧,便于后面用到.接下来介绍下Animation动画的定义和调用,在介绍Animation之前需要了解下Keyf ...
html css 磁贴,使用JS配合CSS实现Windows Phone中的磁贴效果
Windows Phone的tile设计的美丽对我来说有余音绕梁的效果.我从来不知道优雅的方块盒子布局能给我深刻的印象.因此我尝试在web里用CSS和Jquery去实现这种tile设计.我已尝试Til ...
纯CSS简单案例合集（折扇效果，资料卡，定格轮播，菜单三角形）
目录 ①折扇效果(2d动画) ②资料卡 ③定格轮播(鼠标移上去会暂停) 度数,速度,颜色之类的可以自己再调整效果图如下 <!DOCTYPE html> <html lang=&qu ...
【Unity植物大战僵尸】向日葵动画、天空中阳光的生成与掉落（二）
目录 3.创建动画目录并生成向日葵动画 4.生成阳光动画 5.管理阳光 6.阳光下落测试 3.创建动画目录并生成向日葵动画将预先准备好的向日葵精灵放到场景中,会默认保存为动画新建Plant图层并 ...
jq+css+echarts——实现echarts中的水球效果——技能提升
最近在写看板,经常用到下面的百分率的展示形式.也可能是用饼图展示的. 看板中经常用到下图中的水球样式:其实就是个百分率的展示: 水球样式和饼图的区分: 水球里面是有个水波纹的动效的,除此之外,基本都是 ...
2-9 CSS动画案例：跳动的心
1.分析: 一个心的构成由:两个圆和一个旋转45°的正方形构成具体的移动方法构成方法没有绝对,只要有足够的想象力,能够做出来就可以. <body><div id="hea ...
CSS 动画指南：原理和实战
简介:无论动画以何种技术载体呈现,无论是传统的手绘动画,还是电脑生成的3D动画,也无论是用Flash还是CSS, 动画的基本原理和设计准则都未曾变过的. 在这篇文章中,我们会先解释CSS动画的基本概念 ...
css动画和js动画比较！
原文地址:http://css-tricks.com/myth-busting-css-animations-vs-javascript/ 译文地址:https://github.com/classi ...
【前端知识点总结】CSS 基础六 - 常见的CSS动画
空间(3d)转换 tramsform: 值 ; 移动 tramsform:translate3d(x,y,z); 添加位移属性 transform: translate3d(x轴, y轴, z轴); ...

CSS动画案例--天空中云朵变化效果

图片素材：

html部分：

天空的样式以及动画效果：

云朵的样式以及动画效果：

CSS动画案例--天空中云朵变化效果相关推荐

最新文章

热门文章