我想要实现的是一个像这样的按钮
完成后，我需要在悬停时设置动画。我能找到的最接近的例子是这个codepen
https://codepen.io/Chester/pen/QPoyjN https://codepen.io/Chester/pen/QPoyjN
问题是::after在按钮上应用白色背景所需的
按钮的大小可能会根据文本长度而变化，因此像此处给出的解决方案无效：使用 CSS 仅旋转边框 https://stackoverflow.com/questions/37810361/rotate-only-the-border-using-css
这是我到目前为止所得到的，目标是保留类似的动画但删除白色背景
.background {
width: 600px;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
background-image: url("https://via.placeholder.com/600");
}
.button-file {
display: block;
position: relative;
text-align: center;
z-index: 0;
border-radius: 30px;
max-width: 363px;
max-height: 46px;
border-radius: 30px;
overflow: hidden;
padding: 1rem 2rem;
}
.button-file::before {
content: '';
position: absolute;
z-index: -2;
left: 50%;
top: 50%;
width: 400px;
height: 400px;
border-radius: 30px;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#44a0b0, #44a0b0), linear-gradient(#44a0b0, #44a0b0), linear-gradient(#eeb450, #eeb450), linear-gradient(#eeb450, #eeb450);
transform: translate(-50%, -50%) rotate(11deg);
transition: transform .7s cubic-bezier(1, 0, 0, 1);
}
.button-file:hover::before {
transform: translate(-50%, -50%) rotate(191deg);
}
.button-file::after {
content: '';
position: absolute;
z-index: -1;
left: 3px;
top: 3px;
width: calc(100% - 6px);
height: calc(100% - 6px);
background: #fff;
border-radius: 30px;
}
<div class="background">
<div class="button-file">
<a>En savoir +</a>
</div>
</div>
有了面膜你就可以做到
.button-file {
position: relative;
overflow:hidden;
color: #fff;
z-index: 0;
padding: 1rem 2rem;
}
.button-file i {
content: '';
position: absolute;
z-index: -1;
inset: 0;
border-radius: 30px;
padding: 5px; /* the thickness of the border */
/* the below will do the magic */
-webkit-mask:
linear-gradient(#fff 0 0) content-box, /* this will cover only the content area (no padding) */
linear-gradient(#fff 0 0); /* this will cover all the area */
-webkit-mask-composite: xor; /* needed for old browsers until the below is more supported */
mask-composite: exclude; /* this will exclude the first layer from the second so only the padding area will be kept visible */
}
.button-file i::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 400px;
background: linear-gradient(#44a0b0 50%, #eeb450 0);
transform: translate(-50%, -50%) rotate(45deg);
transition: transform .7s linear;
}
.button-file:hover i::before {
transform: translate(-50%, -50%) rotate(315deg);
}
body {
height: 100vh;
margin:0;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(to right, blue, red);
}
<a class="button-file">
<i></i> <!-- an extra element here -->
En savoir +
</a>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
