当前位置 : 腾讯分分彩 > 代码 > html5 css3 > css3实例 > css3产品应用功能卡片布局代码

原创商用 css3产品应用功能卡片布局代码

div基于css3 transform属性制作云产品功能应用单排响应式的图片卡片布局,通过鼠标悬停卡片文字图标切换效果代码。
[声明]该素材属于原创商用,未经允许请勿转载,内有版权说明,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<!--主要样式-->
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

<!--如不要字体标可以删除此css及字体↓,文中用到的也就一个小箭头-->
<link rel="stylesheet" type="text/css" href="statics/css/icon.css" />

2、body引入HTML代码

<div class="section section-mall">
	<div class="section-title">
		<h1>严选商城 为你臻选云上优品</h1>
		<h2>九大严选馆 直触需求 上云无忧</h2>
	</div>
	<div class="section-wrapper">
		<div class="mall-app">
			<ul>
				<li>
					<div class="mall-app-card" target="_blank">
						<div class="mall-app-card-bg" style="background-image: url(statics/images/homepage-mall-enterprise-bg.jpg)">
						</div>
						<div class="mall-app-card-top">
							<i style="background-image: url(statics/images/homepage-mall-enterprise-logo.svg)"></i>
							<h2>企业上云</h2>
							<p>汇聚业界精品应用,实现企业轻资产敏捷创新</p>
						</div>
						<div class="mall-app-card-bottom">
							<ul>
								<li>
									<a href="#" target="_blank">企业BI</a>
								</li>
								<li>
									<a href="#" target="_blank">模板建站</a>
								</li>
								<li>
									<a href="#" target="_blank">智能客服</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li>
					<div class="mall-app-card" target="_blank">
						<div class="mall-app-card-bg" style="background-image: url(statics/images/homepage-mall-solution-bg.jpg)">
						</div>
						<div class="mall-app-card-top">
							<i style="background-image: url(statics/images/homepage-mall-solution-logo.svg)"></i>
							<h2>智慧城市</h2>
							<p>深耕垂直行业,支持个性化定制,一站式解决客户诉求</p>
						</div>
						<div class="mall-app-card-bottom">
							<ul>
								<li>
									<a href="#" target="_blank">智慧教育大数据云平台</a>
								</li>
								<li>
									<a href="#" target="_blank">双创实践云平台</a>
								</li>
								<li>
									<a href="#" target="_blank">中小学智慧校园解决方案</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li>
					<div class="mall-app-card" target="_blank">
						<div class="mall-app-card-bg" style="background-image: url(statics/images/homepage-mall-video-bg.jpg)">
						</div>
						<div class="mall-app-card-top">
							<i style="background-image: url(statics/images/homepage-mall-video-logo.svg)"></i>
							<h2>视频</h2>
							<p>提供直播、转播、转码等视频能力,助力高效搭建视频业务</p>
						</div>
						<div class="mall-app-card-bottom">
							<ul>
								<li>
									<a href="#" target="_blank">云直播</a>
								</li>
								<li>
									<a href="#" target="_blank">云点播</a>
								</li>
								<li>
									<a href="#" target="_blank">直播转码</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li>
					<div class="mall-app-card" target="_blank">
						<div class="mall-app-card-bg" style="background-image: url(statics/images/homepage-mall-station-bg.jpg)">
						</div>
						<div class="mall-app-card-top">
							<i style="background-image: url(statics/images/homepage-mall-station-logo.svg)"></i>
							<h2>智能制造</h2>
							<p>覆盖设计仿真到经营管理各环节,实现敏捷创新、精细化运营</p>
						</div>
						<div class="mall-app-card-bottom">
							<ul>
								<li>
									<a href="#" target="_blank">企安易</a>
								</li>
								<li>
									<a href="#" target="_blank">设备宝</a>
								</li>
								<li>
									<a href="#" target="_blank">工业云平台</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="section-bottom">
		<div class="section-more-wrap">
			<a href="#" target="_blank"> <span>更多应用</span><i class="cui-icon cui-icon-more"></i> </a>
		</div>
	</div>
</div>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
极速赛车登陆 腾讯分分彩计划网 极速赛车 腾讯分分彩 极速赛车 极速赛车平台 极速赛车计划 腾讯分分彩平台 腾讯分分彩计划网 极速赛车计划