纯CSS动画图

于 2018-10-19 12:59:46 发布
阅读量311 收藏 2
点赞数 2
分类专栏： 软件开发 文章标签： HTML/CSS 软件开发 前端开发

动画

 

过程

实现过程：

纯CSS

animation动画属性和@KeyFrames方法

素材：

云3

 

 

 

 

 

 

 

 

 

 

 

 

云2

云1

实现源代码 HTML部分：

 

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯css3静态网页云彩动画图</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="sky">
	<div class="clouds_one"></div>
	<div class="clouds_two"></div>
	<div class="clouds_three"></div>
</div>
</body>
</html>

实现源代码 CSS部分：

  html, body {
  margin: 0;
  padding:0;
  height: 100%
}

.sky {
  height: 100%;
  background: #007fd5;
  position: relative;
  overflow: hidden;
  -webkit-animation: sky_background 50s ease-out infinite;/*动画过程 时间 以慢速结束 无限循环*/
  -moz-animation: sky_background 50s ease-out infinite;
  -o-animation: sky_background 50s ease-out infinite;
  animation: sky_background 50s ease-out infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.sky .clouds_one {
  background: url("../images/cloud_one.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_one 50s linear infinite;
  -moz-animation: cloud_one 50s linear infinite;
  -o-animation: cloud_one 50s linear infinite;
  animation: cloud_one 50s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.sky .clouds_two {
  background: url("../images/cloud_two.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_two 75s linear infinite;
  -moz-animation: cloud_two 75s linear infinite;
  -o-animation: cloud_two 75s linear infinite;
  animation: cloud_two 75s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.sky .clouds_three {
  background: url("../images/cloud_three.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_three 100s linear infinite;
  -moz-animation: cloud_three 100s linear infinite;
  -o-animation: cloud_three 100s linear infinite;
  animation: cloud_three 100s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@-webkit-keyframes sky_background {
  0% {
	background: #007fd5;
	color: #007fd5
  }
  50% {
	background: #000;
	color: #a3d9ff
  }
  100% {
	background: #007fd5;
	color: #007fd5
  }
}
@-moz-keyframes sky_background {
  0% {
	background: #007fd5;
	color: #007fd5
  }
  50% {
	background: #000;
	color: #a3d9ff
  }
  100% {
	background: #007fd5;
	color: #007fd5
  }
}
@keyframes sky_background {
  0% {
	background: #007fd5;
	color: #007fd5
  }
  50% {
	background: #000;
	color: #a3d9ff
  }
  100% {
	background: #007fd5;
	color: #007fd5
  }
}

@-webkit-keyframes cloud_one {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}
@-moz-keyframes cloud_one {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}
@keyframes cloud_one {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}

@-webkit-keyframes cloud_two {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}
@-moz-keyframes cloud_two {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}
@keyframes cloud_two {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}

@-webkit-keyframes cloud_three {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}
@-moz-keyframes cloud_three {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}
@keyframes cloud_three {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}

 

剑云锋
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS3动画按钮
06-12
纯CSS3动画按钮是网页设计中的一个重要元素，它利用了CSS3的新特性，如过渡（transition）、动画（animation）和伪类（pseudo-classes），来实现丰富的交互效果，提升用户体验。下面将详细介绍这些知识点。 1. CSS3...
HTML 纯CSS下划线出现动画
03-05
HTML 纯CSS下划线出现动画
纯css loading动画
11-08
纯CSS Loading动画是一种在网页加载过程中展示的交互元素，它使用CSS（层叠样式表）技术来创建动态效果，向用户表明页面正在加载。这种动画通常由简单的几何形状和过渡效果组成，不需要JavaScript或者额外的图像资源...
纯CSS3创意气泡动画特效
07-24
在本文中，我们将深入探讨“纯CSS3创意气泡动画特效”这一主题，这是一种利用CSS3的关键帧动画（keyframes）特性来实现的创新设计。这种特效能够为网站添加动态和互动性，提升用户体验，特别适用于儿童网站、社交...
纯CSS3网页底部波浪动画特效
06-24
在本文中，我们将深入探讨如何使用纯CSS3实现一款创新且引人注目的网页底部波浪动画特效。这种特效能够为网页增添动态美感，提升用户体验，尤其适用于那些追求视觉效果和创新设计的网站。 首先，我们需要理解CSS3的...
【创新未发表】Matlab实现秃鹰优化算法BES-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
巡检python.mp4
07-29
巡检python.mp4
三个版本企业数字化转型合集（2001-2022）（全新整理)
07-29
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/140383422 2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题 3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！ 3、课程引用: 经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理 ## 数据指标说明 整理了基本上最常见的数字化转型的度量方式，全部都是目前为止最为常用的顶刊数据用法，具体数据说明如下（全部为2021最新版本） 一、吴非版本（2007-2021） 二、袁淳版本（2007-2021）（数据丰富） 三、张永珅版本 2001-2022
【SCI一区】Matlab实现蝗虫优化算法GOA-CNN-LSTM-Attention的风电功率预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
Matlab实现蝠鲼觅食优化算法MRFO-Kmean-Transformer-BiLSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
监控视频车辆计数统计功能研究
最新发布
07-29
针对实时获取监控视频车流量的迫切需求，利用 7<3+=$>O?@A%+ 实现监控视频车辆计数统计功能( 首先，通过背景减除法的前景提取算法来分割出图像中的车辆(然后，通过轮廓检测和形态学操作对车辆 进行处理和过滤，以消除噪声和不必要的检测结果确保准确计数(最后，将该方案与 67879, 模型和 27CD 算法相结合作对比(实验结果表明，两种方案都能够有效地实现车辆的计数，但传统图像处理没有 深度学习精度高，且难以适应不同路段的道路场景，为此提出将传统图像处理与深度学习相结合的建议， 为车辆计数提供更好的解决方案(
基于ARM64架构CPU使用docker-compose一键离线部署zookeeper 3.8.4分布式集群工具
07-29
原文链接：https://blog.csdn.net/m0_37814112/article/details/140762915 实现功能如下： 1、支持单机部署（1 zookeeper）。 2、支持单机伪集群部署（3 zookeeper）。 3、支持多机分布式机部署（3 zookeeper）。 4、支持数据目录、端口、JVM内存。 5、支持zookeeper配置文件、数据目录持久化。 6、支持部署、启动、停止、卸载、检测等操作。
基于C++和Opencv开发的3D合成孔径粒子图像测速方法+源码（毕业设计&课程设计&项目开发）
07-29
基于C++开发的3D合成孔径粒子图像测速方法+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于C++开发的3D合成孔径粒子图像测速方法+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于C++开发的3D合成孔径粒子图像测速方法+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于C++开发的3D合成孔径粒子图像测速方法+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于C++开发的3D合成孔径粒子图像测速方法+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于C++开发的3D合成孔径粒子图像测速方法+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~
宝塔Linux面板安装Jumpserverv3.10.12-lts教程记录
07-29
这个时jumpserver的配置文件，解压密码手机号码11位
【创新未发表】Matlab实现遗传算法GA-Kmean-Transformer-BiLSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
基于51单片机的无线式手持电子鼻系统的开发与应用研究
07-29
电子鼻已广泛地应用于生活中的许多领域。手持式电子鼻的发展更是拓展了电子鼻的应用范围。目前的手持式电子鼻大多是以单片机为核心的嵌入式系统，且自身存在一个缺陷，即便携性与分析能力的矛盾。鉴于此本文实现了两款基于51单片机的无线式手持电子鼻系统——NSSRL-H1电子鼻与NSSRL-H2电子鼻。该电子鼻系统由信息获取与数据分析两个分离模块组成，因而兼具比较好的便携性与比较强的分析功能。该电子鼻系统具有低成本、无线化的特点，并有望适用于生产流程控制，环境监测等场合。 NSSRL-H1电子鼻的成本在RMB10000以内，尺寸为200×130×55mm³,重量为934g,工作能耗约6W,能够连续工作3.2h。它采用7个商用TGS气体传感器(8个气敏元件)组成的MOS气体传感器阵列，能够同时采集8通道的气体传感器信号，并在每秒内对每个通道采集10个样本点。在NSSRL-H1电子鼻的基础上，经过结构、电路、软件上的优化后实现的NSSRL-H2的电子鼻的尺寸为114×60×45mm²,重量约为450g,工作能耗减小至3.6W以内，连续工作时间为4h;通过丝网印刷工艺制作了尺寸为6×5.2×0.38mm³的8元件MOS气体传感器阵列。NSSRL-H2电子鼻不仅比NSSRL-H1电子鼻具有更小的体积和功耗，以及更优化的传感器阵列，而且增加了人机交互的界面与功能。
【创新未发表】Matlab实现星雀优化算法NOA-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现飞蛾扑火优化算法MFO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
2024智能车部分-智能车竞赛
07-29
2024智能车部分-智能车竞赛
纯CSS实现赛车Loader动画效果
总结来说，这个纯CSS赛车Loader动画是通过精心设计的CSS选择器和属性，以及对CSS动画的熟练运用，创造出的一个既有趣又引人注目的加载指示器。它不仅展示了CSS的灵活性，也提供了一个学习和实践CSS动画技巧的好例子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值