基于jQuery CSS3鼠标点击动画效果
2023-09-27 14:28:19 时间
分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果。效果图如下:
实现的代码。
html代码:
<div class="container"> <div class="clearfix"> <div class="grid12 small12"> <div class="demos fl" id="demos"> <div class="elementDemos clearfix"> <div class="row fl"> <div class="grid12 small2"> <div class="elementDemos-single" data-transition="slideDown" style="background: mediumspringgreen;"> <h4> slideDown</h4> </div> </div> <div class="grid12 small2"> <div class="elementDemos-single" data-transition="slideUp" style="background: orchid;"> <h4> slideUp</h4> </div> </div> <div class="grid12 small2"> <div class="elementDemos-single" data-transition="slideRight" style="background: gold;"> <h4> slideRight</h4> </div> </div> <div class="grid12 small2"> <div class="elementDemos-single" data-transition="slideLeft" style="background: dodgerblue;"> <h4> slideLeft</h4> </div> </div> <div class="grid12 small2"> <div class="elementDemos-single" data-transition="expand" style="background: darkred;"> <h4> expand</h4> </div> </div> <div class="grid12 small2"> <div class="elementDemos-single" data-transition="contract" style="background: darkmagenta;"> <h4> contract</h4> </div> </div> </div> <div class="row fl"> <div class="grid12 small2"> <div class="elementDemos-single" data-transition="spin" style="background: Teal;"> <h4> spin</h4> </div> </div> <div class="grid12 small2"> <div class="elementDemos-single" data-transition="sideFall" style="background: sienna;"> <h4> sideFall</h4> </div> </div> <div class="grid12 small2"> <div class="elementDemos-single" data-transition="horizontal3DFlip" style="background: yellowgreen;"> <h4> horizontal3DFlip</h4> </div> </div> <div class="grid12 small2"> <div class="elementDemos-single" data-transition="vertical3DFlip" style="background: mediumaquamarine;"> <h4> vertical3DFlip</h4> </div> </div> <div class="grid12 small2"> <div class="elementDemos-single" data-transition="3DPivot" style="background: khaki;"> <h4> 3DPivot</h4> </div> </div> <div class="grid12 small2"> <div class="elementDemos-single" data-transition="rollLeft" style="background: powderblue;"> <h4> rollLeft</h4> </div> </div> </div> <div class="row fl"> <div class="grid12 small2"> <div class="elementDemos-single" data-transition="rollRight" style="background: palegreen;"> <h4> rollRight</h4> </div> </div> <div class="grid12 small2"> <div class="elementDemos-single" data-transition="glideLeft" style="background: tomato;"> <h4> glideLeft</h4> </div> </div> <div class="grid12 small2"> <div class="elementDemos-single" data-transition="glideRight" style="background: cyan;"> <h4> glideRight</h4> </div> </div> <div class="grid12 small2"> <div class="elementDemos-single" data-transition="flipX" style="background: peru;"> <h4> flipX</h4> </div> </div> <div class="grid12 small2"> <div class="elementDemos-single" data-transition="flipY" style="background: cadetblue;"> <h4> flipY</h4> </div> </div> </div> </div> </div> </div> </div>
相关文章
- 教你三种jQuery框架实现元素显示及隐藏动画方式
- Jquery-选择框点击勾选或者取消
- 在jQuery定义自己函数
- jquery 滑动动画
- jquery Chosen使用
- 本地存储,jQuery入口函数,jQuery对象和DOM对象转化,jQuery选择器,jQuery操作样式,jQuery动画效果
- 《jQuery权威指南》学习笔记之第2章 jQuery选择器
- firedebug调试Jquery
- jQuery中动画函数animate的用法详解【转】
- jQuery 特效:盒子破碎和移动动画效果
- jQuery事件总结
- jQuery addClass removeClass toggleClass方法概述
- Jquery复习(七)之尺寸
- 放弃使用jQuery实现动画
- 使用jQuery和css3实现了仿淘宝ued博客左边的菜单切换动画
- 基于jQuery加入购物车飞入动画特效
- 一款基于css3和jquery实现的动画弹出层
- 一款jquery和css3实现的卡通人物动画特效
- 7款基于jquery的动画搜索框
- aos.js超赞页面滚动元素动画jQuery动画库
- jquery操作select
- JQuery中$.each 和$(selector).each()的区别详解
- JQuery学习笔记
- jQuery各种动画效果
- HTML 提交表单,JQuery接收内容
- 19前端学习之JQuery基础(三):jQuery尺寸、位置操作、jQuery事件、jQuery事件对象、Jquery拷贝对象、jQuery 多库共存、jQuery 插件
- 17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果