滑动门效果的实现

本文主要是介绍滑动门效果的实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

滑动门

滑动门常常是用在导航栏中的一种效果，就例如聊天工具中的聊天框，会随着文字的增加而拉长，但是两侧的效果比如尖角并不会变形。

下面介绍两种实现思路

1，三盒子法

思路，将滑动门分成三块，左边放一个背景，右边放一个背景，中间的块用背景水平平铺
如下：

<div class="box"><div class="left"></div><div class="center">天气晚来秋</div><div class="right"></div>
</div><style>
.left{width: 36px;height: 59px;float: left;background:  url("images/qipao-left.png") 0 0 no-repeat;
}.center{height: 59px;float: left;background:  url("images/qipao-center03_03.png") 0 0 repeat-x;line-height: 59px;padding-right: 12px;/*此处是为了让文字在聊天框中看起来是水平居中的，具体操作视情况而定*/}
.right{width: 20px;height: 59px;background:  url("images/qipao-right_03.png") 0 0 no-repeat;float: left;}</style>

效果图为：

注意：当设置背景时，具体是要自己去修改图片，然后单独放进盒子里，还是使用背景定位，看自己的使用习惯。

嵌套法

• 外面那个盒子实现左侧图片效果
• 大盒子设置padding
• 里面那个盒子设置右侧图片效果
• 注意为了使盒子由文字内容撑开，转成行内块元素

这篇关于滑动门效果的实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---