创意的产品服务圆形布局代码

直接使用代码

图片素材

无

css代码

      <style>
*{margin:0;padding:0}
html,body{width:100%;font-size:12px;font-family:'microsoft yahei'}
ul{list-style:none}
a{text-decoration:none}
.auto-box{width:100%;height:auto;padding:30px 0 40px;background:#fff}
.main-box{max-width:1200px;height:auto;margin:0 auto}
.index-tit{padding:40px 0;text-align:center}
.index-tit h1{font-size:30px;color:#363f45;font-weight:normal}
.index-tit p{font-size:20px;color:#abb0b4;padding-top:15px}
.index-tserver{width:100%;background:url('http://www.bootfastui.cn/img/2020/200424-4/360server-line.png') no-repeat center 125px;box-sizing:border-box;text-align:center;padding:0 2.6%}
.index-tserver li{width:24.8%;min-width:162px;height:162px;text-align:center;box-sizing:border-box;padding-top:106px;font-size:14px;color:#656d73;display:inline-block;position:relative;cursor:pointer;margin-bottom:10px;margin-left:-0.1%}
.index-tserver li.tserver-list1{background:url('http://www.bootfastui.cn/img/2020/200424-4/360server-icon1.png') no-repeat center top}
.index-tserver li.tserver-list2{background:url('http://www.bootfastui.cn/img/2020/200424-4/360server-icon2.png') no-repeat center top}
.index-tserver li.tserver-list3{background:url('http://www.bootfastui.cn/img/2020/200424-4/360server-icon3.png') no-repeat center top}
.index-tserver li.tserver-list4{background:url('http://www.bootfastui.cn/img/2020/200424-4/360server-icon4.png') no-repeat center top}
.index-tserver li.tserver-list5{background:url('http://www.bootfastui.cn/img/2020/200424-4/360server-icon5.png') no-repeat center top}
.index-tserver li.tserver-list6{background:url('http://www.bootfastui.cn/img/2020/200424-4/360server-icon6.png') no-repeat center top}
.index-tserver li.tserver-list7{background:url('http://www.bootfastui.cn/img/2020/200424-4/360server-icon7.png') no-repeat center top}
.index-tserver li p{width:162px;height:162px;display:inline-block;position:absolute;top:0;left:50%;margin-left:-81px;border-radius:81px;padding:40px 30px;box-sizing:border-box;text-align:left;font-size:14px;line-height:22px;background:linear-gradient(111deg,#04bde4,#1067fe);display:none}
.index-tserver li p a{color:#fff}
.index-tserver li p.animated{animation-duration:.5s;animation-fill-mode:both}
.index-tserver li:hover p{display:block}
.index-tserver-ad{width:100%;margin-top:60px;background:#f3f3f3;text-align:center;padding:40px 0}
.index-tserver-ad li{display:inline-block;color:#abb0b4;font-size:16px;padding:0 3%}
.index-tserver-ad li img{vertical-align:middle;display:inline-block;margin-right:5px}
.index-tserver-ad li+li{border-left:1px solid #e2e3e4}
.zoomin{animation-name:zoomin}
@keyframes zoomin{0%{opacity:0;transform:scale(.3)}
50%{opacity:1}
}
</style>

HTML+JS代码

      
<div class="auto-box">
	<div class="main-box">
		<div class="index-tit">
			<h1>比公有云更多的，是精益求精的360°服务</h1>
			<p>近20年 IT 服务经验，千锤百炼打造面向企业的全程服务</p>
		</div>
		<ul class="index-tserver">
			<li class="tserver-list1">
				上云迁移服务
				<p class="animated zoomin">
					<a href="#">制定上云整体方案，实现专业、有序、安全迁移上云</a>
				</p>
			</li>
			<li class="tserver-list2">
				新手服务
				<p class="animated zoomin">
					<a href="#">提供云端架构、部署、产品和功能培训和指导</a>
				</p>
			</li>
			<li class="tserver-list3">
				网络安全服务
				<p class="animated zoomin">
					<a href="#">提供漏扫、态势感知、安全加固等全面网络安全防护服务</a>
				</p>
			</li>
			<li class="tserver-list4">
				资质服务
				<p class="animated zoomin">
					<a href="#">致力于为云上客户的应用提供更加安全防护与合规保障</a>
				</p>
			</li>
			<li class="tserver-list5">
				应用部署服务
				<p class="animated zoomin">
					<a href="#">整合CI/CD，提供面向应用的系统部署和运维服务</a>
				</p>
			</li>
			<li class="tserver-list6">
				混合托管服务
				<p class="animated zoomin">
					<a href="#">提供IDC托管混合、云与IDC数据混合，全方位混合云构建</a>
				</p>
			</li>
			<li class="tserver-list7">
				运维运营服务
				<p class="animated zoomin">
					<a href="#">提供各种技术代维和业务代维服务</a>
				</p>
			</li>
		</ul>
	</div>
	<div class="index-tserver-ad">
		<div class="main-box">
			<ul>
				<li><img src="http://www.bootfastui.cn/img/2020/200424-4/tserver-ad-icon1.png">7*24*365 服务支持</li>
				<li><img src="http://www.bootfastui.cn/img/2020/200424-4/tserver-ad-icon2.png">灵活定制行业解决方案</li>
				<li><img src="http://www.bootfastui.cn/img/2020/200424-4/tserver-ad-icon3.png">秒级快速响应</li>
				<li><img src="http://www.bootfastui.cn/img/2020/200424-4/tserver-ad-icon4.png">VVIP 大客户服务</li>
				<li><img src="http://www.bootfastui.cn/img/2020/200424-4/tserver-ad-icon5.png">最高15天免费试用</li>
			</ul>
		</div>
	</div>
</div>