整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
高雙手！！！
作為一個(gè)在線設(shè)計(jì)平臺(tái)，稿定設(shè)計(jì)實(shí)名自薦！
另外，稿叔也從俺家設(shè)計(jì)師們手上要來(lái)了超多高逼格素材網(wǎng)站，希望能幫到你們！
話不多說(shuō)，先上個(gè)匯總圖：
1、FreePNGs——海量免費(fèi)PNG素材資源
FreePNGs有超過(guò)17w張免費(fèi)的 PNG 透明圖片可供下載，所有的圖像的都是可免費(fèi)下載使用的。
圖片分類豐富多樣，在這里你可以輕松找到你喜歡的人物、植物、建筑、交通工具等PNG圖片資源，是一個(gè)值得你收藏的 PNG 海量圖庫(kù)網(wǎng)站。
P.S.可供個(gè)人自由使用，但是商業(yè)用途可能需要注意
2、Pngtree——免費(fèi)PNG圖片資源平臺(tái)
Pngtree提供數(shù)百萬(wàn)個(gè)PNG圖形資源可供所有人免費(fèi)下載，專業(yè)設(shè)計(jì)師都在用的圖片資源平臺(tái)！
它擁有豐富的免版稅 PNG 圖像、矢量圖、背景圖、模板、文本效果等圖形資源，只要注冊(cè)就可以獲得每天 2 次免費(fèi)下載的機(jī)會(huì)。
3、pngimg——海量 PNG 免摳圖素材庫(kù)
PngImg 是一個(gè)非營(yíng)利性的 PNG 透明背景圖片素材庫(kù)，該網(wǎng)站提供了海量的高質(zhì)量 PNG 圖片，專門為設(shè)計(jì)師搜索和分享優(yōu)質(zhì)的無(wú)背景圖和剪貼畫，用戶無(wú)需注冊(cè)即可免費(fèi)下載使用！
4、Cleanpng——數(shù)百萬(wàn)張PNG透明圖片素材資源庫(kù)
傳送門：https://www.cleanpng.com/
Cleanpng里擁有超過(guò)三百萬(wàn)張 PNG 透明圖片素材，且每張PNG 圖片質(zhì)量都很高，如果你正在尋找最大最全的PNG 圖片資源，Cleanpng絕對(duì)不容錯(cuò)過(guò)！
這里的所有PNG 圖都可以免費(fèi)下載，下載數(shù)量不受限制，并且不需要注冊(cè)登錄就能直接下載！
5、Gratisography——高質(zhì)量攝影圖片集散地
Gratisography是一個(gè)提供免費(fèi)高品質(zhì)攝影圖片的集散地，優(yōu)勢(shì)在于所有的圖片都可以用于個(gè)人用途或商業(yè)用途！
每周都會(huì)更新免費(fèi)高清圖片資源，在這里有很多時(shí)尚流行的照片，只需點(diǎn)擊即可快速下載為你所用~
6、Unsplash——無(wú)版權(quán)高清圖片資源庫(kù)
Unsplash也是一款非常值得推薦和受歡迎的高清圖片庫(kù)，同樣擁有免費(fèi)、無(wú)版權(quán)的圖片資源，全都是由全世界的攝影師提供的精美照片供設(shè)計(jì)師下載、獲取靈感。
它的優(yōu)勢(shì)在于圖片分類廣，幾十種分類可以滿足各種圖片需求。
7、FOCA Stock——國(guó)外小眾免費(fèi)素材圖庫(kù)
FOCAStock是一個(gè)由熱愛攝影的小伙伴創(chuàng)建的免費(fèi)圖庫(kù)網(wǎng)，照片風(fēng)格十分貼近我們的生活。
這里不止提供海量照片素材，還有視頻模板可供你下載，網(wǎng)站的照片分類十分齊全，包含了特色的照片自然、城市、日落、食物、風(fēng)景、城市場(chǎng)景，工作空間等分類，找到符合我們需求的圖片，不用注冊(cè)帳號(hào)就能直接下載！
8、稿定設(shè)計(jì)——在線設(shè)計(jì)神器&在線素材庫(kù)
對(duì)于沒(méi)有設(shè)計(jì)基礎(chǔ)或不會(huì)PS的菜鳥同學(xué)來(lái)說(shuō)，稿定設(shè)計(jì)簡(jiǎn)直太好用了！
涵蓋了新媒體配圖、電商、生活?yuàn)蕵?lè)、辦公商務(wù)等上百種場(chǎng)景，20W+原創(chuàng)版權(quán)素材模板，
光是海報(bào)就有手機(jī)海報(bào)、動(dòng)態(tài)海報(bào)、長(zhǎng)圖海報(bào)、電商橫版海報(bào)、廣告banner、全屏海報(bào)、張貼海報(bào)、營(yíng)銷海報(bào)......超多不同類型的模板可供你挑選！
簡(jiǎn)單拖拉拽，替換圖文內(nèi)容就能在線生成精美圖片，可以解決你生活工作所有作圖需求！
除此之外，稿定設(shè)計(jì)還是專門的設(shè)計(jì)素材庫(kù)，點(diǎn)擊左側(cè)工具欄的“設(shè)計(jì)素材”，就能進(jìn)入稿定素材站：
海量圖區(qū)：優(yōu)質(zhì)圖片全球合作，版權(quán)來(lái)源清晰可溯，全類型覆蓋您的作圖需要。
平面模板：品質(zhì)模板源文件每日更新，圖層井然有序提高作圖效率從此不加班。
品質(zhì)視頻：持續(xù)更新的視頻素材，緊隨熱點(diǎn)，助力視頻營(yíng)銷，提升轉(zhuǎn)化效率。
高端免摳：高端原創(chuàng)免摳素材，源文件下載更靈活；本土化獨(dú)家設(shè)計(jì)，為設(shè)計(jì)賦能。
150W+正版圖片素材、8000W+圖片資源、200正版字體，就在稿定素材！
9、WebGradients——漸變色在線工具
在WebGradients你可以輕松調(diào)出漂亮的漸變色~
它提供180 個(gè)線性漸變的搭配方式，可以將其用作網(wǎng)站任何部分的內(nèi)容背景。
亮點(diǎn)在于，它可輕松復(fù)制 CSS3 代碼，直接使用在作品中！并且免費(fèi)提供給商業(yè)或個(gè)人使用，說(shuō)一句設(shè)計(jì)師的色彩百寶箱也不為過(guò)！
10、Culrs——設(shè)計(jì)師必備優(yōu)質(zhì)調(diào)色板
Culrs是一個(gè)專業(yè)的設(shè)計(jì)師在線調(diào)色板，免費(fèi)提供豐富的設(shè)計(jì)配色方案。有了它你不用再費(fèi)腦筋尋找合適的顏色組合，輕松得到專業(yè)的設(shè)計(jì)用色！
同時(shí)Culrs還提供超人性化配色分類，可以說(shuō)是設(shè)計(jì)師配色必備收藏調(diào)色板！
11、ColorLeap——復(fù)古配色方案在線工具
ColorLeap有個(gè)別名叫色彩時(shí)光機(jī)，它可以查詢每個(gè)年代輝煌的的流行配色
最早從公元前 2000 年開始一直到現(xiàn)代，都有相關(guān)的作品色彩記錄
可以幫助設(shè)計(jì)師獲取靈感，讓設(shè)計(jì)師盡情感受色彩的靈魂
12、Iconfinder——免費(fèi)圖標(biāo)網(wǎng)站
Iconfinder是一款超實(shí)用的免費(fèi)圖標(biāo)網(wǎng)站，為用戶提供海量免費(fèi)圖標(biāo)+矢量素材，在這里可以輕松找到各種設(shè)計(jì)配色的圖案。
對(duì)于設(shè)計(jì)師而言是一款非常值得收藏的免費(fèi)資源網(wǎng)站！
13、IconBlender——免費(fèi)網(wǎng)頁(yè) SVG 圖標(biāo)素材庫(kù)
如果你在為找到的圖標(biāo)素材過(guò)大而煩惱，可以試試IconBlender！這里提供了 80000 多個(gè)免費(fèi)開源的圖標(biāo)資源可供你下載使用，也可以直接復(fù)制到網(wǎng)頁(yè)代碼使用。
使用過(guò)程可以選擇圖標(biāo)大小和粗細(xì)，圖標(biāo)顏色，以及圖標(biāo)類型，簡(jiǎn)直太友好了！
14、iconfont——阿里巴巴矢量圖標(biāo)庫(kù)
阿里巴巴旗下國(guó)內(nèi)功能最為強(qiáng)大且圖標(biāo)內(nèi)容很豐富的矢量圖標(biāo)庫(kù)之一，為用戶提供矢量圖標(biāo)下載、在線存儲(chǔ)、格式轉(zhuǎn)換等功能。
支持AI/SVG/PNG/代碼格式下載，并且支持按路徑在線編輯icon顏色，設(shè)計(jì)師人手必備的圖標(biāo)網(wǎng)站！
15、Skribbl——?jiǎng)?chuàng)意手繪插圖插畫站
手繪插圖是設(shè)計(jì)師管用的設(shè)計(jì)方式之一，如果你喜歡手繪插圖，或是想要分享自己的有意思的手繪作品，那么Skribbl就是一個(gè)不錯(cuò)的選擇！
這里提供了來(lái)自全球優(yōu)秀設(shè)計(jì)師分享的免費(fèi)手繪插圖，都是一些簡(jiǎn)單的手繪插畫，但帶來(lái)的視覺(jué)沖擊力一點(diǎn)也不弱，想要獲取到免費(fèi)的插圖資源，可以訂閱，之后就能發(fā)送到你的郵箱！
16、50 Watts——插圖插畫視覺(jué)藝術(shù)站
50 Watts收集了來(lái)至世界各地怪異和讓人驚訝的視覺(jué)圖形，你看到的每一個(gè)素材，都能讓你記憶猶新。
這些創(chuàng)新是十足的設(shè)計(jì)手法，可以激發(fā)你的創(chuàng)作靈感。
17、Soazi Good——日本風(fēng)格插圖插畫素材站
與其他插畫素材站不同，Soazi Good是一個(gè)非常精致可愛的插圖素材網(wǎng)站，小小的配飾非常有創(chuàng)意！
提供了背景類、各種主題的小插圖，甚至是動(dòng)態(tài)圖，可以下載的格式有很多，比如 JPG、PNG、AI，部份圖文件也有提供 EPS 或 PSD 格式下載~
先匯總這么多，感興趣的小伙伴可以關(guān)注一波，之后還會(huì)再來(lái)更新！
常工作學(xué)習(xí)中總是需要一些素材圖片，今天和大家分享3個(gè)免費(fèi)好用的圖片素材資源網(wǎng)站，總有一些素材能夠派上大用場(chǎng)的！
https://www.pinclipart.com/
在搜索框輸入想要查找的圖片名稱或關(guān)鍵詞即可。每個(gè)搜索結(jié)果都有對(duì)應(yīng)的分辨率。
點(diǎn)擊圖片進(jìn)入，還會(huì)看到圖片的大小及格式，點(diǎn)擊“View Clipart”就可以免費(fèi)下載了。
這個(gè)網(wǎng)站不僅素材多，而且還有個(gè)優(yōu)點(diǎn)是圖片背景都是白底的，下載下來(lái)就可以馬上使用，無(wú)需再做背景處理。大家可以根據(jù)自己的實(shí)際需求以及網(wǎng)站顯示的圖片信息選擇性篩選使用。
https://pixy.org/
在搜索框輸入想要查找的圖片名稱或關(guān)鍵詞即可。有多個(gè)免費(fèi)的圖片資源可供下載，選擇的空間還是挺大的。
圖片清晰度大部分還是很不錯(cuò)的，點(diǎn)擊“FREE DOWNLOAD”進(jìn)行免費(fèi)下載。
https://www.motifolio.com/sampleslides.html
這個(gè)網(wǎng)站里的素材比較偏醫(yī)學(xué)、生物類的，專業(yè)性相對(duì)會(huì)強(qiáng)一些，如果有這類學(xué)科素材需求的，那么這個(gè)網(wǎng)站還是不錯(cuò)的。
以上網(wǎng)站都是英文網(wǎng)站，大家可以用谷歌瀏覽器自帶的翻譯功能，轉(zhuǎn)換成中文閱讀起來(lái)so easy！
作者：極客小俊」
「 把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主」
咱們廢話不多說(shuō)直接上代碼案例素材!
首先準(zhǔn)備圖片素材 放入到你的demo案例下的img文件夾
當(dāng)然圖片你也可以用其他類似的圖來(lái)代替也是可以的!
如圖
<div id="big">
<div class="box">
<div class="pic"><img src="img/bag.jpg" alt="" title=""/></div>
<div class="mask">
<h2>三用小巧思波士頓包</h2>
<p>印花波士頓包 復(fù)古波士頓包，手提單肩斜挎多用，印花PVC</p>
</div>
<div class="title">
<h2 class="sl"><span></span>全場(chǎng)2折起 印花波士頓包 專柜終身保養(yǎng)</h2>
<h3 class="sl"><i></i><span>搶全場(chǎng)2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
<div class="price">
<div class="zx_pr"><span>￥</span>659</div>
<div class="xl_yp">
<p><del>￥1998.00</del><span>退貨賠運(yùn)費(fèi)</span></p>
<p><strong>70</strong>件已付款</p>
</div>
<div class="buy">搶!</div>
</div>
</div>
</div>
<div class="box">
<div class="pic"><img src="img/bag3.jpg" alt="" title=""/></div>
<div class="mask">
<h2>豬年紀(jì)念款經(jīng)典牛皮水桶包</h2>
<p>豬年紀(jì)念款 經(jīng)典牛皮水桶包，自帶強(qiáng)大氣場(chǎng)</p>
</div>
<div class="title">
<h2 class="sl"><span></span>全場(chǎng)2折起 印花波士頓包 專柜終身保養(yǎng)</h2>
<h3 class="sl"><i></i><span>搶全場(chǎng)2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
<div class="price">
<div class="zx_pr"><span>￥</span>659</div>
<div class="xl_yp">
<p><del>￥1998.00</del><span>退貨賠運(yùn)費(fèi)</span></p>
<p><strong>70</strong>件已付款</p>
</div>
<div class="buy">搶!</div>
</div>
</div>
</div>
<div class="box">
<div class="pic"><img src="img/bag4.jpg" alt="" title=""/></div>
<div class="mask">
<h2>一包四用蜜蜂系列迷你小方包</h2>
<p>四用方盒包 一包四用蜜蜂系列迷你鏈條小方包</p>
</div>
<div class="title">
<h2 class="sl"><span></span>全場(chǎng)2折起 印花波士頓包 專柜終身保養(yǎng)</h2>
<h3 class="sl"><i></i><span>搶全場(chǎng)2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
<div class="price">
<div class="zx_pr"><span>￥</span>659</div>
<div class="xl_yp">
<p><del>￥1998.00</del><span>退貨賠運(yùn)費(fèi)</span></p>
<p><strong>70</strong>件已付款</p>
</div>
<div class="buy">搶!</div>
</div>
</div>
</div>
</div>*{
padding:0px;
margin:0px;
}
body{
font-family: '微軟雅黑';
}
.sl{
white-space: nowrap;
word-break: keep-all;
text-overflow: ellipsis;
}
#big{
width:950px;
height:416px;
margin:10px auto;
overflow: hidden;
}
#big>.box{
width:298px;
height:410px;
float: left;
position: relative;
overflow: hidden;
border:1px solid #ccc;
margin-left:19px;
}
#big>.box:first-child{
margin-left:0px;
}
#big>.box>.pic{
width:298px;
height:300px;
overflow: hidden;
}
#big>.box>.pic>img{
transition: all 500ms;
}
#big>.box:hover>.pic>img{
transform: scale(1.5);
}
#big>.box>.mask{
height:300px;
width:298px;
position: absolute;
left:-298px;
top:0px;
background:rgba(0,0,0,0.3);
transition: all 600ms;
color:#fff;
}
#big>.box>.mask>h2{
font-size: 18px;
margin:80px 0px 10px 10px;
}
#big>.box>.mask>p{
font-size: 12px;
margin:0px 0px 10px 10px;
}
#big>.box:hover>.mask{
left:0px;
}
#big>.box>.title>h2{
margin:10px auto;
width:288px;
height:20px;
line-height: 20px;
font-size: 14px;
color:#333;
overflow: hidden;
font-weight: normal;
}
#big>.box>.title>h2>span{
display: inline-block;
width:31px;
height:16px;
vertical-align: middle;
background: url('img/tu.png') no-repeat;
background-size:cover;
margin-right:5px;
}
#big>.box>.title>h3{
width:288px;
height:20px;
margin:0px auto;
font-size: 12px;
color:#666;
font-weight: 400;
}
#big>.box>.title>h3>i{
width:12px;
height:16px;
display: inline-block;
background:url('img/tu1.jpg') no-repeat;
vertical-align: middle;
}
#big>.box>.title>h3>span{
color:#f00;
margin:0 5px 0 5px;
}
#big>.box>.title>.price{
width:298px;
height:50px;
background:#e61414;
}
#big>.box>.title>.price>.zx_pr>span{
font-size: 20px;
}
#big>.box>.title>.price>.zx_pr{
width:83px;
height:50px;
line-height: 50px;
float: left;
margin-left:2px;
vertical-align: bottom;
font-size:38px;
color:#fff;
}
#big>.box>.title>.price>.buy{
width:56px;
height:50px;
line-height: 50px;
text-align: center;
background:url('img/tu3.png') no-repeat;
float:right;
color:#f00;
}
#big>.box>.title>.price>.xl_yp{
width:145px;
height:41px;
float: left;
margin:4px 0 0 8px;
font-size: 12px;
color:#fff;
}
#big>.box>.title>.price>.xl_yp>p>span{
margin-left:4px;
width:72px;
height:17px;
display: inline-block;
line-height: 17px;
text-align: center;
border-radius: 10px;
background:#ffb369;
}
#big>.box>.title>.price>.xl_yp>p:nth-child(2){
width:80px;
height:20px;
line-height: 20px;
text-align: center;
border-radius: 1px;
margin-top:5px;
background:rgba(0,0,0,0.2);
}
#big>.box>.title>.price>.xl_yp>p:nth-child(2)>strong{
margin-right: 5px;
font-size: 14px;
}如圖
"點(diǎn)贊" "??評(píng)論" "收藏"
大家的支持就是我堅(jiān)持創(chuàng)作下去的動(dòng)力!?
?如果以上內(nèi)容有任何錯(cuò)誤或者不準(zhǔn)確的地方，歡迎在下面 留個(gè)言指出、或者你有更好的想法，歡迎一起交流學(xué)習(xí)???????????
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
