我正在尝试在鼠标移动时填充具有对 Angular 线效果的按钮(因此按钮会在鼠标所在的位置填充)
我在悬停时具有对 Angular 线填充的效果:
.demo {
text-align: center;
margin-top: 150px;
}
.mt {
margin-top: 20px;
}
.small {
width: 120px;
}
.medium {
width: 160px;
}
.large {
width: 230px;
}
.extra-large {
width: 360px;
}
.diagonal {
position: relative;
display: inline-block;
line-height: 50px;
border: 1px solid black;
color: black;
background: white;
font-weight: book;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
z-index: 1;
padding: 0px;
}
.diagonal:after {
content: "";
position: absolute;
top: 30;
left: 0;
width: 500%;
height: 1000%;
background: #F5FF35;
z-index: -1;
transform-origin: 0% 0%;
transform: translateX(calc(-130% - 0px)) translateY(10%) rotate(45deg);
transition: transform 1s;
}
.diagonal:hover::after {
transform: translateY(-100%) translateX(-50px) rotate(45deg);
direction: ltr;
}
<div class="demo">
<a class="mt small diagonal">Click me!</a><br>
<button class="mt medium diagonal">Click me!</button><br>
<button class="mt large diagonal">Click me!</button><br>
<button id="demo" class="mt extra-large diagonal">Click me!</button>
</div>
但是我无法在鼠标移动上设置它,我在另一个问题中发现了类似的内容,fiddle 。
基本上,我正在尝试将 codepen 和 jsfiddle 结合在一起
我尝试旋转 jsfiddle 中的 div,但填充效果将全部结束,而不仅仅是开始,而且它不会覆盖整个区域..
最佳答案
你可以尝试这样的事情:
$('.green').on('mousemove', function(e) {
if (e.pageX < $(this).width());
var percent = e.pageX - $(this).offset().left * 100 / $(this).width();
$(this).css({
'background': 'linear-gradient(45deg, rgba(0,0,0,1) 0%,rgba(0,0,0,1) ' + percent + '%,rgba(0,0,0,0) ' + (percent + 0.1) + '%,rgba(0,0,0,0) 100%)'
});
});
关于javascript - CSS 对 Angular 线鼠标移动填充悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42200280/