纯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 相关文章推荐
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 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邮件专题
2006/10/09 PHP
PHPShop存在多个安全漏洞
2006/10/09 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
接收键盘指令的脚本
2006/06/26 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
用python绘制樱花树
2020/10/09 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
大学生最新职业生涯规划书范文
2014/01/12 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
办理房产证委托书
2014/09/18 职场文书
2014年电厂工作总结
2014/12/04 职场文书
常住证明范本
2015/06/23 职场文书
2015党建工作简报
2015/07/21 职场文书
结婚主持人致辞
2015/07/28 职场文书
2015国庆节感想
2015/08/04 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB