css3 a標籤效果
阿新 • • 發佈：2019-01-30
在https://tympanus.net/Development/CreativeLinkEffects/#cl-effect-5看到一些不錯的標籤hover效果，自己試著實現了幾個（本人菜鳥一枚）
預覽
主要使用::after、::before偽元素實現，比較麻煩的是第三個CSS3d效果，要設定的比較多。
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> html,body{ height: 100%; width: 100%; font-family: 'Raleway', sans-serif; } *{ padding: 0; margin: 0; } .item{ width: 100%; height: 120px; text-align: center; } .item:nth-child(odd){ background-color: #0e83cd; } .item:nth-child(even){ background-color: #435a6b; } .title{ font-size: 25px; position: absolute; line-height: 100px; left: 50px; } *[id^="a"]{ color: white; font-size: 1.5em; cursor: pointer; width: 150px; height: 40px; line-height: 40px; margin-top: 30px; position: absolute; display: inline-block; } /* * 效果1 */ #a1::before{ content: "["; margin-right: 0; opacity: 0; transition: margin-right 0.3s, opacity 0.2s; } #a1::after{ content: "]"; margin-left: 0; opacity: 0; transition: margin-left 0.3s, opacity 0.2s; } #a1:hover::before{ opacity: 1; margin-right: 20px; } #a1:hover::after{ opacity: 1; margin-left: 20px; } /* * 效果2 */ #a2{ position: absolute; } #a2::after{ margin-top: -10px; opacity: 0; position: absolute; top: 100%; left: 0; content: ""; width: 100%; height: 5px; background-color: #0E83CD; transition: margin-top 0.3s, opacity 0.2s; } #a2:hover::after{ margin-top: 0; opacity: 1; } /* * 效果3 */ .item:last-child{ /** * 注意設定css3d的：perspective、transform-style */ perspective: 1000px; -webkit-perspective: 1000px; } .item #container{ position: absolute; left: 50%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform: rotateX(0deg) translate3d(0,0,0); -webkit-transform: rotateX(0deg) translate3d(0,0,0); /*origin是以元素自身大小為基礎，要注意父元素與子元素的空間位置關係*/ /*此處和hover都需要設定origin，因為失去hover後，也是一個3d變換*/ transform-origin: 0 50px 0; -webkit-transform-origin: 0 50px 0; transition: transform 0.3s; -webkit-transition: -webkit-transform 0.3s; } #a3{ position: absolute; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; background-color: #435a6b; transform: translate3d(0,0,20px); -webkit-transform: translate3d(0,0,20px); } #a3::after{ content: "Link"; position: absolute; top: 100%; left: 0; background-color: gray; width: 100%; height: 100%; transform: rotateX(-90deg); -webkit-transform: rotateX(-90deg); transform-origin: top; -webkit-transform-origin: top; } #container:hover{ transform: rotateX(90deg) translate3d(0,0,0); -webkit-transform: rotateX(90deg) translate3d(0,0,0); /*origin是以元素自身大小為基礎，要注意父元素與子元素的空間位置關係*/ transform-origin: 0 50px 0; -webkit-transform-origin: 0 50px 0; } /** * 效果4 */ #a4{ overflow: hidden; } #a4>span{ display: block;/*inline不能設定margin*/ margin-top:0px; opacity: 1; transition: margin-top 0.3s; } #a4:hover>span{ margin-top: -40px; } #a4>span::after{ position: absolute; top: 100%; width: 100%; left: 0; margin-top: -10px; content: "Link"; font-weight: bolder; transition: margin-top 0.3s, opacity 0.2s; } #a4:hover>span::after{ margin-top: -40px; } </style> </head> <body> <div class="item"> <div class="title"><span>1</span></div> <a id="a1">Link</a> </div> <div class="item"> <div class="title"><span>2</span></div> <a id="a2">Link</a> </div> <div class="item"> <div class="title"><span>3</span></div> <div> <div id="container"><a id="a3">Link</a></div> </div> </div> <div class="item"> <div class="title"><span>4</span></div> <a id="a4"><span>Link</span></a> </div> </body> </html>