【每日一练】89—一个滑动卡片动画UI效果的实现

web前端开发

共 3666字，需浏览 8分钟

· 2022-11-01

写在前面

已经有两天没有更新小练习了，希望大家没有忘记自我练习，保持一种持续学习的习惯很重要。

今天我们一起来练习一个滑动卡片效果，这种卡片式的UI效果，我们在前面的练习中也分享了不少。

但今天这个练习采用了折叠滑动式的设计，这种设计的好处就是，占用页面空间小，对于一些内容多的页面，这种效果是非常实用，现在，我们就一起来看一下它的最终效果：

看完了效果，我们再来看一下它的实现代码。

另外，练习里的图片，是我在一个手工网站截取的，因为我觉得好玩，就保存下来了，这里就不提供图片素材了，大家找一张自己喜欢的图片就好，尺寸为正方形即可，例如，500*500px或者800*800px都可以。

HTML代码：

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>【每日一练】89—一个滑动卡片动画UI效果的实现</title></head><body>  <div class="card">    <div class="contentBx">      <div class="content">        <h2>web前端开发<br><span>一个前端开发设计公众平台</span></h2>        <div class="imgBx">          <img src="img.png">        </div>        <button>欢迎关注</button>      </div>    </div>    <div class="toggle">      <span></span>    </div>  </div>  <script>    let card = document.querySelector('.card');    let cardtoggle = document.querySelector('.toggle');    cardtoggle.onclick = function(){      card.classList.toggle('active');    };</script></body></html>

CSS代码：

*{  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: 'Poppins', sans-serif;}body {  display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;  background: #fff;}.card {  position: relative;  width: 350px;  height: 85px;  background: #00a6bc;  border-radius: 20px;  transition: 0.5s ease-in-out;  filter: drop-shadow(-20px 20px 40px #00a6bc);}.card.active {  height: 420px;}.toggle{  position: absolute;  left: 50%;  transform: translate(-50%);  bottom: -60px;  width: 70px;  height: 60px;  border-bottom-left-radius: 35px;  border-bottom-right-radius: 35px;  background: #00a6bc;  cursor: pointer;}.toggle::before {  content: '';  position: absolute;  left: -34px;  width: 35px;  height: 35px;  background: transparent;  border-top-right-radius: 35px;  box-shadow: 11px -10px 0 10px #00a6bc;}.toggle::after {  content: '';  position: absolute;  right: -34px;  width: 35px;  height: 35px;  background: transparent;  border-top-left-radius: 35px;  box-shadow: -11px -10px 0 10px #00a6bc;}.toggle span {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-70%) rotate(405deg);  width: 10px;  height: 10px;  border-bottom: 3px solid #fff;  border-right: 3px solid #fff;  transition: 0.5s;}.card.active .toggle span {  transform: translate(-50%,-70%) rotate(225deg);}.contentBx {  position: absolute;  inset: 0;  overflow: hidden;}.content {  position: relative;  padding: 20px;  text-align: center;  z-index: 10;  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;}.content h2 {  color: #fff;  font-weight: 500;  font-size: 1.25em;  text-transform: uppercase;  letter-spacing: 0.05em;  line-height: 1.1em;}.content h2 span {  font-size: 0.75em;  font-weight: 400;  letter-spacing: 0.05em;  text-transform: initial;}.imgBx {  position: relative;  width: 250px;  height: 250px;  background: #fff;  margin-top: 20px;  overflow: hidden;  border: 5px solid #fff;  box-shadow: -10px 10px 10px rgba(0,0,0,0.15);  pointer-events: none;}.imgBx img {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  object-fit: cover;}.content button {  position: relative;  margin-top: 20px;  padding: 10px 35px;  border-radius: 25px;  border: none;  outline: none;  cursor: pointer;  box-shadow: -10px 10px 10px rgba(0,0,0,0.15);  font-size: 1em;  text-transform: uppercase;  letter-spacing: 0.1em;  font-weight: 500;  color: #333;}