CSS3结合jQuery实现动画效果及回调函数的实例

写期末项目中,朋友提出的 idea ,当用户登录成功时欢迎用户的特效,即欢迎用户信息从底部上升到页面中,之后再退回底部。

创新互联电话联系:028-86922220,为您提供成都网站建设网页设计及定制高端网站建设服务,创新互联网页制作领域10多年,包括塔吊租赁等多个行业拥有丰富的网站推广经验,选择创新互联,为企业锦上添花!

他遇到的问题是:从底部能出来提示信息,但是出来之后就下不去了。

听过后,考虑之,想到用回调函数来解决这个Bug,然后模拟登录成功时进入主页(即刷新页面),弹出欢迎信息并消失,写了一个类似这样的动画效果。仅供参考:

效果图:

CSS3结合jQuery实现动画效果及回调函数的实例

代码如下:



	
		
		欢迎动画
		
	
	
		

欢迎xxx登录,祝您购物愉快

这里主要用到了css3中的 animate 动画属性,结合 jQuery 实现动画执行的时间和方向,最后设置回调函数使提示信息回到初始位置即可。

以上这篇CSS3结合jQuery实现动画效果及回调函数的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。


分享名称:CSS3结合jQuery实现动画效果及回调函数的实例
网站URL:http://bzwzjz.com/article/igocgs.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站建设 网站建设 成都网站建设 教育网站设计方案 成都网站建设 网站建设公司 达州网站设计 网站建设推广 营销型网站建设 成都响应式网站建设公司 重庆手机网站建设 手机网站设计 成都企业网站制作 四川成都网站制作 成都响应式网站建设 响应式网站设计 重庆外贸网站建设 成都网站建设 成都定制网站建设 高端定制网站设计 重庆网站设计 成都商城网站建设