文章详情页
你们是如何避免transform:scale属性影响字体的?
问题描述
html结构:
<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>
当鼠标经过parent时候,这个div被放大了两倍,但是里面的字体同时也被放大了两倍,这样的效果是不需要的,你们遇到这个情况是如何处理以及解决的?
问题解答
回答1:背景边框等样式可以写到伪元素上, 在 :hover 的时候触发伪元素的状态改变.(推荐)
或者, 在 :hover 放大整个元素的同时, 缩小内部的文本节点.
相关文章:
1. atom编译器 如何格式化前端代码文件?2. angular.js - Angular1使用bootstrap轮播条carousel不能自动轮播3. css3 - 我的css用less写的,eclipse的jsp文件要修改css很麻烦,怎么解决?4. angular.js - 焦虑!angular的ng-options的问题5. python - 基于scrapy-redis的分布式爬虫运行的时候不能正常运行 遇到的问题如下截图所示6. android - 新建项目卡在Gradle:Resolvedependencies’:app:_debugCompile’7. javascript - 关于Js中 this的一道题8. 移动端页面文字垂直居中兼容性问题9. javascript - 关于在angularjs的select中遇到的问题!!10. Android Studio 中程序添加不上Xutils 3.0 jar包
排行榜