国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css實現的一些視覺效果

luffyZh / 3261人閱讀

摘要：鄰邊投影雙側投影用兩塊投影每邊各一塊來實現不規則投影解決辦法是使用濾鏡效果，。濾鏡，它會給圖片增加一種降飽和度的橙黃色染色效果。實現方式毛玻璃效果折角效果折角的解決方案增加一個暗色的三角形來實現翻折效果。

投影

1.單側投影
思路是box-shadow 的第四個長度參數。它排在模糊半徑參數之后，稱作擴張半徑。這個參數會根據你指定的值去擴大或當指定負值時，縮小投影的尺寸。例如，一個-5px 的擴張半徑會把投影的寬度和高度各減少10px（即每邊各5px）。

box-shadow: 0 5px 4px -4px black;

2.鄰邊投影

box-shadow: 3px 3px 6px -3px black;

3.雙側投影

用兩塊投影（每邊各一塊）來實現

box-shadow: 5px 0 5px -5px black,
            -5px 0 5px -5px black;
不規則投影

解決辦法是使用濾鏡效果，filter。值有很多，比如blur()、grayscale() 以及drop-shadow()等。

實現不規則投影使用的是drop-shadow

filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

注：drop-shadow會給任何非透明的部分打上投影，包括文本。如果文本設置了text-shadow，就是投影的投影。

染色效果

方案一：
為了解決給圖片加一層統一的渲染風格，使用filter濾鏡，并且需要將一些濾鏡的值疊加使用。

sepia濾鏡，它會給圖片增加一種降飽和度的橙黃色染色效果。
saturate濾鏡，給每個像素提升飽和度
hue-rotate濾鏡，把每個像素的色相以指定的度數進行偏移

filter: sepia(1) saturate(4) hue-rotate(295deg);

原圖：

方案二：
基于混合模式的方案。mix-blendmode可以為整個元素設置混合模式。background-blend-mode 可以為每層背景多帶帶指定混合模式。

實現方式：


    

a {
    background: hsl(335, 100%, 50%);
}
img {
    mix-blend-mode: luminosity;
}
毛玻璃效果 

    

      

        "The only way to get rid of a temptation[...]"
      

    


.bg {
  width: 500px;
  height: 300px;
  background: url("dog.jpg");
  background-size: cover;
}

main {
  position: relative;
  background: hsla(0, 0%, 100%, .3);
  overflow: hidden;
}

main::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(20px);
  margin: -30px;
}

折角效果

45°折角的解決方案
增加一個暗色的三角形來實現翻折效果。實現方法是增加另一層漸變來生成這個三角形并將其定位在右上角，這樣就可以通過background-size 來控制折角的大小。

div {
    background: #58a; /* 回退樣式 */
    background:
    linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
    linear-gradient(-135deg, transparent 1.5em, #58a 0);
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112030.html

相關文章

  • CSS相關文章

    摘要：如何用獲取虛擬鍵盤高度前端早讀課月號早讀文章由湯谷投稿分享。大殺器和把動畫轉換成原生動畫初來乍到，本文搬運自我月份在知乎發的文章。 前端面試之 CSS3 新特性 除了 HTML5 的新特性，CSS3 的新特性也是面試中經常被問到的。 如何用 js 獲取虛擬鍵盤高度？-前端早讀課 9月7號早讀文章由@湯谷投稿分享。正文從這開始～ 這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題...

    FrozenMap 評論0 收藏0

  • CSS3-Animotion抽絲剝繭 一步步擼出跑男動畫

    摘要：通過剖析一個跑男動畫實例，來把中動畫相關的知識點抽絲剝繭，一網打盡。跑男的動畫其實可以拆分為兩個一個是交替擺腿另一個是位置移動。在使用改變雪碧圖時，得到效果這樣的平滑過度顯然不是我們想要的。所以，在切換雪碧圖背景的方案下，就要派上用場了。 作為一名真正的前端開發者，我們不能只關注前端邏輯部分。畢竟水銀泄地般的頁面設計和炫酷逼真的動畫效果，是我們區別于其他程序員所特有的優勢之一。 盡量百...

    caoym 評論0 收藏0

  • CSS3-Animotion抽絲剝繭 一步步擼出跑男動畫

    摘要：通過剖析一個跑男動畫實例，來把中動畫相關的知識點抽絲剝繭，一網打盡。跑男的動畫其實可以拆分為兩個一個是交替擺腿另一個是位置移動。在使用改變雪碧圖時，得到效果這樣的平滑過度顯然不是我們想要的。所以，在切換雪碧圖背景的方案下，就要派上用場了。 作為一名真正的前端開發者，我們不能只關注前端邏輯部分。畢竟水銀泄地般的頁面設計和炫酷逼真的動畫效果，是我們區別于其他程序員所特有的優勢之一。 盡量百...

    OBKoro1 評論0 收藏0

  • CSS3-Animotion抽絲剝繭 一步步擼出跑男動畫

    摘要：通過剖析一個跑男動畫實例，來把中動畫相關的知識點抽絲剝繭，一網打盡。跑男的動畫其實可以拆分為兩個一個是交替擺腿另一個是位置移動。在使用改變雪碧圖時，得到效果這樣的平滑過度顯然不是我們想要的。所以，在切換雪碧圖背景的方案下，就要派上用場了。 作為一名真正的前端開發者，我們不能只關注前端邏輯部分。畢竟水銀泄地般的頁面設計和炫酷逼真的動畫效果，是我們區別于其他程序員所特有的優勢之一。 盡量百...

    bingo 評論0 收藏0

  • 容易忽略的七個CSS知識點

    摘要：樣式聲明通過一個稱為級聯的過程來解釋和決定。級聯級聯可能是中最容易被弄錯的屬性之一。因此很容易認為元素的視覺邊界等于其寬度，但情況并非如此。 如果你在日常工作中使用CSS，那么你的主要目標很可能集中在使事情看起來是正確的。最終得到的正確結果遠比如何實現更重要。這意味著相比正確的語法和視覺效果我們更少關注CSS的實現原理。 你可能還沒有意識到，但CSS的視覺效果通常是操縱隱藏屬性的間接結...

    chanthuang 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<