<input id="ohw05"></input>
  • <table id="ohw05"><menu id="ohw05"></menu></table>
  • <var id="ohw05"></var>
  • <code id="ohw05"><cite id="ohw05"></cite></code>
    <label id="ohw05"></label>
    <var id="ohw05"></var>
  • 有意思的鼠標指針交互探究

    今天,來實現這樣一個有意思的交互效果:

    將原本的鼠標指針樣式,修改成自己想要的效果,并且添加上一些特殊的交互效果。

    修改鼠標樣式

    首先,第一個問題,我們可以看到,上圖中,鼠標指針的樣式被修改成了一個圓點:

    正常而言應該是這樣:

    當然,這里比較簡單,在 CSS 中,我們可以通過 cursor 樣式,對鼠標指針形狀進行修改。

    利用 cursor 修改鼠標樣式

    cursor CSS 屬性設置鼠標指針的類型,在鼠標指針懸停在元素上時顯示相應樣式。

    cursor: auto;
    cursor: pointer;
    ...
    cursor: zoom-out;
    /* 使用圖片 */
    cursor: url(hand.cur)
    /* 使用圖片,并且設置 fallback 兜底 */
    cursor: url(hand.cur), pointer;
    

    這個大家應該都清楚,通常而言,在不同場景下,選擇不同鼠標指針樣式,也是一種提升用戶體驗的手段。


    當然,在本交互中,我們并非要將 cursor 光標設置成任一樣式,剛好相反,我們需要將他隱藏

    通過 cursor: none 隱藏光標

    在這里,我們通過 cursor: none 隱藏頁面的鼠標指針:

    {
        cursor: none;
    }
    

    如此一來,頁面上的鼠標指針就消失了:

    通過全局事件監聽,模擬鼠標指針

    既然,消失了,我們就簡單模擬一個鼠標指針。

    我們首先實現一個 10px x 10px 的圓形 div,設置為基于 <body> 絕對定位:

    <div id="g-pointer"></div>
    
    #g-pointer {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        background: #000;
        border-radius: 50%;
    }
    

    那么,在頁面上,我們就得到了一個圓形黑點:

    接著,通過事件監聽,監聽 body 上的 mousemove,將小圓形的位置與實時鼠標指針位置重合:

    const element = document.getElementById("g-pointer");
    const body = document.querySelector("body");
    
    function setPosition(x, y) {
      element.style.transform  = `translate(${x}px, ${y}px)`;                
    }
    
    body.addEventListener('mousemove', (e) => {
      window.requestAnimationFrame(function(){
        setPosition(e.clientX - 5, e.clientY - 5);
      });
    });
    

    這樣,如果不設置 cursor: none,將會是這樣一個效果:

    再給 body 加上 cursor: none,就相當于模擬了一個鼠標指針:

    在這個基礎上,由于現在的鼠標指針,實際上是個 div因此我們可以給它加上任意的交互效果

    以文章一開頭的例子為例,我們只需要借助混合模式 mix-blend-mode: exclusion,就能夠實現讓模擬的鼠標指針能夠智能地在不同背景色下改變自己的顏色。

    對于混合模式這個技巧還有所疑問的,可以看看我的這篇文章:利用混合模式,讓文字智能適配背景顏色

    完整的代碼:

    <p>Lorem ipsum dolor sit amet</p>
    <div id="g-pointer-1"></div>
    <div id="g-pointer-2"></div>
    
    body {
        cursor: none;
        background-color: #fff;
    }
    #g-pointer-1,
    #g-pointer-2
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 12px;
        height: 12px;
        background: #999;
        border-radius: 50%;
        background-color: #fff;
        mix-blend-mode: exclusion;
        z-index: 1;
    }
    #g-pointer-2 {
        width: 42px;
        height: 42px;
        background: #222;
        transition: .2s ease-out;
    }
    
    const body = document.querySelector("body");
    const element = document.getElementById("g-pointer-1");
    const element2 = document.getElementById("g-pointer-2");
    const halfAlementWidth = element.offsetWidth / 2;
    const halfAlementWidth2 = element2.offsetWidth / 2;
    
    function setPosition(x, y) { 
        element.style.transform  = `translate(${x - halfAlementWidth}px, ${y - halfAlementWidth}px)`;       element2.style.transform  = `translate(${x - halfAlementWidth2}px, ${y - halfAlementWidth2}px)`;
    }
    
    body.addEventListener('mousemove', (e) => {
      window.requestAnimationFrame(function(){
        setPosition(e.clientX, e.clientY);
      });
    });
    

    我們就能完美還原出題圖的效果:

    完整的代碼,你可以戳這里:Mouse Cursor Transition

    偽類事件觸發

    有一點需要注意的是,利用模擬的鼠標指針去 Hover 元素,Click 元素的時候,會發現這些事件都無法觸發。

    這是由于,此時被隱藏的指針下面,其實懸浮的我們模擬鼠標指針,因此,所有的 Hover、Click 事件都觸發在了這個元素之上。

    當然,這個也非常好解決,我們只需要給模擬指針的元素,添加上 pointer-events: none,阻止默認的鼠標事件,讓事件透傳即可:

    {
        pointer-events: none;
    }
    

    鼠標跟隨,不僅于此

    當然,這里核心就是一個鼠標跟隨動畫,配合上 cursor: none

    而且,鼠標跟隨,我們不一定一定要使用 JavaScript。

    我在 不可思議的純 CSS 實現鼠標跟隨 一文中,介紹了一種純 CSS 實現的鼠標跟隨效果,感興趣的也可以看看。

    基于純 CSS 的鼠標跟隨,配合 cursor: none,也可以制作出一些有意思的動畫效果。像是這樣:

    CodePen Demo -- Cancle transition & cursor none

    最后

    本文到此結束,希望對你有幫助 ??

    更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ,持續更新,歡迎點個 star 訂閱收藏。

    如果還有什么疑問或者建議,可以多多交流,原創文章,文筆有限,才疏學淺,文中若有不正之處,萬望告知。

    posted @ 2022-06-21 10:41  ChokCoco  閱讀(1958)  評論(5編輯  收藏  舉報
    国产美女a做受大片观看