前端小白的成長之路前端系列—shadow的嘗試

時間 2019-11-08

標籤前端白的成長之路系列 shadow 嘗試简体版

原文原文鏈接

💡項目地址：games.git
🎮開始遊戲：starthtml

前言

這篇主要講講奇妙的shadow，探究前端脫離img的可能性，實踐頁面---developers前端

基礎

分析shadow前，咱們先簡單的看一下box-shadow的基本屬性git

boxShadow: 10px 10px 5px 10px #888888 outset;
box-shadow: h-shadow v-shadow blur spread color inset;
複製代碼

固然後，box-shadow支持多個陰影以「,」鏈接。

boxShadow: 10px 10px 5px 10px #888888 outset，
    20px 10px 10px 15px #888888，
    10px 10px 10px 20px #888888;
複製代碼

先看一個🌰

大多數狀況，相似的場景咱們都是經過一張img作背景，由於夾雜這部分動畫，有時候可能還須要幾張局部的小圖配合實現，今天就稍微嘗試一下，藉助shadow純代碼實現這種場景！

簡單分割一下元素github

底部大星球（這個小人怎麼感受有點眼熟，23333）
閃爍小星星
用來許願的流星
耀眼大恆星

大背景就是簡單的漸變chrome

background: linear-gradient(to bottom, #081d3e, #214f9f);
複製代碼

底部大星球

box-shadow: 
    200px -20px 50px #58d1ff, 
    -200px -20px 50px #783be7, 
    0px -2px 5px #ffffff, 
    inset 0px 0px 15px rgba(125, 135, 255, 1);
複製代碼

效果：瀏覽器

小星星

小星星比較簡單，一個✨實體+白色外陰影sass

第一次繪製母星，追求完美，繪製出了 bash

background: 
    radial-gradient(circle at top left, transparent 3px, #fff 0) top left,
    radial-gradient(circle at top right, transparent 3px, #fff 0) top right,
    radial-gradient(circle at bottom right, transparent 3px, #fff 0) bottom right,
    radial-gradient(circle at bottom left, transparent 3px, #fff 0) bottom left;
複製代碼

可是，發現用shadow複製出的子星，沒法還原母體形狀，實際上母星元素形狀並無發生改變，咱們只是改變了背景顏色 less

那仍是回到原點，咱們只作一個菱形（旋轉45deg）代替，藉助less或者sass循環建立隨機位置的子星，注意，每次循環須要建立兩個相同位置的shadow，一個作小星星實體，另外一個作背景泛光

@width: 500;
@hight: 650;
@count: 12;
@random: `Math.random() `;
@0px: 0px;
.getShadow(@top, @left) {
  box-shadow+: @left @top #fff, @left @top 8px 1px #fff;
}

.loopShadow(@i) when (@i < @count) {
  @top: floor(@random* @hight) + @0px;
  @left: floor(@random* @width) + @0px;
  .getShadow(@top, @left);
    // box-shadow+: @left @top #fff, @left @top 8px 1px #fff;
  .loopShadow(@i+1);
}
複製代碼

開始嘗試的時候用的是註釋的那行代碼，按常理，一次循環中兩次用到的@left和@top應該是一樣的值，但實際兩個@left是不一樣的，致使星體和發光背景位置分離了，不過藉助函數再構造一個獨立做用域倒也能實現，
交替閃爍的效果，能夠複製兩個元素效果以下dom

流星

流星頭部背景漸變+shadow泛光，流星尾巴用僞類的border模擬，這裏樣式稍微多一點，咱們賺到codepen看看 codepen--shooting-star-demo

大恆星

輻射出的光，原本想嘗試用shadow模擬，但屢次嘗試沒有達到較好的效果，用了多個元素漸變色模擬

codepen--star-demo ，樣式不算很複雜。值得一提的是中間的耀斑，靈感來自 codepen--Fire，雖然最後沒有達到很完美的效果，勉強能看，後面再看看有什麼更好的模擬方式

看下最後效果(暫時沒有適配pc端)

能夠看到除了色值和那個耀斑的一點小差異外，整體實現效果仍是差強人意的

shadow動畫

簡單版本煙花，先看效果

思路，在原點建立至關數量的shadow，再在動畫裏中同等數量的shadow，只是改變了位置，這樣就有了從一點散射出來了效果，再加上開始彈出和和最後墜落的動畫修飾一下，done！
加上一點點數學，對煙花散射的位置作一點控制，學笛卡爾向心動❤️的女神表白（不存在的）

codepen--LOVE

最後還有一點小小的瑕疵，煙花在落點在曲線上並非均勻分佈的，在斜率大的地方更稀疏，緣由是咱們的構造函數在一個座標軸上均勻，並無在變化率上作文章，有興趣的同窗，運用微積分作細緻的控制

總結

最後總結一下shadow的能力吧！除了字面意思上，能夠製造內外陰影外，實際咱們還能建立任意（位置，大小，顏色，失焦距離）的元素，此外結合動畫，在上述這些屬性上做出漸變更畫，
在性能上，遠遠優於使用js來建立一樣效果的dom動畫，畢竟shadow的渲染實際沒有多餘建立dom元素，打開chrome控制檯咱們能夠看到，瀏覽器將整個建立了shadow的範圍做爲一個GraphicsLayer交給GPU，至於渲染的具體細節暫時不作深挖，後續再經過專題探討。