html - 曲线形状的 div 边框
问题描述
我正在尝试在凸形中实现 div 边框,并且在悬停时它应该是正常的方形。我已经在底部添加了我想在顶部添加我之前尝试使用但无法达到结果的相同。谁能帮助我下面是我到目前为止所做的代码。任何帮助将不胜感激
* {
box-sizing: border-box;
}
.services {
position: relative;
width: 500px;
height: 420px;
margin: 100px;
background-color: #cccccc;
transition: all 0.2s ease;
animation: down-bump 0.4s ease;
}
.services:before {
}
.serv_section {
top: 83%;
position: relative;
overflow: hidden;
padding: 50px 0 0;
}
.serv_inner {
position: relative;
background: #fff;
height: 25px;
}
.serv_inner:after {
box-shadow: 0 0 0 80px #fff;
border-radius: 100%;
position: absolute;
height: 150px;
content: '';
right: -20%;
left: -20%;
top: -150px;
transition: all 0.4s ease-in-out;
}
.services:hover .serv_inner:after {
top: -120px;
}
.serv_inner:before {
/* box-shadow: 0 0 0 80px #fff;
border-radius: 100%;
position: absolute;
height: 150px;
content: '';
right: -20%;
left: -20%;
top: 130px;
transition: all 0.4s ease-in-out; */
}
span.image_caption {
position: absolute;
color: red;
padding: 10px 20px;
font-size: 30px;
z-index: 10;
animation-duration: 2.5s;
animation-fill-mode: both;
}
span.image_caption p {
font-size: 32px;
font-weight: 900;
font-family: 'Dancing Script', cursive;
color: cadetblue;
}
<div class='services'>
<div class="serv_section">
<div class="serv_inner">
</div>
</div>
</div>
解决方案
您可以使用之前和之后的元素来制作曲线,悬停时隐藏元素后面的伪元素并像这样删除曲线:
.services {
position: relative;
width: 100px;
height: 60px;
margin: 100px;
background-color: #cccccc;
z-index: 0;
}
.services:hover:before{
top: 0px;
border-radius: 0;
}
.services:hover:after{
bottom: 0px;
border-radius: 0;
}
.services:before, .services:after{
content: ' ';
position: absolute;
width: 100%;
height: 40px;
background-color: #cccccc;
border-radius: 50%;
z-index: -1;
transition: all .4s;
}
.services:before {
top: -20px;
}
.services:after {
bottom: -20px;
}
<div class='services'>
</div>
推荐阅读
- cakephp - CakePHP 4 如何将日期字段 created_at 分配给 created
- java - 如何让java读取用户的文本字段并根据用户给出另一个变量?
- python - 为什么我不能通过 IDLE 导入模块(Python 3.8 64 位)
- android - 如何将图像添加到项目列表中?
- bash - 如何使用 bash 着色输出文件?
- javascript - vuejs 无法在导航栏中获取 vuex 值
- wordpress - Wordpress - 发送有关发布元值更改的电子邮件
- c# - 不支持给定的路径格式;流作家
- wordpress - wordpress网站首页出现404错误
- angular - Accessibilty - 在 Angular 中更改路线时失去焦点