您的位置：首页代码CSS3实例精美的套餐价格表css3布局

精美的套餐价格表css3布局

CSS3实例 次 2019-06-08

精美的套餐价格表，采用CSS3布局精心打造，展现优雅且直观的视觉效果。通过此实例，您可以轻松掌握CSS3在表格设计中的运用，为您的网站增添专业与美感。

报错

CSS3布局实例，精美套餐价格表展示

分享一款精美的css3产品套餐价格表，使用svg制作波浪将价格和服务项进行分割布局，当鼠标滑入时波浪动画效果。适用于服务器，空间，云产品价格表css3布局实例。

[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程

查看演示

扫码下载(5.00点)

VIP会员下载(快速)

使用方法：

1、head引入css文件

<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/style.css">

2、body引入HTML代码

<div class="mainbox">
	<div class='pricing pricing-palden'>
		<div class='pricing-item'>
			<div class='pricing-deco'>
				<svg class='pricing-deco-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1'
					preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve'
					xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'>
					<path class='deco-layer deco-layer--1' d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
	c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z'
						fill='#FFFFFF' opacity='0.6'></path>
					<path class='deco-layer deco-layer--2' d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
	c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z'
						fill='#FFFFFF' opacity='0.6'></path>
					<path class='deco-layer deco-layer--3' d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
	H42.401L43.415,98.342z'
						fill='#FFFFFF' opacity='0.7'></path>
					<path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
	c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z'
						fill='#FFFFFF'></path>
				</svg>
				<div class='pricing-price'><span class='pricing-currency'>¥</span>29
					<span class='pricing-period'>/ 月</span>
				</div>
				<h3 class='pricing-title'>普通版</h3>
			</div>
			<ul class='pricing-feature-list'>
				<li class='pricing-feature'>1GB 空间</li>
				<li class='pricing-feature'>1G 内存</li>
				<li class='pricing-feature'>1G 宽带</li>
			</ul>
			<button class='pricing-action'>立即购买</button>
		</div>
		<div class='pricing-item pricing__item--featured'>
			<div class='pricing-deco'>
				<svg class='pricing-deco-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1'
					preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve'
					xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'>
					<path class='deco-layer deco-layer--1' d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
	c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z'
						fill='#FFFFFF' opacity='0.6'></path>
					<path class='deco-layer deco-layer--2' d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
	c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z'
						fill='#FFFFFF' opacity='0.6'></path>
					<path class='deco-layer deco-layer--3' d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
	H42.401L43.415,98.342z'
						fill='#FFFFFF' opacity='0.7'></path>
					<path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
	c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z'
						fill='#FFFFFF'></path>
				</svg>
				<div class='pricing-price'><span class='pricing-currency'>¥</span>59
					<span class='pricing-period'>/ 月</span>
				</div>
				<h3 class='pricing-title'>专业版</h3>
			</div>
			<ul class='pricing-feature-list'>
				<li class='pricing-feature'>5GB 空间</li>
				<li class='pricing-feature'>4G 内存</li>
				<li class='pricing-feature'>2G 宽带</li>
			</ul>
			<button class='pricing-action'>立即购买</button>
		</div>
		<div class='pricing-item'>
			<div class='pricing-deco'>
				<svg class='pricing-deco-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1'
					preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve'
					xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'>
					<path class='deco-layer deco-layer--1' d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
	c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z'
						fill='#FFFFFF' opacity='0.6'></path>
					<path class='deco-layer deco-layer--2' d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
	c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z'
						fill='#FFFFFF' opacity='0.6'></path>
					<path class='deco-layer deco-layer--3' d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
	H42.401L43.415,98.342z'
						fill='#FFFFFF' opacity='0.7'></path>
					<path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
	c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z'
						fill='#FFFFFF'></path>
				</svg>
				<div class='pricing-price'><span class='pricing-currency'>¥</span>99
					<span class='pricing-period'>/ 月</span>
				</div>
				<h3 class='pricing-title'>企业版</h3>
			</div>
			<ul class='pricing-feature-list'>
				<li class='pricing-feature'>10GB 空间</li>
				<li class='pricing-feature'>8G 内存</li>
				<li class='pricing-feature'>4G 宽带</li>
			</ul>
			<button class='pricing-action'>立即购买</button>
		</div>
	</div>
</div>

文件目录

本资源来自：代码 » CSS3实例 » 精美的套餐价格表css3布局

注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步帝国CMS模板，感谢支持！

点击这里复制本文地址以上内容由墨鱼部落格整理呈现，请务必在转载分享时注明本文地址！如对内容有疑问，请联系我们，谢谢！

彩色的碎纸屑元素动画

« 上一篇 2019年05月29日

jQuery css3爱心喜欢动画

下一篇 » 2019年05月27日

1、如非特殊说明，本站对本文提供的代码或者素材不拥有任何权利，其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。