CSS-畫一個紅蘋果

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

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

先看效果：

你沒有看錯，這個不是真蘋果。僅僅一百多行代碼就可以實(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）左上角增加一個亮色高光

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偽元素，畫一個亮色的橢圓。橘色的陰影。然后整體模糊一下

.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);
}

哇，一不小心，畫出來了一個西紅柿

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

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

這個凹陷效果使用after偽元素，畫一個黑色透明色漸變的橢圓，然后使用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);
}

真是一個漂亮的西紅柿。。。。。。。

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

第五步：增加雜色條紋

好吃的蘋果，都有縱向的條紋雜色。這里我們是模糊后的border來模擬。由于需要很多雜色，這里使用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)

好吃的蘋果，會有很多小小的斑點(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)化。

第七部：給蘋果加個葉柄。

買過西瓜的都知道，葉柄是證明西瓜新鮮與否的標(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>

是不是新鮮很多。

最后，我們給蘋果加個陰影，看著更加立體一點(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);
}

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

代碼倉庫地址：

https://github.com/shb190802/html5

演示地址：

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

文標(biāo)題：How to Generate Test Datasets in Python with Scikit-learn

作者：Jason Brownlee

翻譯：笪潔瓊

校對：顧佳妮

本文共1754字，建議閱讀3分鐘。

本文教大家在測試數(shù)據(jù)集中發(fā)現(xiàn)問題以及在Python中使用scikit學(xué)習(xí)的方法。

測試數(shù)據(jù)集是一個小型的人工數(shù)據(jù)集，它可以讓你測試機(jī)器學(xué)習(xí)算法或其它測試工具。

測試數(shù)據(jù)集的數(shù)據(jù)具有定義明確的性質(zhì)，如線性或非線性，這允許您探索特定的算法行為。

scikit-learn Python庫提供了一組函數(shù)，用于從結(jié)構(gòu)化的測試問題中生成樣本，用于進(jìn)行回歸和分類。

在本教程中，您將發(fā)現(xiàn)測試問題以及如何在Python中使用scikit學(xué)習(xí)。

完成本教程后，您將知道：

如何生成多分類預(yù)測問題

如何生成二分類預(yù)測問題

如何生成線性回歸預(yù)測測試問題

讓我們開始吧

教程概述

本教程分為三個部分，分別是：

測試數(shù)據(jù)集

分類測試問題

回歸測試的問題

測試數(shù)據(jù)集

開發(fā)和實(shí)現(xiàn)機(jī)器學(xué)習(xí)算法遇到的問題是，您如何知道是否正確地實(shí)現(xiàn)了機(jī)器學(xué)習(xí)算法。

即使存在bug有些算法還是能執(zhí)行。

測試數(shù)據(jù)集是一個較小的人為設(shè)計(jì)問題，它允許您測試和調(diào)試算法和測試工具。

它們還能幫助更好地理解算法的行為，以及超參數(shù)是如何在相應(yīng)算法的執(zhí)行過程進(jìn)行改變的。

下面是測試數(shù)據(jù)集的一些理想屬性:

它們可以快速且容易地生成。

它們包含“已知”或“理解”的結(jié)果與預(yù)測相比較。

它們是隨機(jī)的，每次生成時都允許對同一個問題進(jìn)行隨機(jī)變量的變化。

它們很小，可以很容易在兩個維度中進(jìn)行可視化。

它們也可以被簡單地放大。

我建議在開始使用新的機(jī)器學(xué)習(xí)算法或開發(fā)新的測試工具時使用測試數(shù)據(jù)集。

scikit-learn是一個用于機(jī)器學(xué)習(xí)的Python庫，它提供了生成一系列測試問題的功能。

在本教程中，我們將介紹一些為分類和回歸算法生成測試問題的例子。

分類測試問題

分類是把標(biāo)簽分配給觀測樣本的問題。

在這一節(jié)中，我們將討論三種分類問題:斑點(diǎn)、月亮和圓圈。

斑點(diǎn)分類問題

make_blob()函數(shù)可用于生成高斯分布的點(diǎn)。

您可以控制生成多少個斑點(diǎn)，以及生成的樣本數(shù)量，以及其他一些屬性。

如果這些斑點(diǎn)有線性可分的性質(zhì)，那么這個問題適用于線性分類問題。

下面的例子生成一個帶有三類斑點(diǎn)的二維數(shù)據(jù)集，作為一個多類分類預(yù)測問題。

每個觀察都有兩個輸入和0、1或2個類值。

完整代碼如下

運(yùn)行這個示例會生成問題的輸入和輸出，然后創(chuàng)建一個方便的2D繪圖，用不同的顏色顯示不同的類。

注意，由于問題生成器的隨機(jī)特性，您的特定數(shù)據(jù)集和結(jié)果圖將會有所不同。

這是一個特性，而不是一個bug。

測試分類問題的散點(diǎn)圖

我們將在下面的示例中使用這個相同的示例結(jié)構(gòu)。

衛(wèi)星分類問題

make_moons()函數(shù)是用于二分類問題的的，它將生成像漩渦一樣，或者像月亮形狀一樣的數(shù)據(jù)集。

你可以控制月亮的形狀和產(chǎn)生的樣本數(shù)量。

這個測試問題適用于能夠?qū)W習(xí)非線性類邊界的算法。

下面的例子產(chǎn)生了一個帶有中等噪聲的月球數(shù)據(jù)集。

完整的代碼如下

運(yùn)行該示例將生成并繪制用于檢查的數(shù)據(jù)集，再次為其指定的類著色。

衛(wèi)星測試分類問題散的點(diǎn)圖

圈分類問題

make_circles()函數(shù)會產(chǎn)生一個二分類問題，這個問題會出現(xiàn)在一個同心圓中。

再一次，就像衛(wèi)星測試的問題一樣，你可以控制形狀中噪音的大小。

該測試問題適用于能夠?qū)W習(xí)復(fù)雜非線性曲線的算法。

下面的示例生成一個帶有一些噪聲的圓形數(shù)據(jù)集。

完整的代碼如下

運(yùn)行該示例將生成并繪制用于檢查的數(shù)據(jù)集。

圓試驗(yàn)分類問題的散點(diǎn)問題

回歸測試的問題

回歸是預(yù)測某個觀測量的問題。

make_regression()函數(shù)將創(chuàng)建一個帶有輸入和輸出之間線性關(guān)系的數(shù)據(jù)集。

您可以配置示例的數(shù)量、輸入特性的數(shù)量、噪聲級別，等等。

這個數(shù)據(jù)集適用于能夠?qū)W習(xí)線性回歸函數(shù)的算法。

下面的示例將生成100個示例，其中包含一個輸入特性和一個輸出特性，它的噪聲很低。

完整的代碼如下。

運(yùn)行該示例將生成數(shù)據(jù)，并繪制X和y關(guān)系圖，由于該關(guān)系是線性的，因此非常無趣。

回歸測試問題的散點(diǎn)圖

延伸

本節(jié)列出了一些擴(kuò)展您可能希望探索的教程的想法。

比較算法

選擇一個測試問題，并對問題的算法進(jìn)行比較，并報告性能。

擴(kuò)大的問題

選擇一個測試問題，并探索擴(kuò)大它的規(guī)模，使用改進(jìn)的方法來可視化結(jié)果，或者探索給定的算法的模型技巧和問題深度。

額外的問題

這個庫提供了一系列額外的測試問題；

為每個人編寫一個代碼示例來演示它們是如何工作的。

如果您探究這些擴(kuò)展的任何一個，我很想知道。

進(jìn)一步的閱讀

如果您希望深入研究，本節(jié)將提供更多關(guān)于主題的參考資料。

學(xué)習(xí)用戶指南：數(shù)據(jù)集加載實(shí)用程序（http://scikit-learn.org/stable/datasets/index.html）

scikit-learn API:sklearn - 數(shù)據(jù)集（http://scikit-learn.org/stable/modules/classes.html#module-sklearn.datasets）

總結(jié)

在本教程中，您發(fā)現(xiàn)了測試問題，以及如何在Python中使用scikit庫。

具體來說，你學(xué)會了：

如何生成多分類預(yù)測問題

如何生成二分類預(yù)測問題

如何生成線性回歸預(yù)測測試問題

原文鏈接：https://machinelearningmastery.com/generate-test-datasets-python-scikit-learn/

笪潔瓊，中南財(cái)大MBA在讀,目前研究方向：金融大數(shù)據(jù)。目前正在學(xué)習(xí)如何將py等其他軟件廣泛應(yīng)用于金融實(shí)際操作中，例如抓包預(yù)測走勢（不會預(yù)測股票/虛擬幣價格）。可能是金融財(cái)務(wù)中最懂建筑設(shè)計(jì)（風(fēng)水方向）的長腿女生。花式調(diào)酒機(jī)車沖沙。上賽場里跑過步開過車，商院張掖絲路挑戰(zhàn)賽3天徒步78公里。大美山水心欲往，凜冽風(fēng)雨信步行。

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

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

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

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

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

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

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

三角形背景圖案生成器

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

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

Grid布局生成器

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

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

按照效果獲得代碼：

CSS簡約背景生成器

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

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

CSS背景生成器

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

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

按鈕生成器

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

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

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

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

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

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

在線咨詢

上一篇：HTML網(wǎng)絡(luò)編程之時間格式
下一篇：藍(lán)易云 - LNMP網(wǎng)站框架搭建（編譯安裝）

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商