卡片划入效果

最新推荐文章于 2024-11-13 08:41:42 发布

codingFunTime

最新推荐文章于 2024-11-13 08:41:42 发布

阅读量84

点赞数 1

分类专栏：前端动画文章标签： css css3 html

本文链接：https://blog.csdn.net/hktkkkk/article/details/127664867

版权

前端动画专栏收录该内容

23 篇文章 2 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> </title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="hvr-sweep-to-top">
    <div class="top">
      制造
    </div>
    <div class="bottom">
      针对模具企业定制的信息化管理系统，集技术、生产、管理为一体的企业管理系统。可以为企业提供包括数据管理、生产调度管理、数据分析等管理功能，为模具企业打造一个扎实、可靠、全面、可行的制造协同管理平台。
    </div>
  </div>
</body>

</html>

css

.hvr-sweep-to-top {
  position: relative;
  width: 175px;
  height: 280px;
  background: url(http://hmcloud.cosmoplat.com/img/manufacture-bg.9e0822cb.jpg);
  overflow: hidden;
}

.hvr-sweep-to-top>.top {
  width: unset;
  font-size: 20px;
  color: rgb(255, 255, 255);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s linear;
}

.hvr-sweep-to-top>.bottom {
  height: 100%;
  font-size: 12px;
  color: #fff;
  line-height: 21px;
  transform: translateY(100%);
  transition: transform .5s linear;
  background-color: rgba(0, 93, 221, .5);
  padding: 30px 20px;
}



.hvr-sweep-to-top:hover>.bottom {
  transform: translateY(0);
}

.hvr-sweep-to-top:hover>.top {
  opacity: 0;
}