纯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开启硬件加速的使用和坑
Aug 21 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
CSS类名支持中文命名的示例
Apr 04 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
PHP Pear 安装及使用
2009/03/19 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
asp 的 分词实现代码
2007/05/24 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
python实战教程之自动扫雷
2018/07/13 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
Python的collections模块真的很好用
2021/03/01 Python
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
护士实习鉴定范文
2013/12/22 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
超市客服工作职责
2014/06/11 职场文书
体育节口号
2014/06/19 职场文书
自主招生自荐信格式
2015/03/04 职场文书
教师党员个人自我评价
2015/03/04 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
Redis如何一键部署脚本
2021/04/12 Redis