我有一个有趣的问题正在尝试解决。我有这个捐赠按钮,它是使用以下 css 创建的。
#donate-button {
width: 211px;
position: absolute;
background: #FFBC2F;
color: #FFF;
left: 1140px;
right:1340px;
z-index: 30;
top: 0px;
transition:width 2s;
transition:left 2s;
transition:bottom 2s;
}
我想要的css过渡效果是捐赠按钮的橙色背景展开。它将向左扩展,朝向左下角,而按钮的顶部和右侧框架在浏览器的角落保持不变。
我尝试像这样应用以下 css 过渡悬停属性:
#donate-button:hover {
width:33%;
left:73%;
bottom: 53%;
}
捐赠按钮只调整底部框架的大小,而不是左框架及其宽度。但我怀疑我不知道如何应用转换延迟和持续时间组合,所以我不能真正得到正确的效果......
有人可以指出我如何实现这种效果/动画的正确方向吗?有任何想法吗?
如果您需要更多信息,请告诉我。