html - 如何在此按钮代码上从右到左更改波纹效果
问题描述
嘿,我不怎么用css,我怎么能在这个按钮上产生从按钮右侧到左侧的涟漪效果。基本上改变了涟漪效应的方向。
.button {
position: relative;
background-color: #04AA6D;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
解决方案
如果您希望涟漪效果从右侧开始,只需添加right: 0;
到“.button:after”。请参见下面的示例。测试和工作。
.button {
position: relative;
background-color: #04AA6D;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #90EE90;
display: block;
right: 0; /* New code */
position: absolute;
padding-top: 300%;
padding-right: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
<button class="button">Click me</a>
推荐阅读
- python - 如何从 jinja 获取输入数据,以便将其添加到我的 python 脚本中
- python-2.7 - 如何在 Paramiko 中通过 ssh 连接发送转义序列,例如 ESC+E。有人可以发送指向列表的链接吗
- javascript - 使用 multer 上传后图像未显示在 AWS 中
- css - 我可以在我的网页中使用 css over iframe 吗?
- pandas - Python Pandas:在每一行中附加列名
- notifications - 是否可以让 Slack 仅在提及我自己的个人 @name 时才通知我?
- php - 我想设置输入日期类型的值,但没有设置
- string - 替换字符串中的特定字符(它们的列表)而不删除空格
- c++ - 谁能解释我为什么这段代码不起作用?
- spring-boot - 停止记录:Logback SiftingAppender 日志文件夹更改运行时在多租户 spring boot 应用程序中使用 MDC