像这种弧形,用纯html和css很难写,但是用svg就简单多了。
可以用作图工具画出一个弧形,然后导成svg格式。在页面中,下面的白块就是div+svg构成
mixin svgCard(...cont)
each item in cont
.item
svg.svg(width="480px" height="132px" viewBox="0 0 480 132")
path(d="M0 31c109.323 19.23 189.323 28.845 240 28.845 50.677 0 130.677-9.615 240-28.845v100H0V31z" fill="white")
.detail
.txt!= item[0] .content
+svgCard(
['百年严谨的学风传统'],
['全球*大学的主要输送处']
(这里用的是pug模板)
两种弧度的切换,主要是在hover的时候修改path值即可(注意两个svg大小一样)
$('.content .item').hover(function(){
$(this).find('path').attr('d','M0 31.398C109.323 10.466 189.323 0 240 0c50.677 0 130.677 10.466 240 31.398V131.52H0V31.398z')
},function(){
$(this).find('path').attr('d','M0 31c109.323 19.23 189.323 28.845 240 28.845 50.677 0 130.677-9.615 240-28.845v100H0V31z') })
如果不写过渡css,这两种弧形的切换会比较僵硬。(注意过渡css是写在path上而不是svg上)
path,.txt{
transition: all 500ms ease;
} .item:hover{
path{
transition: all 500ms ease;
}
.txt{
transition: all 500ms ease;
transform: translateY(-15px);
}
}