再css2中，你这个图是没有简便的，设置个盒子，让背景色设置为你图的颜色，然后用ps将你图的上部分就是圆角部分 切割 作为01jpg，下部分为 02jpg。然后通过设置北京的方式 让02jpg 设置为 background:url(02jpg) no-repeat left bottom; 这样底部就出现圆角了，上半部分，设置h1的背景即可 和 下半部分是一样的。
如果圆角是渐变的，可以切下圆角的右上部分和右下部分 做合理的设计 实现滑动技术，也就是滑动门技术。x轴和y轴的动画分开写，然后两个速度不一样就会形成曲线运动，具体曲线可以通过计算，随便写了个也可以直接给对应关键帧的x，y值
@keyframes bimg1 {
0% {top: 0;}
100% {top: 200px;}
}
@keyframes bimg2 {
0% {left: 0;}
100% {left: 200px;}
}
#item {
animation: bimg1 2s infinite cubic-bezier(0,0,1,1),bimg2 2s infinite cubic-bezier(0,1,0,1);
width: 10px;
height: 10px;
position: absolute;
background: red;
}
这个好像很难用css做到, 不过或许可以考虑用svg做, 也可以用border-radius和背景颜色(多个元素嵌套排版)做, 不过做出的效果, 和这个区别有点大, 下面是一个例子
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
dlxz{
background-color: #ff6000;
overflow: hidden;
margin: 0;
padding: 0;
}
dlxz dt,dlxz dd{
float:left;
height: 40px;
line-height: 40px;
margin: 0;
padding: 0;
}
dlxz dt{
background-color: #fff;
overflow: hidden;
}
dlxz dt>span{
width:15px;
float: left;
height: 100%;
display: block;
background: #fff;
}
dlxz dt>span>span{
width:100%;
height: 100%;
display: block;
background: #ff6000;
border-top-left-radius: 15px;
}
dlxz dt>spanleft{
width:60px;
background-color: #ff6000;
}
dlxz dt>spanleft>span{
background: #fff;
border-bottom:2px solid #ff6000;
border-bottom-right-radius: 30px;
border-top-left-radius: 0;
height: 38px;
}
</style>
</head>
<dl class="xz">
<dt>
<span class="left"><span></span></span><span class="right"><span></span></span>
</dt>
<dd>测试按钮</dd>
</dl>
<body>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）