过渡transition

最新推荐文章于 2021-07-22 10:16:02 发布

苏小画

最新推荐文章于 2021-07-22 10:16:02 发布

阅读量210

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/weixin_44404444/article/details/104143843

版权

作为一个直男我是极其不愿意写过渡效果，况且支持过渡的浏览器版本都比较高。奈何扛不住金钱的诱惑…

transition属性如下：
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

简写方式：transition: property duration timing-function delay;

下面写了一个小栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .box{
        width: 400px;
         height: 300px;
          margin: auto;
          position: relative;
          overflow: hidden;
      }
     .box-top{
        width: 400px;
         height: 300px;
     }
     .box-bottom{
         width: 400px;
         height: 100px;
     background: rgba(255, 255, 225, 0.3);
         text-align: center;
         position: absolute;
         top: 300px;
         left: 0;
         transition: top 1s linear 0s;
     }
     .box:hover>.box-bottom {
         top: 200px;
     }
    </style>
</head>
<body>
    <div class="box">
      <div class="box-top">
        <img src="../pro_2.jpg" alt="">
      </div>
      <div class="box-bottom">
        <h2>1233</h2>
        <p>121313223</p>
      </div>
    </div>


</body>
</html>`

效果图如下

从下往上缓慢往上移动移动到指定位置 box-bottom 的盒子会按照时间内到达指定地方。