HTML5 纯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;

 animation: aa 2s linear 100ms infinite;

 animation: bb 2s linear infinite

 animation: cc 2s linear infinite

 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 

css+div 今日总结 网页布局常用的布局是顶部（top）、底部(footer)、中间部分(center)。顶部一般是标题（title）和菜单(menu),菜单一级菜单和二级菜单，二级菜单的样式方面有多中变化，一般体现在鼠标悬浮，鼠标点击时的字体颜色的更改和局部背景颜色的更改
给我一个 div + 三行 css，还你一个超级马里奥 要绘制马里奥，我们需要照着图，将图进行格子化，然后一个格子一个格子的绘制。。。。 那是不可能的！ 作为一个程序员，这么多色块都要手动绘制，开玩笑，这不是折磨人吗。