寫在前面
已經有兩天沒有更新小練習了，希望大家沒有忘記自我練習，保持一種持續學習的習慣很重要。
今天我們一起來練習一個滑動卡片效果，這種卡片式的UI效果，我們在前面的練習中也分享了不少。
但今天這個練習採用了摺疊滑動式的設計，這種設計的好處就是，占用頁面空間小，對於一些內容多的頁面，這種效果是非常實用，現在，我們就一起來看一下它的最終效果：
另外，練習里的圖片，是我在一個手工網站截取的，因為我覺得好玩，就保存下來了，這裡就不提供圖片素材了，大家找一張自己喜歡的圖片就好，尺寸為正方形即可，例如，500*500px或者800*800px都可以。<!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>*{ 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;}寫在最後
以上就是今天我跟大家分享的【每日一練】全部內容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點讚我，關注我，並將它分享給你身邊做開發的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
學習更多技能
請點擊下方公眾號
留言列表