這是一首無聲的歌——《花伴芳容》，獻(xiàn)給一直以來給予我極大支持和熱情幫助的靜悟版主（在老年人網(wǎng)任音畫版主，是個對人熱情，對工作認(rèn)真負(fù)責(zé)的人）。
本集代碼中，對圖片采取了外邊距定位，并將圖片加了外陰影和背景層混合模式，介紹了混合模式的幾種屬性值，著重討論了貝塞爾曲線運(yùn)用到css動畫中的有關(guān)問題，展示了貝塞爾曲線產(chǎn)生出的過渡效果。
關(guān)于貝塞爾曲線，大概很多朋友都不太了解，我在下面的代碼解析里作了簡單介紹，在此則不細(xì)言，我只告訴玩ps的朋友，你操作一下鋼筆工具，就知道貝塞爾曲線是怎么回事了。貝塞爾曲線又稱貝茲曲線，或貝濟(jì)埃曲線，對于我們一般人來說，你又不是常用鋼筆工具的圖形設(shè)計人，就不必過多地琢磨它，只會本講述的關(guān)于貝塞爾曲線的設(shè)置，足矣。
代碼：
＜style type="text/css"＞
.花伴芳容__item{background-blend-mode:luminosity;transition:transform 5s cubic-bezier(0.4,0,0.6,1.3)}
.花伴芳容__item:not(:last-child){position:absolute;top:130%;left:50%;width:45vmin;height:45vmin;border-radius:100%;box-shadow:0 0 10em red}
.花伴芳容__item:nth-child(1){margin:87vmin
-7vmin;transform:scale(0.5);background:url("http://img3.oldkids.cn/upload/
260811000/u260810070/2016/05/26/blog_20160526160424619601.jpg")50% 50% whitesmoke}
.花伴芳容__item:nth-child(1):hover{transform:scale(1);background-blend-mode:normal;cursor:pointer}
.花伴芳容__item:nth-child(2){margin:87vmin
-37vmin;transform:scale(0.5);background:url("http://img4.oldkids.cn/upload/
260811000/u260810070/2016/05/26/blog_20160526223207905077.jpg")50% 50% whitesmoke}
.花伴芳容__item:nth-child(2):hover{transform:scale(1);background-blend-mode:normal;cursor:pointer}
.花伴芳容__item:nth-child(3){margin:60vmin
-45vmin;transform:scale(0.5);background:url("http://img3.oldkids.cn/upload/
260811000/u260810070/2017/03/26/blog_20170326152428698183.jpg")50% 50% whitesmoke}
.花伴芳容__item:nth-child(3):hover{transform:scale(1);background-blend-mode:normal;cursor:pointer}
.花伴芳容__item:nth-child(4){margin:44vmin
-22vmin;transform:scale(0.5);background:url("https://www.oldkids.cn/upload/
2018/04/14/blog_20180414205700066.jpg") 50% 50% whitesmoke}
.花伴芳容__item:nth-child(4):hover{transform:scale(1);background-blend-mode:normal;cursor:pointer}
.花伴芳容__item:nth-child(5){margin:60vmin
1vmin;transform:scale(0.5);background:url("https://www.oldkids.cn/upload/
2018/04/17/blog_20180417110623722.jpg") 50% 50% whitesmoke}
.花伴芳容__item:nth-child(5):hover{transform:scale(1);background-blend-mode:normal;cursor:pointer}
.花伴芳容__item:nth-child(6){margin:68vmin -22vmin;
transform:scale(0.5);background:url("http://www.oldkids.cn/upload/2018/10/
27/blog_20181027112157607.jpg")50% 50% whitesmoke}
.花伴芳容__item:nth-child(6):hover{transform:scale(1);background-blend-mode:normal;cursor:pointer}
.花伴芳容__item:last-child{z-index:-2}
＜/style>
＜ul class="花伴芳容"＞
＜li class="花伴芳容__item"> ＜/li＞
＜li class="花伴芳容__item"> ＜/li＞
＜li class="花伴芳容__item"> ＜/li＞
＜li class="花伴芳容__item"> ＜/li＞
＜li class="花伴芳容__item"> ＜/li＞
＜li class="花伴芳容__item"> ＜/li＞
＜li class="花伴芳容__item"> ＜/li＞
＜/ul＞ ＜style type="text/css"＞#旋轉(zhuǎn)木馬 img{
代碼解析：
在紅色代碼中：
background-blend-mode:luminosity 定義了背景層的混合模式。混合模式有以下10種：
normal 正常模式（默認(rèn)值）。
multiply 正片疊底模式。
screen 濾色模式。
overlay 疊加模式。
darken 變暗模式。
lighten 變亮模式。
color 顏色模式。
luminosity 灰度模式。
saturation 飽和度模式。
color-dodge 顏色減淡模式。
transition:transform 8s 設(shè)置過渡效果，確定變換用時。
cubic-bezier(0.4,0,0.6,1.3) 規(guī)定貝塞爾曲線值。貝塞爾曲線是法國數(shù)學(xué)家 Pierre Bezier 創(chuàng)造的。它是用一個專用的公式計算出數(shù)據(jù)而繪制出來的，分為一階，二階，三階三個類型。一階只有兩個節(jié)點，是個線段；二階有三個節(jié)點，是個拋物線；三階有四個節(jié)點，所形成的是一條曲線，這條曲線就是我們制作css動畫所要的貝塞爾曲線。四個節(jié)點即是四個座標(biāo)點，座標(biāo)點的移動會使曲線的曲率（即曲線的彎曲度）產(chǎn)生變化，通過曲率變化反映出速率變化，這使我們會看到動畫在過渡時能具有不同的效果。
在實際應(yīng)用中，規(guī)定貝塞爾曲線時還可以把代碼寫成下面的樣子animation-timing-function: linear; 其中的 linear 就是曲線值，是官方預(yù)定義的貝塞爾曲線名稱。為方便朋友們選用，我們把預(yù)定義名稱對應(yīng)的曲線值列下：
ease ———— cubic-bezier（0.25,0.1,0.25,1.0）
linear ———— cubic-bezier（0,0,1.0,1.0）
ease-in ———— cubic-bezier（0.42,0,1.0,1.0）
ease-out ———— cubic-bezier（0,0,0.58,1.0）
ease-in-out ———— cubic-bezier（0.42,0,0.58,1.0）
在黃色代碼中：
position:absolute;top:130%;left:50% 設(shè)定六圖片整體絕對定位。
width:45vmin;height:45vmin; 圖片寬高。 vmin 是長度單位，相當(dāng)于8倍像素 px 。
border-radius:100%; 圓角代碼，100%的比值使正方形成圓形。
box-shadow:0 0 10em red 陰影。第一個“0”表示距離對象左邊距為0處顯現(xiàn)陰影，它是陰影的水平偏移值，可正可負(fù)；第二個“0”表示距離對象上邊距為0處顯現(xiàn)陰影，它是陰影的垂直偏移值，可正可負(fù)。其中的 10em 是表示陰影范圍大小的，單位可以是 em 或者 px 。 red 是陰影顏色。我們看到的是外陰影，如果在這些屬性后面加個 inset 那就變成內(nèi)陰影了。
在綠色代碼中：
margin:87vmin -7vmin; 使用外邊距給圖片定位。
transform:scale(0.5); 規(guī)定縮放倍率。
50% 50% 圖片在圓內(nèi)的居中定位。
