我使用草图创建了一个具有以下形状的矩形.
当我悬停它时,我需要动画和休息为下面的形状.
有没有办法我可以使用css动画它只从凹到凸.
任何帮助,将不胜感激.我也很适合svg解决方案.
这是svg 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,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,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,/*convexe*/ radial-gradient(70% 50px at 50% 50px,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,#000 80.5%) bottom,/*convexe*/ radial-gradient(70% 50px at 50% 50px,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,#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,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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。