CSS动画以及布局

Posted 2023-03-07 Coding With you.....

1.实现花瓣洒落

技术：伪元素  伪类  圆角 渐变  动画

三栏布局

   .father
background-color: aqua;
position: relative;;
 
 

 .left
    background-color: rgb(255, 0, 25);
    width: 200px;
    float: left;
    height: 20px;

.right
    background-color: rgb(255, 0, 25);
    width: 200px;
    height: 20px;
    float: right;

.center
    background-color: aliceblue;
    overflow: hidden;
    height: 120px;


<div class="father">

        <div class="left1"></div>
        
        
        <div class="right1"></div>
        <div class="center1"></div>
    </div>

高是宽的一半

.outer 
        width: 400px;
        height:400px;
        background: blue;
       
      

      .inner
        width: 100%;
        height: 50%;
        background-color: aqua;
      

<div class="outer">

    <div class="inner"></div>
    </div>