效果：

源代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			div{

				margin-top: 10px;

				height: 50px;

				background-color: #FF0000;

				opacity: 0.6;

			}

			.a{

				animation: aa 2s linear 100ms infinite;

			}

			.b{

				animation: bb 2s linear infinite

			}

			.c{

				animation: cc 2s linear infinite

			}

			.d{

				animation:dd 2s linear infinite

			}

			@keyframes aa{

				0%{width: 0;}

				25%{width:200px;}

				50%{width:200px;}

				75%{width:200px;}

				100%{width:200px;}

			}

			@keyframes bb{

				0%{width: 0;}

				25%{width:0px;}

				50%{width:200px;}

				75%{width:200px;}

				100%{width:200px;}

			}

			@keyframes cc{

				0%{width: 0;}

				25%{width:0px;}

				50%{width:0px;}

				75%{width:200px;}

				100%{width:200px;}

			}

			@keyframes dd{

				0%{width: 0;}

				25%{width:0px;}

				50%{width:0px;}

				75%{width:0px;}

				100%{width:200px;}

			}

		</style>

	</head>

	<body>

		<div class="a">

		</div>

		<div class="b">

		</div>

		<div class="c">

		</div>

		<div class="d">

		</div>

	</body>

</html>

HTML5 纯CSS3实现div按照顺序出入效果的更多相关文章

  1. 纯CSS3实现的图片滑块程序 效果非常酷

    原文:纯CSS3实现的图片滑块程序 效果非常酷 之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性 ...

  2. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  3. HTML5 纯CSS3实现正方体旋转3D效果

    实现效果: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  4. 纯CSS3制作卡通场景汽车动画效果

    前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...

  5. 纯css3代码写下拉菜单效果

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

  6. 纯CSS3向右循环闪过效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. 纯CSS3实现蜡烛（冒烟）效果

    1. 闲来无事时在网上看一些前辈的博客文章,自己尝试了一下.学习到最重要的一点就是box-shadow的叠加使用,受益非线.先上一下效果图: 其中有以下重要的几点: 1. 蜡烛底座的border-ra ...

  8. 纯CSS3实现轮播图

    前言 纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...

  9. 纯css3云彩动画效果

      效果描述: 纯CSS3实现的云彩动画飘动效果 非常逼真实用 使用方法: 1.将body中的代码部分拷贝到你的页面中 2.引入对应的CSS文件即可

随机推荐

  1. 创建Oracle数据库实例

    创建Oracle数据库实例 转自oracle数据库创建实例 数据库已经安装完成,可以正常登陆查看用户等操作. system用户只能用normal身份登陆em.除非你对它授予了sysdba的系统权限或者 ...

  2. 100个Shell脚本——【脚本8】每日生成一个文件

    [脚本8]每日生成一个文件 要求:请按照这样的日期格式(xxxx-xx-xx)每日生成一个文件,例如今天生成的文件为)2017-07-05.log, 并且把磁盘的使用情况写到到这个文件中,(不用考虑c ...

  3. 转 关于HttpClient，HttpURLConnection，OkHttp的用法

    转自:https://www.cnblogs.com/zp-uestc/p/10371012.html 1 HttpClient入门实例 1.1发送get请求 1 2 3 4 5 6 7 8 9 10 ...

  4. 面试 Java 后端开发的感受

    上周,密集面试了若干位Java后端候选人,工作经验在3到5年间.我的标准其实不复杂(适用90%小小小公司,BAT等自动忽略): 第一能干活,第二Java基础要好,第三最好熟悉些分布式框架.我相信其它公 ...

  5. ES6 object.defineProperty

    Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象. Object.defineProperty(obj, prop, ...

  6. Apifox（1）比postman更优秀的接口自动化测试平台

    Apifox介绍 Apifox 是 API 文档.API 调试.API Mock.API 自动化测试一体化协作平台,定位 Postman + Swagger + Mock + JMeter.通过一套系 ...

  7. linux文件属性和系统信息

    文件属性 1.权限 权限指某一个用户针对某个文件所能做的操作 1.权限的种类 可读(r) 可写(w) 可执行(x) 无权限(-) 2.权限位 linux中的权限位分为三个部分,分别是属主.属组和其他人 ...

  8. 拉丁超立方体初始化种群(附Matlab代码)

    拉丁超立方体初始化种群 1.引言 群智能算法一般以随机方式产生初始化种群的位置,但是这种方式可能导致种群内个体分布不均匀.拉丁超立方体抽样方法产生的初始种群位置,可以保证全空间填充和抽样非重叠,从而使 ...

  9. C语言程序设计：二分查找（折半查找）

    目录 C语言程序设计:二分查找(折半查找) 1.什么是二分查找 2.二分查找的优点 3.二分查找的缺点 4.二分查找原理 5.源代码实现 6.后话 C语言程序设计:二分查找(折半查找) 1.什么是二分 ...

  10. PSpiceAA-高级分析例程

    一.高级分析应用例程 1.1.例程电路原理图(同向放大电路) 器件模型使用PSpice-ELEM库中的模型. 1..1.1.仿真测试波形图 1.2.灵敏度分析 1.2.1菜单选择:PSpice-> ...