代码之家 › 专栏 › 技术社区 › Husna

曲线形状的Div边框

css3 html5

0

Husna · 技术社区 · 6 年前

我试图实现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>

2 回复 | 直到 6 年前

1

0

RWAM 6 年前

如果我理解正确的话,您可以通过简单地使用不同的值来实现这一点 边界半径 https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

div {
  background: grey;
  
  height: 100px;
  width: 200px;
  
  transition: border-radius .15s ease-out;
}

/* border-radius on default state */
div {
  border: 4px solid black;
  border-radius: 50%/20px;
}

div:hover {
  border-radius: 0;
}

<div></div>

2

1

ssten 6 年前

可以使用before和after元素生成曲线,悬停时将psuedo元素隐藏在元素后面并按以下方式移除曲线:

.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>