我无法让我的CSS 3按钮正常运行.你可以在one of my project pages查看按钮.问题是在:活动的CSS选择器生效之前还有一秒左右的延迟,使按钮略微移动并改变阴影;它之前没有这样做过.这是Sass代码:
@mixin transition($type,$time,$ease) {
-webkit-transition: $type $time $ease;
transition: $type $time $ease;
}
@mixin border-radius($length) {
border-radius: $length;
-webkit-border-radius: $length;
-moz-border-radius: $length;
}
.project-download {
color: #000300;
background-color: #00910A;
padding: 10px;
position: relative;
text-align: center;
font-size: 24px;
font-weight: bold;
@include transition(background-color,0.2s,linear);
@include border-radius(10px);
Box-shadow:
1px 1px 0 0 #014D06,2px 2px 0 0 #014D06,3px 3px 0 0 #014D06,4px 4px 0 0 #014D06,5px 5px 5px 0 #000000;
-webkit-Box-shadow:
1px 1px 0 0 #014D06,5px 5px 5px 0 #000000;
-moz-Box-shadow:
1px 1px 0 0 #014D06,5px 5px 5px 0 #000000;
&:hover { background-color: #00B00C; }
&:active {
Box-shadow: 1px 1px 5px 0 #000000;
-webkit-Box-shadow: 1px 1px 5px 0 #000000;
-moz-Box-shadow: 1px 1px 5px 0 #000000;
top: 4px;
left: 4px;
}
}
在CSS中转换为:
.project-download {
color: #000300;
background-color: #00910A;
padding: 10px;
position: relative;
text-align: center;
font-size: 24px;
font-weight: bold;
Box-shadow:
1px 1px 0 0 #014D06,5px 5px 5px 0 #000000;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
}
.project-download:active {
Box-shadow: 1px 1px 5px 0 #000000;
-webkit-Box-shadow: 1px 1px 5px 0 #000000;
-moz-Box-shadow: 1px 1px 5px 0 #000000;
top: 4px;
left: 4px;
}
.project-download:hover { background-color: #00B00C; }
我搜索谷歌有点没运气.有任何想法吗?
编辑:
我通过使用这个JavaScript函数解决了Clicky造成的问题:
function removeLinkListeners()
{
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++)
{
if (links[i].classList.contains('project-download-link'))
{
links[i].removeEventListener('mousedown',clicky.outbound);
}
}
}
并将初始化脚本更改为:
最佳答案
原文链接:https://www.f2er.com/html/425769.html