要认你的模块进行向X方向布局,和Y方向的布局。如何操作呢？
css布局的方式
向Y方向的布局
display:flex; flex-wrap: wrap; flex-direction: column; flex-direction: column-reverse; flex-direction: inherit; flex-direction: unset; align-content: space-around; align-items: flex-start; align-items: flex-end; align-items: stretch; align-items: center; align-items: flex-end; flex-wrap: wrap; align-content: space-around; align-content: space-between;
向X方向布局
display:flex; /*主 x*/ flex-direction: row; flex-direction: row-reverse; /*则*/ /*flex-direction: column; flex-direction: column-reverse;*/ justify-content: flex-end; justify-content: center; justify-content: space-around; justify-content: space-between; flex-wrap: wrap;
css3动画与二2D
overflow: hidden; border: solid 2px red; font-weight: bolder; width: 200px; height: 200px; float: left; margin: 10px; background-color: #FF99CC; /*2D转动的角度*/ transform: rotate(125deg); /*2D转动的时间*/ transition: all 5s; /*动画名称*/ animation-name: k; animation-duration: 15s; /*动画运行运动曲线*/ /* animation-timing-function: ease; animation-timing-function: ease-in-out;*/ animation-timing-function: ease-out; /*动画播放次数*/ animation-iteration-count: 5; /*动画是否反向*/ /* animation-direction: alternate;*/ animation-direction: alternate-reverse; /*动画初始*/ /* animation-fill-mode: backwards; animation-fill-mode: forwards;*/ animation-fill-mode: both; } /*当鼠标经过*/ div:hover{ /* 当鼠标经过是色彩为green*转动-200度*/ overflow: hidden; transform-origin: 100px 100px; background-color: green; transform: rotate(-200deg); /*缩放的位置*/ transform: scale(3,2); } div:before { display: block; content: '增加的内容divbefore'; height: 200px; width: 200px; background-color: yellow; /*设置原点*/ transform-origin: left bottom; transform: rotate(60deg); transition: all 5s; } div:hover::before{ overflow:hidden ; /* 当鼠标经过是色彩为green*转动-200度*/ overflow: hidden; transform-origin: 100px 100px; background-color: red; transform: rotate(-180deg); /*缩放的位置*/ transform: scale(3,2); } /*动画的效果图*/ @keyframes k { 15% { transform: translate(1000px, 0); background: lavender; font-size: 20px; height: 200px; } 45% { transform: translate(1000px, 0); height: 300px; background: lavender; font-size: 50px; } 55% { transform: translate(1000px, 500px); width: 200px; background: royalblue; height: 200px; } 65% { transform: translate(0px, 500px); height: 200px; background: peachpuff; font-size: 200px; } 75% { transform: translate(0px, 500px); height: 200px; background: yellow; font-size: 20px; } 85% { transform: translate(0px, 500px); height: 200px; background: palevioletred; font-size: 20px; } 95% { transform: translate(0px, 500px); height: 200px; background: pink; font-size: 20px; } 100% { transform: translate(0px, 0px); }
看一个案例（去思考用了那些css3属性实现的）
如果级将这个属性删去呢？overflow:hidden ;
在来观察一遍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div { /* overflow: hidden;*/ border: solid 2px red; font-weight: bolder; width: 200px; height: 200px; float: left; margin: 10px; background-color: #FF99CC; /*2D转动的角度*/ transform: rotate(125deg); /*2D转动的时间*/ transition: all 5s; /*动画名称*/ animation-name: k; animation-duration: 15s; /*动画运行运动曲线*/ /* animation-timing-function: ease; animation-timing-function: ease-in-out;*/ animation-timing-function: ease-out; /*动画播放次数*/ animation-iteration-count: 5; /*动画是否反向*/ /* animation-direction: alternate;*/ animation-direction: alternate-reverse; /*动画初始*/ /* animation-fill-mode: backwards; animation-fill-mode: forwards;*/ animation-fill-mode: both; } /*当鼠标经过*/ div:hover{ /* 当鼠标经过是色彩为green*转动-200度*/ /* overflow: hidden;*/ transform-origin: 100px 100px; background-color: green; transform: rotate(-200deg); /*缩放的位置*/ transform: scale(3,2); } div:before { display: block; content: '增加的内容divbefore'; height: 200px; width: 200px; background-color: yellow; /*设置原点*/ transform-origin: left bottom; transform: rotate(60deg); transition: all 5s; } div:hover::before{ /* overflow:hidden ;*/ /* 当鼠标经过是色彩为green*转动-200度*/ overflow: hidden; transform-origin: 100px 100px; background-color: red; transform: rotate(-180deg); /*缩放的位置*/ transform: scale(3,2); } /*动画的效果图*/ @keyframes k { 15% { transform: translate(1000px, 0); background: lavender; font-size: 20px; height: 200px; } 45% { transform: translate(1000px, 0); height: 300px; background: lavender; font-size: 50px; } 55% { transform: translate(1000px, 500px); width: 200px; background: royalblue; height: 200px; } 65% { transform: translate(0px, 500px); height: 200px; background: peachpuff; font-size: 200px; } 75% { transform: translate(0px, 500px); height: 200px; background: yellow; font-size: 20px; } 85% { transform: translate(0px, 500px); height: 200px; background: palevioletred; font-size: 20px; } 95% { transform: translate(0px, 500px); height: 200px; background: pink; font-size: 20px; } 100% { transform: translate(0px, 0px); } } </style> <title>动画加二D</title> </head> <body> <div> 我是div动画+二维的综合案例 </div> <hr> <li><a href="项目四.html">项目四</a></li> </body> </html>
上面是最重要的代码。自己去试试下面的案例吧
案例一
案例二
案例三
案例四
