纯CSS3实现div按照顺序出入效果


Posted in HTML / CSS onJuly 15, 2021

本文主要介绍了纯CSS3实现div按照顺序出入效果,具有一定的参考价值,感兴趣的可以了解一下

效果:

纯CSS3实现div按照顺序出入效果

源代码:

<!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>

到此这篇关于纯CSS3实现div按照顺序出入效果的文章就介绍到这了,更多相关CSS3 div按照顺序出入效果内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
详解CSS中的特指度和层叠问题
Jul 15 #HTML / CSS
html form表单基础入门案例讲解
html+css实现环绕倒影加载特效
html5表单的required属性使用
Jul 07 #HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 #HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
You might like
Php+SqlServer实现分页显示
2006/10/09 PHP
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
vue中created和mounted的区别浅析
2019/08/13 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
用Python给文本创立向量空间模型的教程
2015/04/23 Python
Python实现简单的代理服务器
2015/07/25 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
init进程的作用
2015/08/20 面试题
党员教师工作决心书
2014/03/13 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
合理化建议书
2015/02/04 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
婚庆主持词大全
2015/06/30 职场文书