css3 transtion属性的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了css3 transtion属性的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

主要实现多个内容排列时从下到上过渡或者从左到右过渡。
思路：主要是利用flex布局的flex-direction属性和align-items属性。

flex-direction属性决定主轴的方向（即项目的排列方向）
align-items属性定义项目在交叉轴上如何对齐。

一、从下到上过渡（方案1）

1.先上效果图

效果图

2.代码如下（示例）：

html

 <div class="box">
   <div class="box1">111</div>
   <div class="box2">222</div>
   <div class="box3">333</div>
   <div class="box4">444</div>
 </div>

css文章来源地址https://www.toymoban.com/news/detail-582595.html


  .box{
    background-color: pink;
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: column-reverse;
  }
  .box1{
    width: 400px;
    height: 50px;
    background-color:#142385;
    transition: height 1s;
  }
  .box2{
    width: 400px;
    height: 50px;
    background-color: #159298;
    transition: height 1s;
  }
  .box3{
    width: 400px;
    height: 50px;
    background-color: #42bcad;
    transition: height 1s;
  }
  .box4{
    width: 400px;
    height: 50px;
    background-color: #66ffcc;
    transition:height 1s;
  }
  .box1:hover,
  .box2:hover,
  .box3:hover,
  .box4:hover{
    height: 300px;
  }

二、从下到上过渡（方案2)

1.先上效果图

flex-end

2.代码如下（示例）：

html

 <div class="box">
   <div class="box1">111</div>
   <div class="box2">222</div>
   <div class="box3">333</div>
   <div class="box4">444</div>
 </div>

css


  .box{
    background-color: pink;
    width: 400px;
    height: 400px;
    display: flex;
    align-items: flex-end;
  }
  .box1{
    width: 400px;
    height: 50px;
    background-color:#142385;
    transition: height 1s;
  }
  .box2{
    width: 400px;
    height: 50px;
    background-color: #159298;
    transition: height 1s;
  }
  .box3{
    width: 400px;
    height: 50px;
    background-color: #42bcad;
    transition: height 1s;
  }
  .box4{
    width: 400px;
    height: 50px;
    background-color: #66ffcc;
    transition:height 1s;
  }
  .box1:hover,
  .box2:hover,
  .box3:hover,
  .box4:hover{
    height: 300px;
  }

三、从右向左过渡（方案1）

1.先上效果图

row-

2.代码如下（示例）：

html

 <div class="box">
   <div class="box1">111</div>
   <div class="box2">222</div>
   <div class="box3">333</div>
   <div class="box4">444</div>
 </div>

css

 .box {
    background-color: pink;
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: row-reverse;
  }
  .box1 {
    width: 50px;
    height: 400px;
    background-color: #142385;
    transition: width 1s;
  }
  .box2 {
    width: 50px;
    height: 400px;
    background-color: #159298;
    transition: width 1s;
  }
  .box3 {
    width: 50px;
    height: 400px;
    background-color: #42bcad;
    transition: width 1s;
  }
  .box4 {
    width: 50px;
    height: 400px;
    background-color: #66ffcc;
    transition: width 1s;
  }
  .box1:hover,
  .box2:hover,
  .box3:hover,
  .box4:hover {
    width: 300px;
  }

四、从右向左过渡（方案2）

1.先上效果图

column

2.代码如下（示例）：

html

 <div class="box">
   <div class="box1">111</div>
   <div class="box2">222</div>
   <div class="box3">333</div>
   <div class="box4">444</div>
 </div>

css

  .box {
    background-color: pink;
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .box1 {
    width:100px;
    height: 100px;
    background-color: #142385;
    transition: width 1s;
  }
  .box2 {
    width: 100px;
    height: 100px;
    background-color: #159298;
    transition: width 1s;
  }
  .box3 {
    width: 100px;
    height: 100px;
    background-color: #42bcad;
    transition: width 1s;
  }
  .box4 {
    width: 100px;
    height: 100px;
    background-color: #66ffcc;
    transition: width 1s;
  }
  .box1:hover,
  .box2:hover,
  .box3:hover,
  .box4:hover {
    width: 400px;
  }

到了这里，关于css3 transtion属性的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！