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

港控/mmm° 2022-12-24 10:51 169阅读 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 条评论，169人围观）

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

相关阅读

相关利用Html+纯CSS实现计时器效果

问题描述最近在学习的过程中一直静不下心来，在网上找了一些计时器软件安装包带很多第三方流氓软件，决定干脆自己做一款。开始考虑利用Js实现计时逻辑业务，后面仔细想了一下...

素颜马尾好姑娘i/ 2024年04月18日 12:03/ 0 赞/ 94 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关纯CSS3实现的标签效果

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

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

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

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

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

相关纯 CSS3 实现波浪效果

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

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