你们是如何避免transform:scale属性影响字体的?
高洛峰
高洛峰 2016-10-24 17:05:44
0
1
1168

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被放大了两倍,但是里面的字体同时也被放大了两倍,这样的效果是不需要的,你们遇到这个情况是如何处理以及解决的?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

répondre à tous(1)
三叔

背景边框等样式可以写到伪元素上, 在 :hover 的时候触发伪元素的状态改变.(推荐)

或者, 在 :hover 放大整个元素的同时, 缩小内部的文本节点.


Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal