让自己的页面更好看，更美观。（css3的动画，2D,css3的布局）

2023-07-14 80

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 让自己的页面更好看，更美观。（css3的动画，2D,css3的布局）

要认你的模块进行向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>