我尝试使用css-drop shadow和css过渡创建一组3d按钮效果。我把一切都搞定了,看起来不错,但是当点击按钮时,阴影会移动到按钮,我希望它留在一个地方,而且只能移动按钮。
这是一个codepen演示现在看起来如何。
`http://codepen.io/andornagy/pen/ZYRRar`
我尝试更改转换的时间,但无法使其正常工作。
答案 0 :(得分:2)
你这里有问题
box-shadow: 1px 0px 0px #1976D2,0px 1px 0px #1976D2,
2px 1px 0px #1976D2,1px 2px 0px #1976D2;
改为:
box-shadow: 0px 0px 0px #1976D2,0px 0px 0px #1976D2,
0px 0px 0px #1976D2,0px 0px 0px #1976D2;
button {
/* */
padding:35px;
margin: 0;
width:350px;
/* Font Styling */
font-size:30px;
font-weight:bold;
color:#FFF;
}
button:active {
outline:none;
}
.rightBottom {
transition: margin-top 0.3s ease,
margin-left 0.3s ease,
box-shadow 0.3s ease;
background:#03A9F4;
border: solid 1px #1976D2;
box-shadow: 1px 0px 0px #1976D2,0px 1px 0px #1976D2,
2px 1px 0px #1976D2,1px 2px 0px #1976D2,
3px 2px 0px #1976D2,2px 3px 0px #1976D2,
4px 3px 0px #1976D2,3px 4px 0px #1976D2,
5px 4px 0px #1976D2,4px 5px 0px #1976D2,
6px 5px 0px #1976D2,5px 6px 0px #1976D2,
7px 6px 0px #1976D2,6px 7px 0px #1976D2,
8px 7px 0px #1976D2,7px 8px 0px #1976D2,
9px 8px 0px #1976D2,8px 9px 0px #1976D2;
}
.rightBottom:active{
transition: margin-top 0.3s ease,
margin-left 0.3s ease,
box-shadow 0.3s ease;
margin-left:10px;
margin-top:10px;
box-shadow: 0px 0px 0px #1976D2,0px 0px 0px #1976D2,
0px 0px 0px #1976D2,0px 0px 0px #1976D2;
}
<button class="rightBottom">I am a Button!</button>
答案 1 :(得分:0)
您可以在下面使用CSS。 CSS
.down {
-webkit-transition: margin-top 0.3s ease, box-shadow 0.3s ease ;
-moz-transition: margin-top 0.3s ease, box-shadow 0.3s ease;
transition: margin-top 0.3s ease, box-shadow 0.3s ease;
background:#1abc9c;
border: solid 1px #16a085;
-webkit-box-shadow: 0px 9px 0px #16a085;
-moz-box-shadow: 0px 9px 0px #16a085;
box-shadow: 0px 9px 0px #16a085;
}
.down:active{
-webkit-transition: margin-top 0.2s ease, box-shadow 0.2s ease;
-moz-transition: margin-top 0.2s ease, box-shadow 0.2s ease;
transition: margin-top 0.2s ease, box-shadow 0.2s ease;
margin-top:9px;
-webkit-box-shadow: 0px 0px 0px #16a085;
-moz-box-shadow: 0px 0px 0px #16a085;
box-shadow: 0px 0px 0px #16a085;
}