jQuery创意的步骤服务列表悬停动画特效

2020-12-23 0 362

jQuery创意的步骤服务列表悬停动画特效

jQuery基于css3动画属性制作创意的时间轴布局,产品营销开发步骤服务列表布局代码。通过鼠标悬停图标列表动画特效。

使用方法

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/animate.min.css" />
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/animate.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<div class="items items-steps">
	<div class="center">
		<p class="main-title animated hidden" ani-name="fadeInRight" ani-delay="0s">8大标准环节 确保品质服务</p>
		<div class="items-block">
			<div class="transition item animated hidden" ani-name="rollInLeft" ani-delay=".15s">
				<div class="img-block"> <img src="statics/images/items-steps-officer.png" alt="img"> </div>
				<p class="item-title">商务代表</p>
				<p class="item-p">售前咨询</p>
				<p class="item-p">确认需求</p>
				<p class="item-p">签订合同</p>
				<p class="item-p">联络沟通</p>
			</div>
			<div class="transition item even animated hidden" ani-name="rollInLeft" ani-delay=".3s">
				<div class="img-block"> <img src="statics/images/items-steps-designer.png" alt="img"> </div>
				<p class="item-title">视觉设计师</p>
				<p class="item-p">和您沟通细节</p>
				<p class="item-p">向您收集资料</p>
				<p class="item-p">提交设计样稿</p>
				<p class="item-p">约5个工作日</p>
			</div>
			<div class="transition item animated hidden" ani-name="rollInLeft" ani-delay=".45s">
				<div class="img-block"> <img src="statics/images/items-steps-manager.png" alt="img"> </div>
				<p class="item-title">设计经理</p>
				<p class="item-p">验收设计稿</p>
			</div>
			<div class="transition item even animated hidden" ani-name="rollInLeft" ani-delay=".6s">
				<div class="img-block"> <img src="statics/images/items-steps-front.png" alt="img"> </div>
				<p class="item-title">前端工程师</p>
				<p class="item-p">制作页面</p>
				<p class="item-p">开发功能</p>
				<p class="item-p">实现效果</p>
				<p class="item-p">10-15个工作日</p>
			</div>
			<div class="transition item item-col2 animated hidden" ani-name="rollInLeft1" ani-delay=".75s">
				<div class="img-block"> <img src="statics/images/items-steps-engineer.png" alt="img"> </div>
				<p class="item-title">质检工程师</p>
				<div class="flex-row">
					<div class="item-block">
						<p class="item-p">客户需求核对</p>
						<p class="item-p">功能测试</p>
						<p class="item-p">展示效果验证</p>
						<p class="item-p">网站性能测试</p>
					</div>
					<div class="item-block">
						<p class="item-p">合规性检查</p>
						<p class="item-p">技术规范检查</p>
						<p class="item-p">第三方业务验证</p>
						<p class="item-p">3-5个工作日</p>
					</div>
				</div>
			</div>
			<div class="transition item even animated hidden" ani-name="rollInLeft" ani-delay=".9s">
				<div class="img-block"> <img src="statics/images/items-steps-officer.png" alt="img"> </div>
				<p class="item-title">商务代表</p>
				<p class="item-p">请您验收</p>
				<p class="item-p">转运维部门</p>
				<p class="item-p">转客服部门</p>
			</div>
			<div class="transition item animated hidden" ani-name="rollInLeft" ani-delay="1.05s">
				<div class="img-block"> <img src="statics/images/items-steps-engineer.png" alt="img"> </div>
				<p class="item-title">运维工程师</p>
				<p class="item-p">网站上线</p>
				<p class="item-p">网络、服务器保障</p>
				<p class="item-p">平台升级、故障排除</p>
				<p class="item-p">病毒、黑客防范</p>
			</div>
			<div class="transition item even animated hidden" ani-name="rollInLeft" ani-delay="1.2s">
				<div class="img-block"> <img src="statics/images/items-steps-cc.png" alt="img"> </div>
				<p class="item-title">客服专员</p>
				<p class="item-p">解答疑问</p>
				<p class="item-p">使用指导</p>
				<p class="item-p">友情提示</p>
				<p class="item-p">协助内容维护</p>
			</div>
			<div class="steps-block">
				<div class="step"></div>
				<div class="step"></div>
				<div class="step"></div>
				<div class="step"></div>
				<div class="step"></div>
				<div class="step"></div>
				<div class="step"></div>
				<div class="step"></div>
			</div>
		</div>
	</div>
</div>
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1、如非特殊说明,本站对本文提供的代码或者素材不拥有任何权利,其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来,仅供学习和研究使用。
3、如有侵犯你版权的,请来信(邮箱:admin@mail.52muban.com)指出,核实后,本站将立即改正。
4、如有链接无法下载、失效或广告,请点击下面的报错或者联系我们处理!
5、以上资源售价只是赞助,不代表代码或者素材本身价格。收取费用仅维持本站的日常运营所需!

我爱模板网 其它特效 jQuery创意的步骤服务列表悬停动画特效 https://www.52muban.com/9309.html

专注网站开发,建设。

常见问题
  • 我们承诺演示效果图均和网站一模一样,如有不同,全额退款,并且我们的模板和数据都没有留后门,请放心使用。
查看详情
  • 本站所有源码版权归原作者所有,我爱模板网提供的源码只能用于学习研究,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务