<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          css實現內容漸變隱藏效果,手機網頁版知乎內容隱藏效果的實現

          時間:?2017-12-19閱讀:?2959標簽:?漸變

          看到一個需求,如下圖,知乎手機網頁版的一個視覺效果,對內容很長的部分有一個漸變的隱藏的效果,個人覺得這個設計還是很好的,符合手機大小的應用場景,沒有一下子顯示完全,可以很快的滑倒頁面底部,一定程度上減少了滑動時間,用戶體驗很好,對整個頁面有一個大概的預覽,強迫癥會感覺很爽。


          具體怎么實現這個效果,分析一下:

          可以看出來是一個漸變的效果,從上往下顏色變白,我們知道在css3中有兩種漸變:線性(linear-gradient)和徑向(radial-gradient),很明顯這里屬于線性漸變。

          漸變這種效果其實是一個圖片的樣子,我們可以設置一張上下透明的背景圖,定位在文字上,沒有漸變之前可以用這種方法。css3有了漸變,我們可以直接使用,漸變可以應用于任何使用背景圖片的地方。這意味著在CSS樣式中,漸變相當于背景圖片。

          background-image: linear-gradient(str1,str2,str3);

          漸變中共有三個參數,第一個數數表示線性漸變的方向,第二個和第三個參數分別是起點顏色和終點顏色。

           

          方案一:

          HTML:

          <body>
          	<div class="show_text">
          		<p>漸變這種效果其實是一個圖片的樣子,我們可以設置一張上下透明的背景圖,定位在文字上,沒有漸變之前可以用這種方法。css3有了漸變,我們可以直接使用,漸變可以應用于任何使用背景圖片的地方。這意味著在CSS樣式中,漸變相當于背景圖片...</p>
          	</div>
          	<div class="mask"></div>
          </body>

          CSS:

          <style>
          body{
          	position: relative;
          }
          .show_text{
          	width: 100%;
          	margin:0 auto;
          }
          .mask{
          	width:100%;
          	position: absolute;
          	top:0;
          	height: 100%;
          	background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,0), #fff);
          	background-image: -moz-linear-gradient(top, hsla(0,0%,100%,0), #fff);
          	background-image: -o-linear-gradient(top, hsla(0,0%,100%,0), #fff);
          	background-image: linear-gradient(top, hsla(0,0%,100%,0), #fff);
          }
          </style>

          hsla(0,0%,100%,0) 也可以使用 rgba(255,255,255,0)代替;效果圖:



          方案二:

          在幾年前張大神的博客中也有類似的效果,他寫的效果是對文字本身進行漸變,也是一種思路,借鑒過來使用,字體顏色為黑色,可以設置黑色到白色的上下漸變。

          p{
             background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgb(25, 27, 25)), to(rgb(245, 244, 244)));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
          }

          后兩種屬性兼容性不是很好。視覺上差別不是特別大,推薦使用方案一。


          后記:

          在這個大前端時代,相比各種火熱的前端框架,CSS雖簡單,也是容易被忽略,想要對CSS有一個比較深的掌握也是需要下大功夫的。在追趕大潮趨勢下,我們也要打好深厚的基礎,js也是,萬變不離其宗。


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/260

          CSS3中的漸變效果

          漸變是CSS3中比較豐富多彩的一個特性,通過漸變我們可以實現許多絢麗的效果。漸變可分為線性漸變和徑向漸變。線性漸變:沿著某條直線朝一個方向產生漸變效果

          CSS3 漸變(Gradients)

          漸變的效果是由瀏覽器生成的,漸變的類型主要分為兩種:線性漸變(Linear Gradients)和徑向漸變(Radial Gradients);線性漸變是一個向上、向下、向左、向右或者對角方向的漸變

          css 顏色漸變 兼容性

          一開始用 background: linear-gradient(to right, #000,#fff) ,谷歌、360極速模式、火狐、歐朋(都是新版)可以兼容;ie9 不可以兼容。所以為了ie或其他較低版本瀏覽器兼容:

          js如何計算兩個顏色之間的漸變色值?

          對給定的兩個顏色值進行漸變計算,得到漸變的所有色值的數組。 示例:計算 #ec9089 與 #c12927 之間的漸變色值,步長設定為 100

          css3漸變之線性漸變linear-gradient

          線性漸變:為了創建一個線性漸變,必須至少定義兩種顏色結點。同時,也可以設置一個起點和一個方向(或一個角度)。其共有三個參數:第一個參數表示線性漸變的方向,第二個和第三個參數分別是起點顏色和終點顏色。

          css文字漸變色_css文字顏色漸變的3種實現

          在web前端開發過程中,UI設計師經常會設計一些帶漸變文字的設計圖,在以前我們只能用png的圖片來代替文字,今天可以實現使用純CSS實現漸變文字了。下面就介紹3中實現方式供大家參考!

          css3實現背景顏色漸變,文字顏色漸變,邊框顏色漸變

          css3的漸變可以使用2個或者多個指定的顏色之間顯示平穩的過渡的效果。這篇文章主要介紹下css3實現背景顏色漸變,文字顏色漸變,邊框顏色漸變的方法,以便大家學習參考!

          漂亮的 css3 漸變色

          精選最酷的漸變色調,coolHue有60個最酷的漸變顏色,能復制 CSS3 代碼和直接下載背景圖片。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网