Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 东京一热本色道久久爱,一区二区三区高清在线,中文字幕一区二区区免 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務(wù)商
          
				
          電腦端+手機端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          CSS 滾動驅(qū)動動畫實現(xiàn)圓弧滾動條
          
        
           
          
	
	
          
		
                        
          不久看到這樣一個很有趣的效果，它的滾動條是沿著圓角邊緣滾動的，效果如下
          你可以查看原鏈接來體驗一下
          https://codepen.io/jh3y/pen/gOEgxbd
          這是如何實現(xiàn)的呢？
          原效果中由于為了兼容不支持CSS滾動驅(qū)動的瀏覽器，特意用 JS做了兼容，所以看著比較復(fù)雜，其實核心非常簡單，下面我將用最簡短的 CSS 來復(fù)刻這一效果，一起看看吧
          一、SVG 路徑動畫
          從本質(zhì)上來講，其實是一個 SVG 路徑動畫。
          具體如何實現(xiàn)呢？
          首先，我們通過設(shè)計軟件繪制一個這樣的路徑
          注意設(shè)置描邊的大小還有端點的類型，比如下面是round效果
          然后導(dǎo)出SVG，可以得到這樣一段代碼
          <svg viewBox="0 0 31 433" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M4 4C9.96737 4 15.6903 6.37053 19.9099 10.5901C24.1295 14.8097 26.5 20.5326 26.5 26.5V406.5C26.5 412.467 24.1295 418.19 19.9099 422.41C15.6903 426.629 9.96737 429 4 429" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

          然后，如何讓這段SVG動起來呢？
          很簡單，現(xiàn)在SVG是一段實線，我們可以通過stroke-dasharray設(shè)置成虛線，比如
          path{
  stroke-dasharray: 80
}

          這樣會得到一個實線和虛線間隔都是80的虛線
          如果希望虛線空白的地方更大一點，該怎么設(shè)置呢?很簡單，繼續(xù)往后加
          path{
  stroke-dasharray: 80 120
}

          效果如下
          所以，這種寫法其實相當于把當前的值無限重復(fù)，示意如下
          當然，我們這里不需要設(shè)置的這么復(fù)雜，只需要一小段實線就夠了，所以是實現(xiàn)加上一段足夠長的虛線（超過路徑本身就行），實現(xiàn)如下
          path{
  stroke-dasharray: 80 1000
}

          這樣就得到了一小段實線
          那么，如何讓他動起來呢？很簡單，改變一下偏移就可以，這個可以用stroke-dashoffset來實現(xiàn)
          比如，我們
          @keyframes scroll {
  to {
    stroke-dashoffset: -370
	}
}
path{
  stroke-dasharray: 80 1000;
  animation: scroll 3s alternate-reverse infinite;
}

          效果如下
          是不是有點像呢？
          我們再調(diào)整一下起始偏移量，讓它出去一點
          @keyframes scroll {
  0% { stroke-dashoffset: 75; }
  100% { stroke-dashoffset: -445; }
}

          這樣就更接近我們想要的效果了
          整個運動原理就是這樣了，接著往下看
          二、CSS 滾動驅(qū)動動畫
          接下來需要通過滾動驅(qū)動動畫將容器滾動與CSS動畫「聯(lián)動」起來。
          關(guān)于CSS 滾動驅(qū)動可以參考我之前寫的這篇文章：CSS 滾動驅(qū)動動畫終于正式支持了~
          簡單來講，「CSS 滾動驅(qū)動動畫」指的是將「動畫的執(zhí)行過程由頁面滾動」進行接管，也就是這種情況下，「動畫只會跟隨頁面滾動的變化而變化」，也就是滾動多少，動畫就執(zhí)行多少，「時間不再起作用」。
          先簡單布局一下
          <div class="list">
  <div class="item" id="item_1">1</div>
  <div class="item" id="item_2">2</div>
  <div class="item" id="item_3">3</div>
  <div class="item" id="item_4">4</div>
  <div class="item" id="item_5">5</div>
  <div class="item" id="item_6">6</div>
  <div class="item" id="item_7">7</div>
</div>

          美化一下
          然后，我們將默認的滾動條隱藏，用我們這個 SVG路徑來代替，由于需要絕對定位，我們再套一層父級
          <div class="wrap">
  <div class="list">
    <div class="item" id="item_1">1</div>
    <div class="item" id="item_2">2</div>
    <div class="item" id="item_3">3</div>
    <div class="item" id="item_4">4</div>
    <div class="item" id="item_5">5</div>
    <div class="item" id="item_6">6</div>
    <div class="item" id="item_7">7</div>
    <!--滾動條-->
    <svg class="scroller" viewBox="0 0 31 433" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path class="scroller_thumb" d="M4 4C9.96737 4 15.6903 6.37053 19.9099 10.5901C24.1295 14.8097 26.5 20.5326 26.5 26.5V406.5C26.5 412.467 24.1295 418.19 19.9099 422.41C15.6903 426.629 9.96737 429 4 429" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </div>
</div>

          相關(guān)CSS如下
          .wrap{
  position: relative;
}
.scroller {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  height: -webkit-fill-available;
  margin: 5px;
}
.scroller_thumb{
  stroke: hsl(0 0% 100% / 0.5);
  stroke-dasharray: 80 450;
  stroke-width: 8px;
  animation: scroll both 5s linear;
}

          這樣結(jié)構(gòu)就搭好了，只是滾動條會自動播放
          接下來就是最關(guān)鍵的一步，加上滾動驅(qū)動動畫
          .scroller_thumb{
  animation: scroll both 5s linear;
  animation-timeline: scroll();
}

          但是這樣是不起作用的，直接使用scroll()會自動尋找它的相對父級，也就是.wrap，但實際滾動的其實是.list，所以這種情況下我們需要具名的滾動時間線，實現(xiàn)如下
          .list{
  scroll-timeline: --scroller;
}
.scroller_thumb{
  animation: scroll both 5s linear;
  animation-timeline: --scroller;
}

          這樣SVG路徑動畫就能跟隨容器滾動而運動了
          三、CSS 滾動吸附
          原效果中還有一個滾動回彈的效果，當滾動到容器邊緣時，會自動回彈到起始位置。
          其實只需要用到 CSS scroll snap 就可以了
          https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type
          實現(xiàn)很簡單，給滾動容器添加scroll-snap-type屬性，表示這是個允許滾動吸附的容器
          .list{
  scroll-snap-type: y mandatory;
}

          然后就指定需要吸附的點了，由于需要回彈的效果，所以滾動容器的首尾需要一個空白的容器，這里直接用兩個偽元素來生成
          .list::before,
.list::after{
  content: '';
  height: 50px;
  flex-shrink: 0;
}

          效果如下
          然后我們設(shè)置滾動吸附點就行了，設(shè)置第一個元素頂部和最后一個元素底部，其他元素居中就行了
          .item{
  scroll-snap-align: center;
}
.item:first-child{
  scroll-snap-align: start;
}
/*最后一個元素是 SVG，所以這里用倒數(shù)第二個元素*/
.item:nth-last-child(2){
  scroll-snap-align: end;
}

          這樣就實現(xiàn)了文章開頭的效果了
          完整代碼可以查看以下鏈接（無任何 JS）
          • CSS round scroll (juejin.cn)[1]
          • CSS round scroll (codepen.io)[2]
          四、總結(jié)一下
          總的來說，CSS滾動驅(qū)動在滾動交互上帶來了無限可能，很多以前必須借助 JS來實現(xiàn)的都可以輕易實現(xiàn)，下面總結(jié)一下
          1. 從本質(zhì)上來講，右側(cè)的滾動條其實是一個 SVG 路徑動畫
          2. SVG路徑可以通過stroke-dasharray設(shè)置虛實間隔
          3. 當虛線間隔足夠長時，超過路徑本身，就能得到一小塊實線
          4. 通過改變stroke-dashoffset偏移能夠?qū)崿F(xiàn)路徑描邊動畫
          5. 借助 CSS滾動驅(qū)動動畫可以將SVG路徑動畫跟隨容器滾動而運動
          6. 滾動回彈效果其實就是CSS scroll snap實現(xiàn)的
          作者:XboxYan 
          來源:微信公眾號:前端偵探
          出處:https://mp.weixin.qq.com/s/GaakgWhXm6jpY4PfISNHZQ
          現(xiàn)跑馬燈的方法很多，其中最簡單的是采用一句Html代碼來實現(xiàn)，我們在需要出現(xiàn)跑馬燈效果的地方插入“<marquee>滾動的文字</marquee>”語句，它的效果如下所示：
          滾動的文字
           適當?shù)倪\用<marquee>標簽的參數(shù)，可以表現(xiàn)出不同的效果，請看下面的幾個例子：
           1、左右彈來彈去的跑馬燈
          彈來彈去跑馬燈! 實現(xiàn)的方法就是在IE的標簽上稍微多加了幾個參數(shù)產(chǎn)生了更加豐富的變化。設(shè)置behavior=alternate表示雙向移動，direction= left表示運動方向向左。marquee的寬度可以使用絕對象素值，例如width=200等這個值限定了跑馬燈滾動的范圍。需要說明的是該效果在 Netscape下是看不到的。
           源碼粘貼框：
          <marquee width=400 behavior=alternate direction=left align=middle>彈來彈去跑馬燈!</marquee>
           ２、跑的很快的跑馬燈
          跑的很快跑馬燈!　 只要在<marquee>標簽后面加上“scrollamount=15”即可,修改=后邊的數(shù)字參數(shù)即可限制文字移動的速度。
           ３、帶有超級鏈接的跑馬燈
          帶超級鏈接的跑馬燈!點我試試？ 還有一條呢!點我試試？　 實現(xiàn)的方法很簡單，把整個<marquee></marquee>語句包含在超鏈接中就行，你看看下面的代碼就清楚了。當然你也可以把包含在<marquee></marquee>中的各條內(nèi)容分別加上不同的鏈接，這樣的跑馬燈就可用來發(fā)布滾動新聞或是做站點導(dǎo)航了。
           如果你想給跑馬燈的文字加上顏色，換用不同的字體（默認是宋體，換體就要加代碼），只要在文字前加上<FONT face=楷體_GB2312 color=#ff0000 size=3>就行了，你可在“face=”后邊換上你喜歡的字體，在“color=”后邊換上你喜歡的字顏色，在“size=”后邊換上適合的字號，如果想讓字體加粗，就再加上<STRONG>。
           請看一下效果： 帶超級鏈接的跑馬燈!點我試試？ 還有一條呢!點我試試？ 上面效果的代碼碼如下：
          <marquee width=400 scrollamount=2> <a href=http://www.taobaojp5.tk><FONT face=楷體_GB2312 color=#ff0000 size=3><STRONG>帶有超鏈接的跑馬燈!點我試試？</a> <a href=http://954872988.qzone.qq.com/;還有一條呢!點我試試？</FONT></STRONG></a> </marquee>
           以上幾個例子都是<marquee>標簽參數(shù)的應(yīng)用，下面把所有可以利用的參數(shù)列在表中供你參考，不過還是要提醒你，<marquee>標簽只被IE所支持，使用Netscape瀏覽器是看不到的噢。
          參數(shù)用法介紹behavior=scroll, slide, alternate跑馬方式：循環(huán)繞行，只跑一次就停住，來回往復(fù)運動direction=left,right跑馬方向：從左向右，從右向左loop=100跑馬次數(shù)：循環(huán)100次，如不寫默認為一直循環(huán)width=100%,height=200跑馬范圍：寬為100%，高為200像素scrollamount=20跑馬速度：數(shù)越大越快scrolldelay=500跑馬延時：毫秒數(shù)，利用它可實現(xiàn)躍進式滾動hspace=20，vspace=20跑馬區(qū)域與其它區(qū)域間的空白大小bgcolor=#00FFCC跑馬區(qū)域的背景顏色face=楷體_GB2312跑馬燈文字字體color=#ff0000跑馬燈文字顏色size=3跑馬燈文字字號STRONG跑馬燈文字加粗
           你已經(jīng)看到，盡管<marquee>參數(shù)不少，但畢竟不能實現(xiàn)復(fù)雜的和自定義的特殊跑馬燈效果，而且還有瀏覽器限制，所以我們更多情況下會采用JavaScript來實現(xiàn)跑馬燈。
          avascript中制作滾動代碼的常用屬性
          1.網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth; 網(wǎng)頁可見區(qū)域高： document.body.clientHeight; 網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬); 網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的寬); 網(wǎng)頁正文全文寬： document.body.scrollWidth; 網(wǎng)頁正文全文高： document.body.scrollHeight; 網(wǎng)頁被卷去的高： document.body.scrollTop; 網(wǎng)頁被卷去的左： document.body.scrollLeft; 網(wǎng)頁正文部分上： window.screenTop; 網(wǎng)頁正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的寬： window.screen.width; 屏幕可用工作區(qū)高度： window.screen.availHeight;
          2.假設(shè) obj 為某個 HTML 控件。
          obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。 obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。 obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。 obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。
          我們對前面提到的“上方或上層”與“左方或上層”控件作個說明。 例如：
          “提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。 “重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。 “提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的距離，因為距其左邊最近的是 “tool” 層的左邊框。 “重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的距離，因為距其左邊最近的是“提交”按鈕的右邊框。
          以上屬性在 FireFox 中也有效。
          3.offsetTop 與 style.top 的區(qū)別
          預(yù)備知識：offsetTop、offsetLeft、offsetWidth、offsetHeight 我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區(qū)別是：
          (1)offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px。 (2)offsetTop 只讀，而 style.top 可讀寫。 (3)如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串。
          offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。 offsetWidth與style.width屬性的區(qū)別在于：如對象的寬度設(shè)定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值
          4.scrollLeft : 對象的最左邊到對象在當前窗口顯示的范圍內(nèi)的左邊的距離． 即是在出現(xiàn)了橫向滾動條的情況下，滾動條拉動的距離． scrollTop 對象的最頂部到對象在當前窗口顯示的范圍內(nèi)的頂邊的距離． 即是在出現(xiàn)了縱向滾動條的情況下，滾動條拉動的距離．
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲AⅤ无码一区二区三区在线|
国产午夜精品一区理论片|
国产一区二区三区福利|
日韩视频在线观看一区二区|
久久精品成人一区二区三区|
久久精品综合一区二区三区|
中文字幕精品亚洲无线码一区|
国产精品99无码一区二区|
精品视频一区二区观看|
色狠狠色噜噜Av天堂一区|
最新欧美精品一区二区三区
|
国产视频一区在线播放|
日本不卡在线一区二区三区视频|
国产AV一区二区三区传媒|
3D动漫精品一区二区三区|
亚洲一区二区三区深夜天堂|
无码喷水一区二区浪潮AV|
中日韩一区二区三区|
亚洲电影一区二区三区|
无码视频一区二区三区|
日韩精品无码一区二区三区四区|
精品一区二区三区免费毛片爱|
伊人久久精品无码麻豆一区|
一区二区三区四区无限乱码|
久久亚洲AV午夜福利精品一区|
美女视频黄a视频全免费网站一区|
国产一区二区三区小说|
日韩a无吗一区二区三区|
精品国产免费一区二区|
香蕉一区二区三区观|
亚洲av综合av一区二区三区
|
国产成人无码一区二区在线播放
|
久久精品无码一区二区无码
|
国产精品亚洲一区二区三区|
中文字幕一区二区三区久久网站
|
精品无码一区在线观看|
国产一区内射最近更新|
日韩精品乱码AV一区二区|
精彩视频一区二区三区|
亚洲一区二区三区在线|
嫩B人妻精品一区二区三区|