css - 从边框向外创建 CSS 脉冲效果
问题描述
我开始在这里创建具有我想要的效果的代码笔:https ://codepen.io/oli_js/pen/KKPGZLm?editors=1100
但是,这种脉冲效果是从中心点向外辐射的,但我希望内圈是透明的,并且效果只是从边界向外辐射。
有谁知道任何神奇的 CSS 魔法可以做到这一点?!
.pulse {
border-radius: 50px;
height: 80px;
left: 50%;
letter-spacing: 0.05em;
line-height: 50px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 50%;
width: 80px;
}
.pulse:after {
-webkit-animation: pulse 2s infinite linear;
background: red;
border-radius: 50px;
content: '';
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
.button {
background: transparent;
border-radius: 100% 100%;
width: 40px;
height: 40px;
left: 50%;
border:2px solid red;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
@-webkit-keyframes pulse{
0% {transform:scale(0.5);
opacity:0;}
33% {transform:scale(0.8);
opacity:1;}
100% {transform:scale(1);
opacity:0;}
}
<div class="pulse">
<div class="button"> </div>
</div>
解决方案
你也可以像这样使用阴影效果来做到这一点..
.ripple{
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
border:2px red solid;
animation: pulse 2s infinite;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(255,0,0, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0);
}
}
<div class="ripple"></div>
推荐阅读
- c# - 从 Selenium docker 容器访问 IIS 本地主机
- javascript - 如何使用文件阅读器从 Angular 中的文件制作 SHA1?
- python - 如何将 python post 请求转换为 Postman POST 请求
- powershell - ComboBox.SelectedItem 为空
- php - 从图像标题获取 WordPress 库图像描述
- python - 如何使用pdfrw在reportlab中设置图像的位置?
- android - 如何修复:Android 设备上的“QNetworkReply::SslHandshakeFailedError”
- mongodb - 将嵌套的 JSON 文档导入 Elasticsearch 并使其可搜索
- typescript - TypeScript 为“as X”定义接口
- c++ - 如何使检查字母(上和下)和()+ - * /的O(n)函数进行尾递归?