這篇文章主要介紹CSS實(shí)現(xiàn)放大縮小關(guān)閉按鈕的方法,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項(xiàng)目有:域名注冊、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、沙坪壩網(wǎng)站維護(hù)、網(wǎng)站推廣。
這種效果最常見是在我們的瀏覽器頁面上,先給大家展示效果圖:
如上圖所示,使用CSS 繪制上述三個按鈕:
<template> <div class="windowAction"> <button class="min">縮小</button> <button class="fullpage">放大</button> <button class="close">關(guān)閉</button> </div> </template> <script> export default { data() { return { flag_fullpageWebView: 1 }; } }; </script> <style lang="scss" scoped> .windowAction { margin-top: -5px; -webkit-app-region: no-drag; min-width: 70px; text-align: right; button { &:hover { color: #a8aabd; } } .min { width: 14px; height: 14px; background-color: transparent; font-size: 0; margin-right: 18px; position: relative; color: #878896; &:after { content: ""; width: 100%; position: absolute; left: 0; bottom: 0; border-bottom: 2px solid; } } .fullpage { width: 16px; height: 16px; color: #878896; border: 2px solid; background-color: transparent; font-size: 0; margin-right: 18px; } .close { width: 18px; height: 18px; font-size: 0; background-color: transparent; position: relative; color: #878896; transform: rotate(45deg) translate(-2px, 2px); &:before, &:after { content: ""; position: absolute; } &:before { width: 100%; left: 0; top: 50%; transform: translateY(-50%); border-top: 2px solid; } &:after { height: 100%; left: 50%; top: 0; transform: translateX(-50%); border-left: 2px solid; } } } </style>
以上是“CSS實(shí)現(xiàn)放大縮小關(guān)閉按鈕的方法”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)頁名稱:CSS實(shí)現(xiàn)放大縮小關(guān)閉按鈕的方法
網(wǎng)站鏈接:http://muchs.cn/article4/pihcie.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機(jī)、自適應(yīng)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、App開發(fā)、商城網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)