本文实例讲述了jQuery+css3实现转动的正方形效果。分享给大家供大家参考，具体如下： 主要是应用到了css3中的rotate来控制旋转角度 运行效果截图如下：点击此处查看在线演示效果。 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><script src="jquery-1.7.1.min....
本文实例讲述了jquery+css3实现会动的小圆圈效果。分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下： <!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="utf-8" /><title>那些变换颜色的小豆豆</title><script type="text/javascript" src="jquery.js"></script><style type="text/css">h1{font-size:16px;}.circle{position:absolute;width:100px;height:100px;border-radius: 50px;-webkit-border-ra...
废话不多说了，直接给大家贴实例代码。直接看例子： <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ngAnimate插件1</title> <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script> <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script> <style ...
废话不多说了，直接给大家贴代码了。 效果图如下所示： 简洁代码如下： <link rel="stylesheet" href="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.css" /> <script src="http://hovertree.com/ziyuan/jquery/jquery-2.1.4.min.js"></script> <script src="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.js"></script> <div id="hoverclock"></div> <script> $("#hoverclock").hoverclo...
本文介绍了如何利用jQuery+CSS3实现3D立方体旋转效果，先看一看效果图：切换图片过程中，图片进行旋转：HTML结构 3D图片画廊的图片列表和导航按钮分别使用两个无序列表来制作。<section><div id="css3dimageslider" class="transparency"><ul><li> <img src="img/css3dimg1.jpg"> </li><li> <img src="img/css3dimg2.jpg"> </li><li> <img src="img/css3dimg3.jpg"> </li><li> <img src="img/css3dimg4.jpg"> </li></ul></div><ul ...
jQuery下拉列表框特效将每一个列表项都制作为卡片的样式，打开和关闭它有打开和关闭百叶窗的感觉，效果非常不错，分享给大家。简要教程 HTML结构 该下拉列表框特效的列表项使用一个无序列表来制作，用于切换打开和关闭状态的元素是一个超链接元素。<div class="container"><div class="card-drop"><a class=toggle href="#"><i class=fa fa-suitcase></i> <span class=label-active>Everyting</span></a><ul><li class=active><a d...
这是一款仿windows10开始菜单的下拉导航菜单特效。该下拉菜单使用jQuery和CSS3来完成类似windows10开始菜单样式效果，它的代码简洁，效果非常时尚。查看演示 源码下载 该下拉菜单的HTML结构非常简单，基本的HTML结构如下： <div id="top-bar" class="top-bar"><div class="bar"><button id="navbox-trigger" class="navbox-trigger"><i class="fa fa-lg fa-th"></i></button></div><div class="navbox"><div class="navbox-ti...
效果展示如下：查看演示 下载源码 HTML结构 Apple TV是由苹果公司继 Airport Express 之后推出的一款高清电视机顶盒产品。如果你曾经使用过，一定会被其中的炫酷电影海报视觉差特效所吸引。 该视觉差特效的HTML结构使用一个<div>作为容器，在它里面的每一个<div>都是一个“层”。 <div class="poster"><div class="shine"></div><div class="layer-1"></div><div class="layer-2"></div><div class="layer-3"></div><div class...
本文实例讲述了jquery+CSS3实现淘宝移动网页菜单效果。分享给大家供大家参考。具体如下： 这是一款基于jquery+CSS3实现的淘宝移动网页菜单，其实这个菜单动画并不复杂，只有缩放和位移。难点是用了扇形结构，而且还要实现扇形的链接区域，这个就费脑筋了，最后采用了传统的图片map来做热区，效果还不错。相信肯定有更好的解决方法。 先来看看运行效果截图：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-css3-taobao-ph...
下图给大家展示了使用jquery css实现的点击动画弹出表单源码，有上传表单、删除表单、发送评论表单，都是通过鼠标点击图标按钮动画弹出的表单源码特效。 效果图展示如下：在线预览 源码下载 html代码： <div class="buttonCollection"><div class="qutton" id="qutton_upload"><div class="qutton_dialog" id="uploadDialog"><h2>上传</h2><div class="urlField"><input type="text" id="fileUrl" placeholder="文件地址" /></d...
本文实例讲述了jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码。分享给大家供大家参考。具体如下： 这里实现圆角表单，圆角输入框，无刷新验证，漂亮唯美，是对这款基于HTML5/CSS3/jQuery来实现的表单效果的简要概括，用HTML5可以实现很多超乎寻常的效果，从此你会喜欢上HTML5,会骂一下万恶的IE,到现在IE8还不支持HTML5，正悲哀着呢。 先来看看运行效果截图：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-htm...
废话不多说了，炫下效果图并附上演示和源码下载。 实现效果如下：查看演示 源码下载 HTML结构代码： CSS代码：/*表单开关样式*/ .ui-switch { position: absolute; font-size: .16rem; right:0.07rem; top: 50%; margin-top: -0.16rem; width: .7rem; height: .3rem; line-height: .3rem; } .ui-switch input { width: .7rem; height: .3rem; position: absolute; top: 0;left: 0; z-index: 2; border: 0; background: 0 0; ...
飘花效果的实现——效果图：查看演示 源码下载 需求： 一个jquery，，，这个看标题么就知道了 jQuery Transit还有这个东西 http://github.com/rstacruz/jquery.transit jquery对一些效果的扩展 飘花的效果稍微复杂一点，有一定量的JavaScript代码，通过JS+CSS3的组合实现的。观察右边效果，可以大致分解飘花的实现 飘花比人物的层级都高 飘花数量非常多 飘花会有一定的轨迹运动 飘花带有渐变的效果 ...
先给大家附上效果图：最近做项目的时候需要实现一个字符逐个出现的打字效果，用css的clip+css的动画实现的，与自己写的打字机效果相结合，整 理一起，效果很赞。 先来说说这个线条，我们会看到它是条，实际上就是个四周border有规律的显示隐藏，那么这里必定会想到after，before属性， 我们暂且先考虑after。先建立一个box，然后after一个边框<div class="box"></div>.box:before{content: ;position: absolute;width:px;height: p...
本文实例讲述了jQuery+css3实现Ajax点击后动态删除功能的方法。分享给大家供大家参考。具体如下： 这里使用jquery实现ajax动态删除一个方框，并带有动画缓冲效果，在google plus网站发现的特效，在此献丑模仿了一番，已基本与Google Plusp功能相同，你可在方框中加入一些内容，jquery插件选的版本是1.6.2,更高版本也是可以的。 运行效果截图如下：具体代码如下： <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content=...