這篇文章主要介紹CSS實現(xiàn)放大縮小關閉按鈕的方法,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)公司專注于沁源網(wǎng)站建設服務及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供沁源營銷型網(wǎng)站建設,沁源網(wǎng)站制作、沁源網(wǎng)頁設計、沁源網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務,打造沁源網(wǎng)絡公司原創(chuàng)品牌,更為您提供沁源網(wǎng)站排名全網(wǎng)營銷落地服務。這種效果最常見是在我們的瀏覽器頁面上,先給大家展示效果圖:
如上圖所示,使用CSS 繪制上述三個按鈕:
<template> <div class="windowAction"> <button class="min">縮小</button> <button class="fullpage">放大</button> <button class="close">關閉</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實現(xiàn)放大縮小關閉按鈕的方法”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
分享題目:CSS實現(xiàn)放大縮小關閉按鈕的方法-創(chuàng)新互聯(lián)
標題鏈接:http://bm7419.com/article30/dsdjso.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站導航、網(wǎng)站策劃、手機網(wǎng)站建設、云服務器、品牌網(wǎng)站制作、Google
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容