【案例】使用CSS3实现天空变化效果

使用到的图片素材：（都是一些云朵图片，背景是透明的）

图片一：

图片二：

图片三：

先写html结构，html结构很简单，只需要4个div标签即可，外面包裹的div用来设置背景，即天空颜色，里面三个div用来放云朵：

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

接下来写CSS样式：
设置一个天蓝色的背景色：background-color: skyblue;
然后设置背景动画，变化的效果是：天蓝色–> 黑色–> 天蓝色

@keyframes sky {0%{background-color: skyblue;}50%{background-color: #000;}100%{background-color: skyblue;}}

然后设置动画播放：animation: sky 10s linear infinite;
设置完之后，就可以得到下面天空变化的效果：

接下来再来设置云朵的样式，三个云朵样式都是一样的：

.bg .cloud_one{width: 300%;height: 100%;background: url('./images/cloud_one.png') repeat-x;position: fixed;top: 0;left: 0;animation: cloud 20s linear infinite;}

然后再设置云朵动画，主要是让云朵不断向左移动：

@keyframes cloud {from{left: 0;}to{left: -200%;}}

然后让动画播放：animation: cloud 60s linear infinite;

来看看最终效果吧！

下面是完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}/* 设置背景样式 */.bg{height: 100vh;background-color: skyblue;animation: sky 10s linear infinite;}/* 设置云彩样式 */.bg .cloud_one{width: 300%;height: 100%;background: url('../day09/images/cloud_one.png') repeat-x;position: fixed;top: 0;left: 0;animation: cloud 20s linear infinite;}.bg .cloud_two{width: 300%;height: 100%;background: url('../day09/images/cloud_two.png') repeat-x;position: fixed;top: 0;left: 0;animation: cloud 40s linear infinite;}.bg .cloud_three{width: 300%;height: 100%;background: url('../day09/images/cloud_three.png') repeat-x;position: fixed;top: 0;left: 0;animation: cloud 60s linear infinite;}/* 设置云彩轮播 */@keyframes cloud {from{left: 0;}to{left: -200%;}}/* 设置天空轮播 */@keyframes sky {0%{background-color: skyblue;}50%{background-color: #000;}100%{background-color: skyblue;}}</style>
</head>
<body><div class="bg"><div class="cloud_one"></div><div class="cloud_two"></div><div class="cloud_three"></div></div>
</body>
</html>

【案例】使用CSS3实现天空变化效果相关推荐

HTML2d动态效果图,html5+css3实现2D-3D动画效果实例
html5+css3实现2D-3D动画效果实例主要实现的功能就是一些2D.3D的动画效果,如平移.缩放.旋转等等. 文章目录 html5+css3实现2D-3D动画效果实例 2D变换 3D变换案例 ...
前端如何实现音乐盒胶盘的转动_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站蘑菇街原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
图片流_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果?
首先,我们来看一下什么是瀑布流布局效果,比如电商网站蘑菇街原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
HTML小案例-使用CSS3实现网页加载loding动画
HTML小案例-使用CSS3实现网页加载loding动画话不多说先看效果 ** 以下为源代码 ** <!DOCTYPE html> <html lang="zh-CN&q ...
html5 相册翻转效果,HTML5 css3：3D旋转木马效果相册
这篇博客的目的是因为上篇HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY 效果 ...
玩转CSS3的3D动画效果
效果展示基础知识 transform-style:启用 3D 模式要利用 CSS3 实现 3D 的效果,最主要的就是借助 transform-style 属性.transform-style 只有 ...
纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
css3 各种纸张贴纸效果
请使用支持CSS3的浏览器查看效果: Box1 Box2 Box3 Box4 Box5 Box6 Box7 Box8 Box9 Box10 Box11 Box12 Box13 Box14 Box15 ...
css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构该css3线条波浪动画效果的HTML结构如下: CSS样式然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...

【案例】使用CSS3实现天空变化效果

【案例】使用CSS3实现天空变化效果相关推荐

最新文章

热门文章