【每日一練】89—一個滑動卡片動畫UI效果的實現(xiàn)
寫在前面
已經(jīng)有兩天沒有更新小練習了，希望大家沒有忘記自我練習，保持一種持續(xù)學習的習慣很重要。
今天我們一起來練習一個滑動卡片效果，這種卡片式的UI效果，我們在前面的練習中也分享了不少。
但今天這個練習采用了折疊滑動式的設計，這種設計的好處就是，占用頁面空間小，對于一些內容多的頁面，這種效果是非常實用，現(xiàn)在，我們就一起來看一下它的最終效果：
<html><head><meta charset="UTF-8"><title>【每日一練】89—一個滑動卡片動畫UI效果的實現(xiàn)</title></head><body><div class="card"><div class="contentBx"><div class="content"><h2>web前端開發(fā)<br><span>一個前端開發(fā)設計公眾平臺</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;}
寫在最后
以上就是今天我跟大家分享的【每日一練】全部內容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點贊我，關注我，并將它分享給你身邊做開發(fā)的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
學習更多技能
請點擊下方公眾號
評論
圖片
表情