代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS Grid And Animate Show</title> <link rel="stylesheet" type="text/css" href="animate.min.css"> <style type="text/css"> *{ margin:0; } html,body{ height:100%; } .container { height:100%; display: grid; grid-template-columns:repeat(8,1fr); grid-template-rows: repeat(8,1fr); } .a{ background-color:red; border:10px solid blue; grid-row-start: 1; grid-column-start: 1; grid-row-end: 2; grid-column-end: 2; margin:5px; } .d{ background-color:red; border:10px solid blue; grid-row-start: 1; grid-column-start: 7; grid-row-end: 2; grid-column-end: 9; margin:5px; } .b{ background-color:red; border:10px solid blue; grid-row-start: 7; grid-column-start: 1; grid-row-end: 9; grid-column-end: 3; margin:5px; } .c{ background-color:red; border:10px solid blue; grid-row-start:6; grid-column-start:7; grid-row-end:9; grid-column-end: 9; margin:5px; } .center{ border:2px solid #CCC; padding:5px; grid-row-start:4; grid-column-start:4; grid-row-end:6; grid-column-end: 6; background-image:url(http://doc.exesoft.cn/bg-view.jpg); background-size:100% 100%; box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div class="container"> <div class="a animated bounceInLeft">A</div> <div class="b animated rotateInDownLeft">B</div> <div class="c animated bounceInLeft ">C</div> <div class="d animated rotateInDownLeft">D</div> <div class="center animated bounceInLeft">Center</div> </div> </body> </html>
上方的动画库CSS文件:https://blog-static.cnblogs.com/files/exesoft/animate.min.css
课后作业:
1.复制上述代码,预览查看效果.
2.读懂上述代码。
预览最终效果(通过刷新页面,观察页面Box动画效果)如下：
A
B
C
D
Center