【每日一練】06—實(shí)用又有創(chuàng)意的產(chǎn)品卡片動(dòng)畫
寫在前面
在前面我們已經(jīng)堅(jiān)持練習(xí)了5天，今天我們開(kāi)始第6天的練習(xí)，這個(gè)案例比較實(shí)用，在我們很多的電商網(wǎng)站上，應(yīng)該是使用比較多的，但是并不是每個(gè)一個(gè)產(chǎn)品卡設(shè)計(jì)都是好用又好看的，因此，作為一個(gè)設(shè)計(jì)愛(ài)好者，我希望項(xiàng)目的視覺(jué)效果也要跟上。
今天的這個(gè)案例，哪怕你的團(tuán)隊(duì)里沒(méi)有設(shè)計(jì)師，你也可以做得跟設(shè)計(jì)師一樣漂亮，甚至更好看，當(dāng)然，不僅只是好看，還有實(shí)用。
我們現(xiàn)在就開(kāi)始吧。
今天練習(xí)的最終效果截圖：
原本我是錄了動(dòng)畫效果的，但是錄屏軟件不怎么樣，錄出來(lái)的顏色不好看，大家就看一下這個(gè)小項(xiàng)目的動(dòng)畫效果就好了。
這個(gè)練習(xí)的產(chǎn)品圖片是透明圖，案例里的產(chǎn)品圖和背景圖，這個(gè)都可以自己找，為了方便大家練習(xí)，我也把它圖片打包了，需要的話，可以自行下載，也可以自己尋找你喜歡的圖片，這個(gè)不是重點(diǎn)，也不影響練習(xí)，主要是能明白這個(gè)實(shí)現(xiàn)的原理。
練習(xí)圖片的下載地址：
誠(chéng)通網(wǎng)盤：https://url81.ctfile.com/f/21793581-597413609-7cbae7?p=2698 (訪問(wèn)密碼: 2698)
百度網(wǎng)盤: https://pan.baidu.com/s/17khXfljSBltvu36mMCBKbw （提取碼: xhby ）
HTML代碼：
<html><head><title>【每日一練】06—實(shí)用又有創(chuàng)意的產(chǎn)品卡片動(dòng)畫</title></head><body><div class="container"><ul class="thumb"><li onmouseover="imgURL('shoes1.png')"><img src="shoes1.png"></li><li onmouseover="imgURL('shoes2.png')"><img src="shoes2.png"></li><li onmouseover="imgURL('shoes3.png')"><img src="shoes3.png"></li></ul><div class="imgBox"><h2>耐克運(yùn)動(dòng)鞋</h2><img src="shoes1.png"><ul class="size"><span>尺寸</span><li>42</li><li>43</li><li>44</li><li>45</li></ul><a href="http://www.webqdkf.com" class="btn">加入購(gòu)物車</a></div></div><script type="text/javascript">function imgURL(hmmm){document.querySelector(".imgBox img").src = hmmm;}</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: url(bg.jpg);background-size: cover;background-attachment: fixed;}.container{position: relative;width: 400px;height: 400px;}ul.thumb{position: absolute;top: 50%;transform: translateY(-50%);z-index: 1;}ul.thumb li{list-style: none;width: 100px;height: 100px;margin: 10px 0;display: flex;justify-content: center;align-items: center;background: rgba(255,255,255,0.2);box-shadow: 0 15px 25px rgba(0,0,0,0.05);border-radius: 20px;backdrop-filter: blur(4px);border: 1px solid rgba(255,255,255,0.25);border-top: 1px solid rgba(255,255,255,0.5);border-left: 1px solid rgba(255,255,255,0.5);}ul.thumb li img{width: 80%;transition: 0.5s;}ul.thumb li:hover img{transform: rotate(-35deg);}.imgBox{position: absolute;top: 0;right: 0;padding: 60px 20px;width: 350px;height: 100%;padding-left: 50px;display: flex;justify-content: space-between;align-items: center;flex-direction: column;background: rgba(255,255,255,0.2);box-shadow: 0 15px 25px rgba(0,0,0,0.05);border-radius: 20px;backdrop-filter: blur(4px);border: 1px solid rgba(255,255,255,0.25);border-top: 1px solid rgba(255,255,255,0.5);border-left: 1px solid rgba(255,255,255,0.5);}.imgBox h2{color: #fff;letter-spacing: 1px;}.imgBox img{width: 80%;transition: 0.25s;}.imgBox img:hover{transform: scale(1.5) translateX(20px) rotate(-15deg);}.size{display: flex;justify-content: center;align-items: center;}.size span{color: #fff;font-size: 1.2em;letter-spacing: 1px;margin-right: 5px;}.size li{list-style: none;width: 30px;height: 30px;background: #fff;color: #1e6b7b;display: flex;justify-content: center;align-items: center;margin: 5px;border-radius: 4px;font-weight: 700;box-shadow: 0 2px 10px rgba(0,0,0,0.1);cursor: pointer;transition: 0.25s;}.size li:hover{transform: translateY(-10px);}.btn{position: absolute;bottom: -30px;background: #fff;box-shadow: 0 15px 35px rgba(0,0,0,0.1);border-radius: 30px;text-decoration: none;display: inline-block;padding: 15px 30px;font-weight: 500;color: #1e6b7b;transition: 0.1s;}.btn:hover{letter-spacing: 2px;}
寫在最后
其實(shí)，關(guān)于產(chǎn)品卡片的案例，我們?cè)谝曨l號(hào)上也分享了一些，例如：
今天的內(nèi)容，我們就先到這里，希望今天的小項(xiàng)目對(duì)你有用，如果你覺(jué)得有幫助的話，請(qǐng)點(diǎn)贊我，關(guān)注我，并將它分享給你身邊做開(kāi)發(fā)的朋友，也許能夠幫助到他。
我是楊小愛(ài)，我們明天見(jiàn)。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
