近每天都帶一個(gè)蘋果加餐，有次吃到一個(gè)十分漂亮的紅蘋果，突然覺得，可以試著畫一個(gè)蘋果看看。

之前確實(shí)無(wú)法想象，可以使用CSS能畫出一個(gè)蘋果。

先看效果：

你沒有看錯(cuò)，這個(gè)不是真蘋果。僅僅一百多行代碼就可以實(shí)現(xiàn)的CSS的紅蘋果。我自己看到最終效果都驚呆了。

第一步畫出蘋果的輪廓：

.apple {
  position: relative;
  width: 300px;
  height: 270px;
  background-color: #bf2934;
  border-radius: 160px 150px 145px 150px/160px 140px 210px 190px;
}

第二步：將蘋果變得更加立體

1）右上角使用亮色內(nèi)陰影，畫出高光效果

2）左下角使用兩層暗色內(nèi)陰影，畫出背光的暗色效果

3）左上角增加一個(gè)亮色高光

4）整體增加徑向漸變的背景，將重心高光，四周暗色

.apple {
  position: relative;
  width: 300px;
  height: 270px;
  background: radial-gradient(#0000, rgba(0, 0, 0, .1)),
    radial-gradient(rgba(239, 156, 109, .2), #0000);
  background-color: #bf2934;
  border-radius: 160px 150px 145px 150px/160px 140px 210px 190px;
  box-shadow: inset 30px -20px 30px 20px rgba(0, 0, 0, .15),
    inset 10px -10px 15px 0 rgba(0, 0, 0, .15),
    inset 10px 10px 5px 0 rgba(255, 255, 255, .05),
    inset -10px 10px 30px 10px rgba(237, 115, 84, .3);
}

第三步：增加光源反光的高亮效果

使用before偽元素，畫一個(gè)亮色的橢圓。橘色的陰影。然后整體模糊一下

.apple::before {
  position: absolute;
  left: 135px;
  top: 50px;
  content: '';
  width: 80px;
  height: 30px;
  transform: skew(-20deg) rotate(10deg);
  border-radius: 45%;
  background: rgba(255, 255, 255, .65);
  box-shadow: 2px 10px 30px 22px rgba(239, 156, 109, 1);
  filter: blur(5px);
}

哇，一不小心，畫出來(lái)了一個(gè)西紅柿

好吧，這個(gè)時(shí)候， 我其實(shí)可以停下來(lái)，先發(fā)一篇畫西紅柿的文章了。

第四步：準(zhǔn)備一下頂部葉柄的凹陷

這個(gè)凹陷效果使用after偽元素，畫一個(gè)黑色透明色漸變的橢圓，然后使用clip-path，截取頂部扇形部分。

.apple::after {
  position: absolute;
  left: 90px;
  top: 2px;
  width: 120px;
  background: radial-gradient(rgba(0, 0, 0, .3), rgba(239, 156, 109, .2));
  height: 30px;
  content: '';
  border-radius: 50%;
  filter: blur(2px);
  clip-path: polygon(50% 55%, 150% 0, -50% 0);
  filter: blur(1px);
}

真是一個(gè)漂亮的西紅柿。。。。。。。

蘋果和西紅柿的區(qū)別，主要是，蘋果沒有那么的光滑，顏色沒有這么完美。我們需要一些雜色。

第五步：增加雜色條紋

好吃的蘋果，都有縱向的條紋雜色。這里我們是模糊后的border來(lái)模擬。由于需要很多雜色，這里使用js添加，稍微做點(diǎn)隨機(jī)。

.stripe {
  position: absolute;
  width: 300px;
  height: 270px;
  border-radius: 160px 150px 145px 150px/160px 140px 210px 190px;
  border-right: solid 2px rgba(239, 156, 109, .2);
  transform: scaleX(.9);
  filter: blur(4px);
}

function addStripe() {
  var fragment=document.createDocumentFragment()
  var count=15
  for (var i=-count; i < count; i++) {
    var stripe=document.createElement('div')
    stripe.className='stripe'
    stripe.style.opacity=Math.max(1, 0.5 + Math.random())
    stripe.style.transform=`scaleX(${(i / count + Math.random() * 0.2).toFixed(2)})`
    fragment.appendChild(stripe)
  }
  document.querySelector('.apple').appendChild(fragment)
}

是不是突然就像蘋果了

第六步：增加噪點(diǎn)

好吃的蘋果，會(huì)有很多小小的斑點(diǎn)。這里，我們使用js增加一些隨機(jī)的斑點(diǎn)。

.spot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(239, 156, 109, .6);
  filter: blur(1px);
}

function addSpot() {
  var count=60
  var fragment=document.createDocumentFragment()
  for (var i=0; i < count; i++) {
    var spot=document.createElement('div')
    spot.className='spot'
    spot.style.left=5 + ~~(Math.random() * 90) + '%'
    spot.style.top=5 + ~~(Math.random() * 90) + '%'
    spot.style.opacity=0.2 + Math.random() * 0.4
    spot.style.transform=`scaleX(${Math.random() * 0.8 + 0.2}) scaleY(${Math.random() * 0.8 + 0.2}) rotate(${~~(360 * Math.random())}deg)`
    fragment.appendChild(spot)
  }
  document.querySelector('.apple').appendChild(fragment)
}

蘋果變得更加誘人了。

再做一些細(xì)節(jié)優(yōu)化。

第七部：給蘋果加個(gè)葉柄。

買過(guò)西瓜的都知道，葉柄是證明西瓜新鮮與否的標(biāo)志。蘋果亦然。

.petiole {
  position: absolute;
  transform: translate(155px, -48px) rotate(35deg);
  width: 20px;
  height: 60px;
  border-top: solid 15px transparent;
  border-left: solid 10px rgb(162, 76, 9);
  border-bottom: solid 8px transparent;
  border-radius: 50%;
}
.petiole.left {
  transform: translate(154px, -49px) rotate(35deg);
  border-left-color: rgb(123, 48, 24);
}

<div class="apple">
  <div class="petiole left"></div>
  <div class="petiole"></div>
</div>

是不是新鮮很多。

最后，我們給蘋果加個(gè)陰影，看著更加立體一點(diǎn)。

.shadow {
  position: absolute;
  width: 300px;
  height: 270px;
  background-color: rgba(0, 0, 0, .15);
  transform-origin: 50% 100%;
  transform: translate(5px, 5px) skew(60deg) scaleY(.25);
  border-radius: 160px 150px 145px 150px/160px 140px 210px 190px;
  box-shadow: 0 0 20px rgba(0, 0, 0, .15);
  filter: blur(4px);
}

嬌艷欲滴的大蘋果，完成！！！！

代碼倉(cāng)庫(kù)地址：

https://github.com/shb190802/html5

演示地址：

http://suohb.com/demo/win/apple.html

為前端，設(shè)計(jì)出交互體驗(yàn)卓越的系統(tǒng)一直是我們的挑戰(zhàn)目標(biāo)，工欲善其事，必先利其器，今天分享幾個(gè)個(gè)人覺著好用且有特色的CSS工具，希望能提高伙伴作品的設(shè)驚艷度。

圖片斑點(diǎn)濾鏡生成器

演示地址：https://codepen.io/LekovicMilos/pen/omVzYv

為圖片實(shí)現(xiàn)隨機(jī)的斑點(diǎn)顯示效果，不過(guò)原網(wǎng)址的圖片源有問(wèn)題，感興趣的可以把這個(gè)圖片源換一下就可以了。

類似的，還有一個(gè)圓角變形器，可以控制border-radius，地址如下

演示地址：地址：https://codepen.io/cobra_winfrey/pen/jpRQbP

可以控制div的四角產(chǎn)生不同的變形效果。

三角形背景圖案生成器

演示地址：https://codepen.io/msurguy/pen/wvGgzN

這是一個(gè)基于js的背景生成器，可生成一個(gè)三角形背景紋理，并實(shí)現(xiàn)了鼠標(biāo)跟隨，顏色等參數(shù)可進(jìn)行調(diào)節(jié)，對(duì)于偏內(nèi)容的平臺(tái)可以用這個(gè)工具增加一下交互感和趣味性。

Grid布局生成器

地址：https://cssgrid-generator.netlify.app/

快捷方便的生成Grid布局，不過(guò)實(shí)現(xiàn)效果比較簡(jiǎn)單，這個(gè)工具拖拉效果設(shè)計(jì)的不太好，但也差不多夠用了。

按照效果獲得代碼：

CSS簡(jiǎn)約背景生成器

演示地址：https://neumorphism.io/#e0e0e0

生成簡(jiǎn)約效果的Panel，點(diǎn)擊四個(gè)角切換方向，并有四種效果可以進(jìn)行選擇，總體感覺簡(jiǎn)約但不簡(jiǎn)單。

CSS背景生成器

演示地址：https://www.colorzilla.com/gradient-editor/

個(gè)人一直在用的CSS背景生成器，如果需要生成復(fù)雜顏色背景，可以用這個(gè)。

按鈕生成器

演示地址：http://www.bestcssbuttongenerator.com/

按鈕是平臺(tái)最不起眼但又最體現(xiàn)特色的交互控件，有一個(gè)生動(dòng)富有靈性的按鈕，是前端重要的課題之一。這款按鈕生成器可以嘗試一下。

網(wǎng)站圖標(biāo)生成器

演示地址：https://favicon.io/

可根據(jù)PNG、TEXT、表情生成網(wǎng)站圖標(biāo)，包括手機(jī)應(yīng)用的圖標(biāo)。

大家如果還有更好用的特色工具，歡迎溝通交流。學(xué)無(wú)止境，一起努力提高。