基于jQuery CSS3鼠标点击动画效果
分享基于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>
via：http://www.w2bc.com/Article/40458
基于jQuery CSS3鼠标点击动画效果的更多相关文章
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- CSS3鼠标滑过动画线条边框特效
基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...
- 基于 jQuery 实现垂直滑动的手风琴效果
今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
- 基于jQuery弹出层图片动画查看代码
分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&q ...
- 基于jQuery+CSS3实现人物跳动特效
分享一款基于jQuery+CSS3实现人物跳动特效.这是一款类似gif图片效果的CSS3动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=& ...
- 使用原生JS，实现鼠标点击爱心效果 ！！！
使用原生JS,实现鼠标点击爱心效果 !!! 引言: 在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的.其实实现起来也很简单,下面一起来学习一下吧.文末附上 ...
随机推荐
- Checkstyle-Configuration
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE module PUBLIC "-/ ...
- SDL操作笔记
原文地址:https://blog.csdn.net/qq_38124598/article/details/73543184 这里总结一下个人对SDL的一些函数,方便以后查询. v1.0.1 1 ...
- itunes Connect 未能创建 App 图标
之前用的是chrome浏览器提交了app和app图标都是没问题的,可今天一直提交一直没成功,也是符合apple要求格式和大小的,郁闷.后来想了想换个浏览器试试,用了mac自带的safari浏览器后居然 ...
- 《TCP/IP详解卷1：协议》读书笔记
<TCP/IP详解卷1:协议>读书笔记 - QingLiXueShi - 博客园https://www.cnblogs.com/mengwang024/p/4425834.html < ...
- CustomValidator控件用法
虽然大部分时间一直从事asp.net的开发,对于一些常用的asp.net服务器端验证控件及它们的组合使用比较熟悉,如:CompareValidator ——比较验证控件RangeValidator — ...
- 【转载】Spring Cache介绍
原文地址:http://www.cnblogs.com/rollenholt/p/4202631.html 缓存是实际工作中非常常用的一种提高性能的方法, 我们会在许多场景下来使用缓存. 本文通过一个 ...
- Python MySQLdb select（选择） 封装
对MySQL选择的封装 def select_data(sql): conn = MySQLdb.connect(host="10.10.10.77", user="xx ...
- sqlserver自定义函数与存储过程的区别 实例详解
分享下sql server自定义函数与存储过程的区别,一起来学习下. 一.自定义函数: 1. 可以返回表变量 2. 限制颇多,包括 不能使用output参数: 不能用临时表: 函数内部的操作不能影响到 ...
- SerDes、RocketIO、GTX
1.SerDes:serdes = serial and deserial,就是组串器与解串器,也就是通用的高速IO. GTX,GTP,GTH等都是SERDES,只是速率不一样,XILINX叫其不同的 ...
- RightScale 2019年云状态报告：公共云快速增长 微软Azure增长最快
https://www.rightscale.com/ 全球云管理服务厂商RightScale发布了年度云状态报告,今年报告的十大主要内容包括:企业在多云平台上投入巨资.公共云继续快速增长,但是私有云 ...