# 前言 > Hello！小夥伴！ > 首先非常感謝您閱讀海轟的文章，倘若文中有錯誤的地方，歡迎您指出～ > 哈哈 自我介紹一下 > 暱稱：海轟 > 標籤：程式猿一隻｜C++選手｜學生 > 簡介：因C語言結識程式設計，隨後轉入計算機專業，有幸拿過國獎、省獎等，已保研。目前正在學習C++/Linux（真的真的太難了～） > 學習經驗：紮實基礎 + 多做筆記 + 多敲程式碼 + 多思考 + 學好英語！ > 日常分享：微信公眾號【海轟Pro】記錄生活、學習點滴，分享一些原始碼或者學習資料，歡迎關注～ # 效果展示  # 思路 上面效果可以概括為： - 滑鼠未停留時：藍色（漸變）背景，正中文字為白色，button四角做了圓角處理 - 滑鼠停留時：button背景變成白色，文字變為藍色，同時右上方、左下角同時延伸兩條互相垂直的線條 根據效果圖可以得出實現的一些思路： - 背景、文字的顏色變化使用hover就可以實現 - 右上角的兩條線可以使用button的::before/::after偽類，結合transition，當滑鼠停留時，實現兩條線的延展 - 中間的文字使用span標籤，需要使用span標籤的偽類 - 左下角的兩條線利用span的偽類::before/::after實現，原理類似右上角 # Demo程式碼 HTML ```html Haihong Pro ``` CSS ```css html,body{ margin: 0; height: 100%; } body{ display: flex; justify-content: center; align-items: center; } .btn{ width: 390px; height: 120px; color: #fff; background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%); font-family: 'Lato', sans-serif; font-weight: 500; border-radius: 10px; box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1); transition: all 0.3s ease; cursor: pointer; border: none; position: relative; line-height: 120px; padding: 0; } .btn span{ position: relative; display: block; width: 100%; height: 100%; font-size: 48px; } .btn::before,.btn::after{ position:absolute; content: ''; top: 0; right: 0; background: rgba(2, 126, 251, 1); transition: all 0.3s ease; } .btn::before{ width: 0; height: 2px; } .btn::after{ height: 0; width: 2px; } .btn span::before, .btn span::after{ position:absolute; content: ''; bottom: 0; left: 0; background: rgba(2, 126, 251, 1); transition: all 0.3s ease; } .btn span::before{ width: 0; height: 2px; } .btn span::after{ height: 0; width: 2px; } .btn:hover{ background: transparent; color: rgba(2, 126, 251, 1); } .btn:hover::before{ width: 100%; } .btn:hover::after{ height: 100%; } .btn span:hover::before{ width: 100%; } .btn span:hover::after{ height: 100%; } ``` # 疑點詳解 **怎麼實現兩條線的延展的呢？** 首先，使用::before和::after偽類，在button的前後新增兩個偽元素 一個width=0，height=2px；另一個height=0，width=2px    這裡便於理解和觀察，我們將這兩個元素顯示出來 修改css程式碼：將before改為紅色，便於觀察，同時width、height都改為20px ```css .btn::before,.btn::after{ position:absolute; content: ''; top: 0; right: 0; background: red; transition: all 0.3s ease; } .btn::before{ width: 20px; height: 20px; } ``` 現在就可以觀察到before的具體位置了   利用CSS 中的 transition 屬性，在滑鼠停留（hover）在其上時，將其寬度修改為100%， 就可以實現延展效果了 ```css // 滑鼠停留在上方時，寬度變成100% .btn:hover::before{ width: 100%; } ```  不瞭解css transition的小夥伴可以檢視： > transition簡介：https://www.w3school.com.cn/cssref/pr_transition.asp 一個before實現寬度的延伸，另一個after就實現高度的延伸，所以一個元素的兩個偽元素就可以實現兩條線的延展效果 同樣，左下角的延展就是利用span的::before和::after偽元素了 # 踩坑 1.父元素button沒有設定padding=0，會出現四條線沒有完美閉合的情況  2. button元素中應該設定position: relative，如果沒有會出現：  原因：因為button的before和after偽元素中的 **position:absolute;** 所以必須設定button **position: relative**， position中absolute是指：生成**絕對定位**的元素，**相對於 static 定位以外的第一個父元素進行定位**。 如果不宣告button的position為relative，那麼此時button::before/after就會認為它的父元素是瀏覽器，那麼絕對定位也就是根據瀏覽器而定了。 # 註釋版程式碼 ```css html,body{ margin: 0; height: 100%; } body{ /* 元素居於正中 */ display: flex; justify-content: center; align-items: center; } .btn{ width: 390px; height: 120px; /* 文字顏色為白色 */ color: #fff; /* button背景色為漸變藍色 */ background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%); /* 字型設定 */ font-family: 'Lato', sans-serif; font-weight: 500; /* 圓角處理 */ border-radius: 10px; /* button陰影設定 */ box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1); /* 設定過渡屬性 所以元素過渡 持續時間：0.3s 速度曲線型別：ease*/ transition: all 0.3s ease; /* 滑鼠停留時，變為小手 */ cursor: pointer; border: none; position: relative; /* 行高 */ line-height: 120px; padding: 0; } .btn span{ /* 相對定位 */ position: relative; /* 塊級元素 */ display: block; width: 100%; height: 100%; font-size: 48px; } .btn::before,.btn::after{ /* 絕對定位 */ position:absolute; /* content必須有 不然不顯示 */ content: ''; /* 定位右上角 */ top: 0; right: 0; /* 背景色：藍色 */ background: rgba(2, 126, 251, 1); transition: all 0.3s ease; } .btn::before{ /* 初始化 */ width: 0; height: 2px; } .btn::after{ height: 0; width: 2px; } .btn span::before, .btn span::after{ /* 絕對定位 */ position:absolute; content: ''; /* 定位左下角 */ bottom: 0; left: 0; background: rgba(2, 126, 251, 1); transition: all 0.3s ease; } .btn span::before{ width: 0; height: 2px; } .btn span::after{ height: 0; width: 2px; } .btn:hover{ /* 背景透明 */ background: transparent; /* 字型色變為：藍色 */ color: rgba(2, 126, 251, 1); } .btn:hover::before{ /* 寬度過渡為100% */ width: 100%; } .btn:hover::after{ /* 高度過渡為100% */ height: 100%; } .btn span:hover::before{ width: 100%; } .btn span:hover::after{ height: 100%; } ``` # 結語 學習來源： > https://codepen.io/yuhomyan/pen/OJMejWJ css只會一點點，學習之餘從喜歡看一些大神級別的css效果展示，根據原始碼一點一點學習知識點，文中有不對的地方，歡迎指出～ ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210327200736261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIyNTE4Mg==,size_16,color_FFFFFF,t_70#pic_