如何将凹形矩形动画化为凸形
How to animate concave rectangle to convex
我使用草图创建了一个如下形状的矩形。
当我悬停它时,我需要像下面的形状一样动画和休息。
有没有一种方法可以使用 css 仅从凹到凸来制作动画。
如有任何帮助,我们将不胜感激。我也很喜欢 svg 解决方案。
这是 svg 的 link 到 fiddle。
<svg width="641px" height="313px" viewBox="0 0 641 313" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Concave</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M0,252.683363 C104.477953,274.894454 210.133596,286 316.966929,286 C423.800262,286 531.811286,274.894454 641,252.683363 L641,565 L0,565 L0,252.683363 Z" id="path-1"></path>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="iteration-3" transform="translate(-752.000000, -3299.000000)">
<g id="case--study" transform="translate(0.000000, 2766.000000)">
<g transform="translate(50.000000, 100.000000)" id="case--study--1-copy">
<g transform="translate(702.000000, 181.000000)">
<use id="bottom" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</g>
</svg>
对于 CSS 唯一的解决方案,我会考虑径向渐变和一些背景动画:
.box {
height:50px;
width:600px;
padding-top:50px;
background:
/*concave*/
radial-gradient(410px 50px at 50% 0,transparent, 80%, #000 80.5%) center,
/*convexe*/
radial-gradient(410px 50px at 50% 50px,#000, 80%, transparent 80.5%)center,
linear-gradient(#000,#000) content-box;
background-size:100% 100%,100% 0px,auto;
background-repeat:no-repeat;
transition:1s all;
}
.box:hover {
background-size:100% 0,100% 100%,auto;
}
<div class="box"></div>
您也可以将其用于全宽矩形:
.box {
height:50px;
padding-top:50px;
background:
/*concave*/
radial-gradient(70% 50px at 50% 0,transparent, 80%, #000 80.5%) center,
/*convexe*/
radial-gradient(70% 50px at 50% 50px,#000, 80%, transparent 80.5%)center,
linear-gradient(#000,#000) content-box;
background-size:100% 100%,100% 0px,auto;
background-repeat:no-repeat;
transition:1s all;
}
.box:hover {
background-size:100% 0,100% 100%,auto;
}
<div class="box"></div>
如果你有更大的高度或动态高度,最好考虑一个伪元素,这样效果就不会受到高度变化的影响:
.box {
height: 80vh;
position: relative;
padding-top: 50px;
background: #000 content-box;
}
.box::before {
content: "";
position: absolute;
top: 1px;
left: 0;
right: 0;
padding: inherit;
background:
/*concave*/
radial-gradient(70% 50px at 50% 0, transparent, 80%, #000 80.5%) bottom,
/*convexe*/
radial-gradient(70% 50px at 50% 50px, #000, 80%, transparent 80.5%)bottom;
background-size: 100% 100%, 100% 0px;
background-repeat: no-repeat;
transition: 1s all;
}
.box:hover::before {
background-size: 100% 0, 100% 100%;
}
<div class="box"></div>
更新
您还可以像下面这样调整效果:
.box {
height: 80vh;
position: relative;
padding-top: 100px;
background: #000 content-box;
}
/*concave*/
.box::before {
content: "";
position: absolute;
top: 50px;
left: 0;
right: 0;
height: 51px;
background:
radial-gradient(70% 50px at 50% 0, transparent, 80%, #000 80.5%) top center;
background-size: 100% 200%;
background-repeat: no-repeat;
transition: 0.5s all 0.4s ease-out;
}
/*convexe*/
.box::after {
content: "";
position: absolute;
top: 1px;
left: 0;
right: 0;
height: 51px;
background:
radial-gradient(70% 50px at 50% 50px, #000, 80%, transparent 80.5%)bottom center;
background-size: 200% 0%;
background-repeat: no-repeat;
transition: 0.5s all ease-in;
}
.box:hover::before {
background-position: bottom center;
background-size: 200% 200%;
transition: 0.5s all ease-in;
}
.box:hover::after {
background-size: 100% 100%;
transition: 0.5s all 0.4s ease-out;
}
<div class="box"></div>
一种解决方案是使用 SVG 创建形状,然后通过 CSS:
转换路径
body {
width: 40vw;
display: block;
margin: 0 auto;
}
.path {
transition: d 2s ease-in-out;
}
.path:hover{
d: path('M0 20 Q 50 0 100 20 L100 60 L0 60 Z');
}
<svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
<path class="path" d="M0 20 Q 50 40 100 20 L100 60 L0 60 Z" fill="black"/>
</svg>
<p>hover over the shape</p>
我使用草图创建了一个如下形状的矩形。
当我悬停它时,我需要像下面的形状一样动画和休息。
有没有一种方法可以使用 css 仅从凹到凸来制作动画。
如有任何帮助,我们将不胜感激。我也很喜欢 svg 解决方案。
这是 svg 的 link 到 fiddle。
<svg width="641px" height="313px" viewBox="0 0 641 313" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Concave</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M0,252.683363 C104.477953,274.894454 210.133596,286 316.966929,286 C423.800262,286 531.811286,274.894454 641,252.683363 L641,565 L0,565 L0,252.683363 Z" id="path-1"></path>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="iteration-3" transform="translate(-752.000000, -3299.000000)">
<g id="case--study" transform="translate(0.000000, 2766.000000)">
<g transform="translate(50.000000, 100.000000)" id="case--study--1-copy">
<g transform="translate(702.000000, 181.000000)">
<use id="bottom" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</g>
</svg>
对于 CSS 唯一的解决方案,我会考虑径向渐变和一些背景动画:
.box {
height:50px;
width:600px;
padding-top:50px;
background:
/*concave*/
radial-gradient(410px 50px at 50% 0,transparent, 80%, #000 80.5%) center,
/*convexe*/
radial-gradient(410px 50px at 50% 50px,#000, 80%, transparent 80.5%)center,
linear-gradient(#000,#000) content-box;
background-size:100% 100%,100% 0px,auto;
background-repeat:no-repeat;
transition:1s all;
}
.box:hover {
background-size:100% 0,100% 100%,auto;
}
<div class="box"></div>
您也可以将其用于全宽矩形:
.box {
height:50px;
padding-top:50px;
background:
/*concave*/
radial-gradient(70% 50px at 50% 0,transparent, 80%, #000 80.5%) center,
/*convexe*/
radial-gradient(70% 50px at 50% 50px,#000, 80%, transparent 80.5%)center,
linear-gradient(#000,#000) content-box;
background-size:100% 100%,100% 0px,auto;
background-repeat:no-repeat;
transition:1s all;
}
.box:hover {
background-size:100% 0,100% 100%,auto;
}
<div class="box"></div>
如果你有更大的高度或动态高度,最好考虑一个伪元素,这样效果就不会受到高度变化的影响:
.box {
height: 80vh;
position: relative;
padding-top: 50px;
background: #000 content-box;
}
.box::before {
content: "";
position: absolute;
top: 1px;
left: 0;
right: 0;
padding: inherit;
background:
/*concave*/
radial-gradient(70% 50px at 50% 0, transparent, 80%, #000 80.5%) bottom,
/*convexe*/
radial-gradient(70% 50px at 50% 50px, #000, 80%, transparent 80.5%)bottom;
background-size: 100% 100%, 100% 0px;
background-repeat: no-repeat;
transition: 1s all;
}
.box:hover::before {
background-size: 100% 0, 100% 100%;
}
<div class="box"></div>
更新
您还可以像下面这样调整效果:
.box {
height: 80vh;
position: relative;
padding-top: 100px;
background: #000 content-box;
}
/*concave*/
.box::before {
content: "";
position: absolute;
top: 50px;
left: 0;
right: 0;
height: 51px;
background:
radial-gradient(70% 50px at 50% 0, transparent, 80%, #000 80.5%) top center;
background-size: 100% 200%;
background-repeat: no-repeat;
transition: 0.5s all 0.4s ease-out;
}
/*convexe*/
.box::after {
content: "";
position: absolute;
top: 1px;
left: 0;
right: 0;
height: 51px;
background:
radial-gradient(70% 50px at 50% 50px, #000, 80%, transparent 80.5%)bottom center;
background-size: 200% 0%;
background-repeat: no-repeat;
transition: 0.5s all ease-in;
}
.box:hover::before {
background-position: bottom center;
background-size: 200% 200%;
transition: 0.5s all ease-in;
}
.box:hover::after {
background-size: 100% 100%;
transition: 0.5s all 0.4s ease-out;
}
<div class="box"></div>
一种解决方案是使用 SVG 创建形状,然后通过 CSS:
转换路径body {
width: 40vw;
display: block;
margin: 0 auto;
}
.path {
transition: d 2s ease-in-out;
}
.path:hover{
d: path('M0 20 Q 50 0 100 20 L100 60 L0 60 Z');
}
<svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
<path class="path" d="M0 20 Q 50 40 100 20 L100 60 L0 60 Z" fill="black"/>
</svg>
<p>hover over the shape</p>