文章詳情頁
你們是如何避免transform:scale屬性影響字體的?
瀏覽:116日期:2024-05-28 10:26:35
問題描述
html結(jié)構(gòu):
<div class='parent'> <span>這是一些字體</span> </div><style>.parent{ box-shadow:0px 0px 10px blue; border-radius:5px; padding:20px 40px; display: inline-block; margin-top:200px; margin-left:800px; font-size:18px;}.parent:hover{ transform-origin:center; transition:all 1s ease; transform: scale(2);}</style>
當鼠標經(jīng)過parent時候,這個div被放大了兩倍,但是里面的字體同時也被放大了兩倍,這樣的效果是不需要的,你們遇到這個情況是如何處理以及解決的?
問題解答
回答1:背景邊框等樣式可以寫到偽元素上, 在 :hover 的時候觸發(fā)偽元素的狀態(tài)改變.(推薦)
或者, 在 :hover 放大整個元素的同時, 縮小內(nèi)部的文本節(jié)點.
相關(guān)文章:
1. 前端 - ng-view不能加載進模板2. docker容器呢SSH為什么連不通呢?3. debian - docker依賴的aufs-tools源碼哪里可以找到???4. docker網(wǎng)絡端口映射,沒有方便點的操作方法么?5. python - from ..xxxx import xxxx到底是什么意思呢?6. 關(guān)docker hub上有些鏡像的tag被標記““This image has vulnerabilities””7. nignx - docker內(nèi)nginx 80端口被占用8. android clickablespan獲取選中內(nèi)容9. angular.js - angularJS在Android WebView中無法正常調(diào)后臺接口10. 請教各位大佬,瀏覽器點 提交實例為什么沒有反應
排行榜

熱門標簽