CSS單標簽實現轉轉logo
轉轉品牌升級后更新了全新的Logo，今天我們用純CSS來實現轉轉的新Logo，為了有一定的挑戰性，這里我們只使用一個標簽實現，將最大化的使用CSS能力完成Logo的繪制與動畫效果。新logo
盼了好久，最近 Chrome 125終于迎來了CSS 錨點定位的正式支持。這是一個和 CSS 滾動驅動動畫一樣，足以顛覆整個 Web 開發領域的新特性。有了這個特性，很多以前強依賴 JS 的方式，都可以純 CSS解決，并且實現起來更加簡單、更加靈活，一起看看吧！
可以看到，在切換tab時，底下的背景是可以無縫過渡的。在以前，我們要實現這樣的功能，必須要借助 JS來獲取當前點擊元素的尺寸和位置，但現在，只需要借助 CSS 錨點定位就能輕松實現了。
位置信息前面以及提到了，用anchor(left)和anchor(top)就可以了，那尺寸呢，需要用到anchor-size。
anchor-size(width) /*錨點元素寬度*/anchor-size(height) /*錨點元素高度*/利用這個特性，我們可以很輕松的實現這樣一個效果，結構如下：
<nav class="tab"> <a class="item" href="#HTML" name="HTML">HTML</a> <a class="item" href="#CSS" name="CSS">CSS</a> <a class="item" href="#JavaScript" name="JavaScript">JavaScript</a> <a class="item" href="#React" name="React">React</a> <a class="item" href="#Vue" name="Vue">Vue</a></nav>我們用偽元素來當做tab高亮背景，關鍵實現如下：
.tab::after{ content: ''; position: absolute; border-radius: 100px; background-color: rgba(65, 105, 225, 0.2); position-anchor: --anchor-el; width: anchor-size(width); height: anchor-size(height); left: anchor(left); top: anchor(top); transition: .3s; pointer-events: none;}.item:target{ anchor-name: --anchor-el;}這樣就能輕松實現這個效果了，你也可以訪問以下在線鏈接（Chrome 125+）
有時候定位元素會處于屏幕邊緣，當沒有足夠空間顯示時，可以通過position-try-options來設置一個備用位置。
舉個例子，比如一個氣泡，默認是朝上的，當滾動到屏幕邊緣時會自動朝下，示意如下：
這種情況就可以用@position-try來實現了，具體做法是這樣的。
先通過position-try-options指定一個變量名，比如--bottom。
tooltip{ position: fixed; position-anchor: --anchor-el; inset-area: top; position-try-options: --bottom;}然后通過@position-try來定義規則。
@position-try --bottom { inset-area: bottom;}這樣就實現定位元素位置自動調整了。
除此之外，還有一種便捷寫法，直接給position-try-options指定以下關鍵字。
position-try-options: flip-block; /*垂直翻轉*/position-try-options: flip-inline; /*水平翻轉*/這樣就無需@position-try定義了，實現更簡單。
當然，我覺得這個功能還是稍顯不足的，比如當氣泡帶有箭頭時，雖然也能翻轉，但是卻無法改變箭頭的位置，也就是無法查詢到當前是否已經翻轉了，就像這樣。
首先是點擊出現，這個就是popover的功能了，通過popovertarget和popover屬性，將兩者結合起來，就能輕松實現點擊出現菜單的功能。
<button class="btn" popovertarget="more"></button><div class="menu" id="more" popover> <button class="item">編輯</button> <button class="item">刪除</button></div>然后就定位，利用CSS錨點定位，將菜單定位到按鈕的右下方，也就兩三行代碼的事。
.btn{ anchor-name: --menu;}.menu{ position-anchor: --menu; inset-area: bottom span-right;}這樣就能輕易實現懸浮菜單了，你也可以訪問以下在線鏈接（Chrome 125+）
在codepen上找到了一個更完善的多級菜單案例。
https://codepen.io/jh3y/pen/dyLjbwG
介紹了這么多，一下子肯定難以接受，多回顧幾遍就明白了，至少可以知道錨點定位是干嘛的，如果以后有類似的需求也有一定的方向，下面總結一下本文要點
最近幾年CSS更新的確實有點太快了，很多以往的疑難雜癥都有了新的解決方式。但是很多時候學這些好像暫時沒啥用，畢竟可能 5 年以后才用得上。但是原生特性不像其他，一個框架兩三年就有可能被淘汰，或者有新的替代品出現，原生的學到了就學到了，只要web存在的一天，就永遠都不會過時，所以也不虧是吧。
[1]CSS anchor (codepen.io)： https://codepen.io/xboxyan/pen/dyEVVPb。
[2]CSS anchor nav (codepen.io)： https://codepen.io/xboxyan/pen/zYQpvqg。
[3]CSS anchor position-try-options (codepen.io)： https://codepen.io/xboxyan/pen/dyEJYRO。
[4]CSS anchor menu (codepen.io)： https://codepen.io/xboxyan/pen/qBGpOKq。
本文鏈接：http://www.tebozhan.com/showinfo-26-101375-0.htmlCSS錨點定位終于來了！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： ES13 中最具變革性的五個 JavaScript 功能
下一篇： 軟件版本號為什么那么奇怪？你知道嗎？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號