我目前正在构建一个网站,但遇到了问题transform: scale
。我有一个按钮,当用户将鼠标悬停在它上面时,会发生两件事:
- 背景沿对角线“扫过”
- 按钮标签颜色改变
- 按钮稍微变大
我已经完成了这个工作,看起来非常好,但是在实施之后3,当按钮变大时,我看到左侧有一个奇怪的间隙。
这是我的代码:点击查看演示 http://jsbin.com/nuyegazila/edit?html,css,output
HTML
<a href="#" class="button">Hover</a>
CSS
body {
text-align: center;
padding-top: 10%;
}
.button {
display: inline-block;
text-transform: uppercase;
font-size: 1.1em;
font-weight: 600;
background: transparent;
transition: all ease .25s;
border: 3px solid green;
color: green;
position: relative;
overflow: hidden;
z-index: 2;
font-family: sans-serif;
padding: 20px 35px;
text-decoration: none;
}
.button:before {
content: ' ';
transition: all ease-out .25s;
width: 200%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
z-index: -1;
transform: skewX(-45deg) translateX(-100%);
background: green;
}
.button:hover:before {
transform: translateX(0);
}
.button:hover {
color: white;
transform: scale(1.1);
}
这是我看到的差距的屏幕截图。这个问题出现在 Chrome 和 Safari 中(我没有测试 Firefox 或 IE,因为我在工作中无法下载它们)。
奇怪的缝隙截图 https://i.stack.imgur.com/tebev.png
它“只”出现在 Chrome 中,而不出现在 Firefox 中(编辑:Edge 中更糟:首先它在左侧,然后在底部......)。不确定舍入错误或其他原因是否是造成该差距的原因,但我发现替换border
by a box-shadow
改善渲染效果。
在过渡结束时仍然可以看到一个间隙,但最终消失了,所以我在上面添加了 2 个盒子阴影:hover
:新的插入并填补了之间的空白“边框/框阴影” and 内容框 faster.
代码笔:http://codepen.io/PhilippeVay/pen/oYjZzK?editors=0100 http://codepen.io/PhilippeVay/pen/oYjZzK?editors=0100
body {
text-align: center;
padding-top: 10%;
}
.button {
display: inline-block;
text-transform: uppercase;
font-size: 1.1em;
font-weight: 600;
background: transparent;
transition: all ease .25s;
box-shadow: 0 0 0 3px green; /* replaces border which caused a gap in Chr, not Fx */
color: green;
position: relative;
overflow: hidden;
z-index: 2;
font-family: sans-serif;
padding: 19px 34px;
text-decoration: none;
}
.button:before {
content: ' ';
transition: transform ease-out .25s;
width: 200%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
z-index: -1;
transform: skewX(-45deg) translateX(-100%);
background: green;
}
.button:hover:before {
transform: translateX(0);
}
.button:hover {
color: white;
box-shadow: 0 0 0 3px green, inset 0 0 0 1px green; /* improves end of transition in Chrome */
transform: scale(1.1);
}
<a href="#" class="button">Hover</a>
编辑:玩转的大小:pseudo
.button:before {
content: ' ';
transition: all ease-out .25s;
width: calc(200% + 6px);
height: calc(100% + 6px);
position: absolute;
top: -3px;
left: -3px;
transform-origin: 0 3px;
z-index: -1;
transform: skewX(-45deg) translateX(-100%);
background: green;
}
考虑到边界,但这不会改变任何事情,因为overflow: hidden
.
所以这是我的第三次尝试:通过添加一个容器(或将 A 元素作为容器)并将边框保留在子元素上,它使该间隙消失(溢出在边框周围)。
代码笔:http://codepen.io/PhilippeVay/pen/ZBbKWd http://codepen.io/PhilippeVay/pen/ZBbKWd
body {
text-align: center;
padding-top: 10%;
}
a {
display: inline-block;
overflow: hidden;
background: transparent;
transition: all ease .25s;
color: green;
position: relative;
z-index: 2;
font-family: sans-serif;
text-decoration: none;
}
a > span {
display: inline-block;
text-transform: uppercase;
font-size: 1.1em;
font-weight: 600;
border: 3px solid green;
padding: 20px 35px;
}
a:before {
content: ' ';
transition: all ease-out .25s;
width: 200%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
z-index: -1;
transform: skewX(-45deg) translateX(-100%);
background: green;
}
a:hover:before {
transform: translateX(0);
}
a:hover {
color: white;
transform: scale(1.1);
}
<a href="#" class="button"><span class="bd">Hover</span></a>
Fx 完美地过渡到最后......并通过在右侧添加 2px 来“纠正”宽度。但它已经在你的 jsbin 中可见,所以这是另一个故事(而且我猜用户会点击然后不那么烦人)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)