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

港控/mmm° 2022-12-24 10:51 140阅读 0赞

## 效果： ##

![20201127185646391.gif][]

## 源代码： ##

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

[20201127185646391.gif]: /images/20221120/8461a0e37ec5408c869b39e775e8936d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，140人围观）

还没有评论，来说两句吧...

相关阅读

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

效果： ![20201127185646391.gif][] 源代码： <!DOCTYPE html> <html> <head>

港控/mmm°/ 2022年12月24日 10:51/ 0 赞/ 141 阅读

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

实现效果： ![20201127184938505.gif][] 实现代码： <!DOCTYPE html> <html> <head>

Love The Way You Lie/ 2022年12月24日 10:50/ 0 赞/ 253 阅读

相关纯css3实现表格固定列效果

使用css3的sticky属性父元素不能overflow:hidden或者overflow:auto属性。必须指定top、bottom、left、righ

柔光的暖阳◎/ 2022年12月03日 02:20/ 0 赞/ 197 阅读

相关纯css html代码,纯css3实现文字动画

先上代码，代码如下： css3动画 - daimami.com 示例文字关于一些属性的说明： css3中的动画功能分为transitions功能和animations

心已赠人/ 2022年10月06日 12:45/ 0 赞/ 234 阅读

相关纯CSS实现3D翻牌效果

CSS3演武场继续CSS案例研究，今天来看一个纯CSS实现的3D翻牌效果。简易效果请大家狠戳这里[在线体验][Link 1]，或[下载收藏][Link 2]。改进效果请

待我称王封你为后i/ 2022年08月25日 08:36/ 0 赞/ 413 阅读

相关纯CSS实现3D折纸效果

今天继续来看一个纯CSS实现的[3D折纸效果][3D]，效果如下图。基于上一个效果《纯CSS实现图像3D悬停效果》而开发的，没有看过的童鞋欢迎[移步][Link 1]。本效

野性酷女/ 2022年08月25日 05:17/ 0 赞/ 319 阅读

相关纯CSS实现图像3D悬停效果

今天来看一个纯CSS实现的图像3D效果，请大家先到我的codepen里看看[效果][Link 1]，效果如下图所示。 ![SouthEast][] 左边为起始状态，右

男娘i/ 2022年08月25日 02:17/ 0 赞/ 261 阅读

相关纯CSS3实现的标签效果

1.效果分析纯CSS3实现的标签效果，如图1所示，看看[demo][]。该标签主要有三个部分组成，左侧的三角形、右侧的圆角矩形和文字前面的小圆点。重点在左侧三角形和文字前面

浅浅的花香味﹌/ 2022年02月27日 01:17/ 0 赞/ 348 阅读

相关【html5】纯css实现圆圈中显示居中文字效果

为了实现qq邮箱app的邮件显示效果，就是哪个邮件左边的图案，当没有找到对应logo时，以主题头一个字作为logo 代码如下： <html> <head>

ゝ一纸荒年。/ 2021年11月06日 00:02/ 0 赞/ 399 阅读

相关纯 CSS3 实现波浪效果

1.使用linear-gradient来做小波浪线 ①原理: linear-gradient(45deg, red, transparent 45%) 是个渐变

水深无声/ 2021年09月14日 15:42/ 0 赞/ 1179 阅读