HTML5加入WEB以后，网页世界就变得丰富绚丽起来了，但是我们在项目应用中，不仅需要绚丽的动画效果，而且更需要有实用的价值。今天分享的一些jQuery/CSS3应用不仅绚丽，而且还比较实用，如果感兴趣，可以应用到自己的项目中。

纯CSS3垂直动画菜单 效果很酷

这是很动感的CSS3动画菜单，垂直方向的，并且支持多级下拉。

核心CSS代码：

.mcd-menu {

  list-style: none;

  padding:;

  margin:;

  background: #FFF;

  /*height: 100px;*/

  border-radius: 2px;

  -moz-border-radius: 2px;

  -webkit-border-radius: 2px;

  /* == */

  width: 250px;

  /* == */

}

.mcd-menu li {

  position: relative;

  /*float:left;*/

}

.mcd-menu li a {

  display: block;

  text-decoration: none;

  padding: 12px 20px;

  color: #777;

  /*text-align: center;

  border-right: 1px solid #E7E7E7;*/

  /* == */

  text-align: left;

  height: 36px;

  position: relative;

  border-bottom: 1px solid #EEE;

  /* == */

}

.mcd-menu li a i {

  /*display: block;

  font-size: 30px;

  margin-bottom: 10px;*/

  /* == */

  float: left;

  font-size: 20px;

  margin: 0 10px 0 0;

  /* == */

}

/* == */

.mcd-menu li a p {

  float: left;

  margin: 0 ;

}

/* == */

.mcd-menu li a strong {

  display: block;

  text-transform: uppercase;

}

.mcd-menu li a small {

  display: block;

  font-size: 10px;

}

.mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small {

  position: relative;

  transition: all 300ms linear;

  -o-transition: all 300ms linear;

  -ms-transition: all 300ms linear;

  -moz-transition: all 300ms linear;

  -webkit-transition: all 300ms linear;

}

.mcd-menu li:hover > a i {

    opacity:;

    -webkit-animation: moveFromTop 300ms ease-in-out;

    -moz-animation: moveFromTop 300ms ease-in-out;

    -ms-animation: moveFromTop 300ms ease-in-out;

    -o-animation: moveFromTop 300ms ease-in-out;

    animation: moveFromTop 300ms ease-in-out;

}

.mcd-menu li:hover a strong {

    opacity:;

    -webkit-animation: moveFromLeft 300ms ease-in-out;

    -moz-animation: moveFromLeft 300ms ease-in-out;

    -ms-animation: moveFromLeft 300ms ease-in-out;

    -o-animation: moveFromLeft 300ms ease-in-out;

    animation: moveFromLeft 300ms ease-in-out;

}

.mcd-menu li:hover a small {

    opacity:;

    -webkit-animation: moveFromRight 300ms ease-in-out;

    -moz-animation: moveFromRight 300ms ease-in-out;

    -ms-animation: moveFromRight 300ms ease-in-out;

    -o-animation: moveFromRight 300ms ease-in-out;

    animation: moveFromRight 300ms ease-in-out;

}

.mcd-menu li:hover > a {

  color: #e67e22;

}

.mcd-menu li a.active {

  position: relative;

  color: #e67e22;

  border:;

  /*border-top: 4px solid #e67e22;

  border-bottom: 4px solid #e67e22;

  margin-top: -4px;*/

  box-shadow: 0 0 5px #DDD;

  -moz-box-shadow: 0 0 5px #DDD;

  -webkit-box-shadow: 0 0 5px #DDD;

  /* == */

  border-left: 4px solid #e67e22;

  border-right: 4px solid #e67e22;

  margin: 0 -4px;

  /* == */

}

.mcd-menu li a.active:before {

  content: "";

  position: absolute;

  /*top: 0;

  left: 45%;

  border-top: 5px solid #e67e22;

  border-left: 5px solid transparent;

  border-right: 5px solid transparent;*/

  /* == */

  top: 42%;

  left:;

  border-left: 5px solid #e67e22;

  border-top: 5px solid transparent;

  border-bottom: 5px solid transparent;

  /* == */

}

/* == */

.mcd-menu li a.active:after {

  content: "";

  position: absolute;

  top: 42%;

  right:;

  border-right: 5px solid #e67e22;

  border-top: 5px solid transparent;

  border-bottom: 5px solid transparent;

}

/* == */

@-webkit-keyframes moveFromTop {

    from {

        opacity:;

        -webkit-transform: translateY(200%);

        -moz-transform: translateY(200%);

        -ms-transform: translateY(200%);

        -o-transform: translateY(200%);

        transform: translateY(200%);

    }

    to {

        opacity:;

        -webkit-transform: translateY(0%);

        -moz-transform: translateY(0%);

        -ms-transform: translateY(0%);

        -o-transform: translateY(0%);

        transform: translateY(0%);

    }

}

@-webkit-keyframes moveFromLeft {

    from {

        opacity:;

        -webkit-transform: translateX(200%);

        -moz-transform: translateX(200%);

        -ms-transform: translateX(200%);

        -o-transform: translateX(200%);

        transform: translateX(200%);

    }

    to {

        opacity:;

        -webkit-transform: translateX(0%);

        -moz-transform: translateX(0%);

        -ms-transform: translateX(0%);

        -o-transform: translateX(0%);

        transform: translateX(0%);

    }

}

@-webkit-keyframes moveFromRight {

    from {

        opacity:;

        -webkit-transform: translateX(-200%);

        -moz-transform: translateX(-200%);

        -ms-transform: translateX(-200%);

        -o-transform: translateX(-200%);

        transform: translateX(-200%);

    }

    to {

        opacity:;

        -webkit-transform: translateX(0%);

        -moz-transform: translateX(0%);

        -ms-transform: translateX(0%);

        -o-transform: translateX(0%);

        transform: translateX(0%);

    }

}

.mcd-menu li ul,

.mcd-menu li ul li ul {

  position: absolute;

  height: auto;

  min-width: 200px;

  padding:;

  margin:;

  background: #FFF;

  /*border-top: 4px solid #e67e22;*/

  opacity:;

  visibility: hidden;

  transition: all 300ms linear;

  -o-transition: all 300ms linear;

  -ms-transition: all 300ms linear;

  -moz-transition: all 300ms linear;

  -webkit-transition: all 300ms linear;

  /*top: 130px;*/

  z-index:;

  /* == */

  left:280px;

  top: 0px;

  border-left: 4px solid #e67e22;

  /* == */

}

.mcd-menu li ul:before {

  content: "";

  position: absolute;

  /*top: -8px;

  left: 23%;

  border-bottom: 5px solid #e67e22;

  border-left: 5px solid transparent;

  border-right: 5px solid transparent;*/

  /* == */

  top: 25px;

  left: -9px;

  border-right: 5px solid #e67e22;

  border-bottom: 5px solid transparent;

  border-top: 5px solid transparent;

  /* == */

}

.mcd-menu li:hover > ul,

.mcd-menu li ul li:hover > ul {

  display: block;

  opacity:;

  visibility: visible;

  /*top: 100px;*/

  /* == */

  left:250px;

  /* == */

}

/*.mcd-menu li ul li {

  float: none;

}*/

.mcd-menu li ul li a {

  padding: 10px;

  text-align: left;

  border:;

  border-bottom: 1px solid #EEE;

  /* == */

  height: auto;

  /* == */

}

.mcd-menu li ul li a i {

  font-size: 16px;

  display: inline-block;

  margin: 0 10px 0 0;

}

.mcd-menu li ul li ul {

  left: 230px;

  top:;

  border:;

  border-left: 4px solid #e67e22;

}

.mcd-menu li ul li ul:before {

  content: "";

  position: absolute;

  top: 15px;

  /*left: -14px;*/

  /* == */

  left: -9px;

  /* == */

  border-right: 5px solid #e67e22;

  border-bottom: 5px solid transparent;

  border-top: 5px solid transparent;

}

.mcd-menu li ul li:hover > ul {

  top: 0px;

  left: 200px;

}

/*.mcd-menu li.float {

  float: right;

}*/

.mcd-menu li a.search {

  /*padding: 29px 20px 30px 10px;*/

  padding: 10px 10px 15px 10px;

  clear: both;

}

.mcd-menu li a.search i {

  margin:;

  display: inline-block;

  font-size: 18px;

}

.mcd-menu li a.search input {

  border: 1px solid #EEE;

  padding: 10px;

  background: #FFF;

  outline: none;

  color: #777;

  /* == */

  width:170px;

  float:left;

  /* == */

}

.mcd-menu li a.search button {

  border: 1px solid #e67e22;

  /*padding: 10px;*/

  background: #e67e22;

  outline: none;

  color: #FFF;

  margin-left: -4px;

  /* == */

  float:left;

  padding: 10px 10px 11px 10px;

  /* == */

}

.mcd-menu li a.search input:focus {

  border: 1px solid #e67e22;

}

在线演示        源码下载

CSS3响应式面包屑菜单 菜单简洁大气

这是一款面包屑菜单，基于CSS3的，外观比较大气，你也可以在这里看到更多的CSS3菜单

核心CSS代码：

.breadcrumbs {

  border-top: 1px solid #ddd;

  border-bottom: 1px solid #ddd;

  background-color: #f5f5f5;

}

.breadcrumbs ul {

  border-left: 1px solid #ddd;

  border-right: 1px solid #ddd;

}

.breadcrumbs li {

  float: left;

  width: 20%;

}

.breadcrumbs a {

  position: relative;

  display: block;

  padding: 20px;

  padding-right: 0 !important;

  /* important overrides media queries */

  font-size: 13px;

  font-weight: bold;

  text-align: center;

  color: #aaa;

  cursor: pointer;

}

.breadcrumbs a:hover {

  background: #eee;

}

.breadcrumbs a.active {

  color: #777;

  background-color: #fafafa;

}

.breadcrumbs a span:first-child {

  display: inline-block;

  width: 22px;

  height: 22px;

  padding: 2px;

  margin-right: 5px;

  border: 2px solid #aaa;

  border-radius: 50%;

  background-color: #fff;

}

.breadcrumbs a.active span:first-child {

  color: #fff;

  border-color: #777;

  background-color: #777;

}

.breadcrumbs a:before,

.breadcrumbs a:after {

  content: '';

  position: absolute;

  top:;

  left: 100%;

  z-index:;

  display: block;

  width:;

  height:;

  border-top: 32px solid transparent;

  border-bottom: 32px solid transparent;

  border-left: 16px solid transparent;

}

.breadcrumbs a:before {

  margin-left: 1px;

  border-left-color: #d5d5d5;

}

.breadcrumbs a:after {

  border-left-color: #f5f5f5;

}

.breadcrumbs a:hover:after {

  border-left-color: #eee;

}

.breadcrumbs a.active:after {

  border-left-color: #fafafa;

}

.breadcrumbs li:last-child a:before,

.breadcrumbs li:last-child a:after {

  display: none;

}

@media (max-width: 720px) {

  .breadcrumbs a {

    padding: 15px;

  }

  .breadcrumbs a:before,

  .breadcrumbs a:after {

    border-top-width: 26px;

    border-bottom-width: 26px;

    border-left-width: 13px;

  }

}

@media (max-width: 620px) {

  .breadcrumbs a {

    padding: 10px;

    font-size: 12px;

  }

  .breadcrumbs a:before,

  .breadcrumbs a:after {

    border-top-width: 22px;

    border-bottom-width: 22px;

    border-left-width: 11px;

  }

}

@media (max-width: 520px) {

  .breadcrumbs a {

    padding: 5px;

  }

  .breadcrumbs a:before,

  .breadcrumbs a:after {

    border-top-width: 16px;

    border-bottom-width: 16px;

    border-left-width: 8px;

  }

  .breadcrumbs li a span:first-child {

    display: block;

    margin: 0 auto;

  }

  .breadcrumbs li a span:last-child {

    display: none;

  }

}

在线演示        源码下载

HTML5爱心跳动动画 用技术勾引妹子

这是一款创意的HTML5动画，跳动的爱心，是不是很可爱？

核心jQuery代码：

(function($){

    function injector(t, splitter, klass, after) {

        var a = t.text().split(splitter), inject = '';

        if (a.length) {

            $(a).each(function(i, item) {

                inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after;

            });

            t.empty().append(inject);

        }

    }

    var methods = {

        init : function() {

            return this.each(function() {

                injector($(this), '', 'char', '');

            });

        },

        words : function() {

            return this.each(function() {

                injector($(this), ' ', 'word', ' ');

            });

        },

        lines : function() {

            return this.each(function() {

                var r = "eefec303079ad17405c889e092e105b0";

                // Because it's hard to split a <br/> tag consistently across browsers,

                // (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash

                // (of the word "split").  If you're trying to use this plugin on that

                // md5 hash string, it will fail because you're being ridiculous.

                injector($(this).children("br").replaceWith(r).end(), r, 'line', '');

            });

        }

    };

    $.fn.lettering = function( method ) {

        // Method calling logic

        if ( method && methods[method] ) {

            return methods[ method ].apply( this, [].slice.call( arguments, 1 ));

        } else if ( method === 'letters' || ! method ) {

            return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array

        }

        $.error( 'Method ' +  method + ' does not exist on jQuery.lettering' );

        return this;

    };

})(jQuery);

在线演示        源码下载

jquery仿windows计算器

jquery简易版的计算器插件，你可以在这里看到更多的jQuery插件，挺丰富的。

核心jQuery代码：

var sNum1='';

var sOpr='';

var bNeedClear=false;    //是否需要清除输入框中已有的内容

function calc(iNum1, iNum2, sOpr)

{

    var iResult=0;

    switch(sOpr)

    {

        case '×':

            iResult=iNum1*iNum2;

            break;

        case '+':

            iResult=iNum1+iNum2;

            break;

        case '-':

            iResult=iNum1-iNum2;

            break;

        case '÷':

            iResult=iNum1/iNum2;

            break;

        default:

            iResult=iNum2;

    }

    return iResult;

}

function doInput()

{

    var oInput=document.getElementById('input1');

    var sHtml=this.innerHTML.replace(' ','');

    switch(sHtml)

    {

        case '=':

            oInput.value=calc(parseInt(sNum1), parseInt(oInput.value), sOpr);

            sNum1='';

            sOpr='';

            bNeedClear=true;

            break;

        case '+':

        case '-':

        case '×':

        case '÷':

            bNeedClear=true;

            if(sNum1.length!=0)

            {

                oInput.value=calc(parseInt(sNum1), parseInt(oInput.value), sOpr);

            }

            sOpr=sHtml;

            sNum1=oInput.value;

            break;

        case 'C':

            oInput.value='0';

            sNum1='';

            sOpr='';

            break;

        default:    //数字

            if(bNeedClear)

            {

                oInput.value=parseInt(sHtml, 10);

                bNeedClear=false;

            }

            else

            {

                oInput.value=parseInt(oInput.value+sHtml, 10);

            }

            break;

    }

}

    var aLi=document.getElementsByTagName('li');

    var i=0;

    for(i=0;i<aLi.length;i++)

    {

        aLi[i].onmousedown=doInput;

        aLi[i].onmouseover=function ()

        {

            this.className='active';

        };

        aLi[i].onmouseout=function ()

        {

            this.className='';

        };

    }

    (function (){

        var oS=document.createElement('script');

        oS.type='text/javascript';

        oS.src='http://sc.chinaz.com';

        document.body.appendChild(oS);

    })();

在线演示        源码下载

HTML5纸带翻转动画 超炫的3D特效

这是一款很不错的HTML5 3D动画体验应用，实用性没有上面几款强。

核心jQuery代码：

(function(){

  var cont = document.querySelector('#cont');

  document.addEventListener('mousemove', updRotation, false);

  function updRotation(e){

    document.querySelector('#msg').style.opacity = 0;

    cont.style.webkitTransform = 'rotateY(' + e.x / 10 + 'deg) rotateZ(-' + e.y / 10 + 'deg)';

    cont.style.transform = 'rotateY(' + e.x / 10 + 'deg) rotateZ(-' + e.y / 10 + 'deg)';

  }

})();

在线演示        源码下载

HTML5/CSS3分步提示框Tooltip

很炫的Tooltip插件，并且在tooltip中可以进行分步骤操作。

核心jQuery代码：

$(document).ready(function () {

  var nbP = $('.container p').length;

  var w = parseInt($('.container p').css("width"));

  var max = (nbP - 1) * w;

  $("ul li[data-num='1']").addClass('active');

  $('.step span').html('Step 1');

  $('body').on('click','.btn', function(){

    var margL = parseInt($('.slider-turn').css('margin-left'));

    var modulo = margL%w;

    if (-margL < max && modulo == 0) {

      margL -= w;

      $('.slider-turn').animate({

        'margin-left':margL

      },300);

      $('ul li.active').addClass('true').removeClass('active');

      var x = -margL/w +1;

      $('ul li[data-num="'+x+'"]').addClass('active');

      $('.step span').html("Step "+x);

    }

    else  {}

  });

  $('body').on('click','.close',function(){

    $('.container').animate({

      'opacity':0

    },600);

    $('.container').animate({

      'top':-1200

    }, {

      duration: 2300,

      queue: false

    });

    $('.open').animate({

      'top':'50%'

    });

  });

  $('body').on('click','.open',function() {

    $('.open').animate({

      'top':-1000

    });

    $('.container').animate({

      'opacity':1

    },400);

    $('.container').animate({

      'top':'50%'

    }, {

      duration: 800,

      queue: false

    });

  });

});

在线演示        源码下载

精美jQuery分页插件 带滑动条分页

这是一款jQuery分页插件，并且带有滑动条，方便页码数量多的分页程序。

核心jQuery代码：

$(document).ready(function(){

            $("#pagination").jPaginator({

                nbPages:64,

                marginPx:5,

                length:8,

                overBtnLeft:'#over_backward',

                overBtnRight:'#over_forward',

                maxBtnLeft:'#max_backward',

                maxBtnRight:'#max_forward',

                onPageClicked: function(a,num) {

                    $("#page").html("Page "+num);

                }

            });

        });

在线演示        源码下载

绚丽而实用的jQuery/CSS3应用及源码的更多相关文章

  1. 分享7款非常实用的jQuery/CSS3插件演示和源码

    上次我们分享了15款效果很酷的最新jQuery/CSS3特效,非常不错,今天要分享7个非常实用的jQuery/CSS3插件演示和源码,一起来看看. 1.jQuery ajax点击地图显示商家网点分布 ...

  2. 14款让前端开发者心动的jQuery/CSS3插件及源码

    14款让前端开发者心动的jQuery/CSS3插件及源码,一起来看看. 1.jQuery左右滚动banner代码! DEMO演示    /    源码下载 2.jQuery QQ表情插件qqFace ...

  3. 非常实用的JQuery的选项卡切换源码

    <html> <head> <meta charset="utf-8"> <title>简单选项卡</title> &l ...

  4. 精心挑选的HTML5/CSS3应用及源码

    这段时间我已经为大家分享了不少关于HTML5应用和jQuery插件了,先来回顾一下: 炫酷霸气的HTML5/jQuery应用及源码 干货分享 超炫丽的HTML5/jQuery应用及代码 绚丽而实用的j ...

  5. 在网站开发中很有用的8个 jQuery 效果【附源码】

    jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...

  6. 19款绚丽实用的jQuery/CSS3侧边栏菜单

    jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...

  7. 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

  8. 分享一组很赞的 jQuery 特效【附源码下载】

    作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些  ...

  9. jQuery 2.0.3 源码分析core - 选择器

         声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢!      打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象 ...

随机推荐

  1. js判断是否安装flash player及当前版本 和 检查flash版本是否需要升级

    一.js检查flash版本升级 for (var i = 0, len = navigator.plugins.length; i < len; i++) { var plugin = navi ...

  2. BootStrapTable 文档

    文档包含了表格属性.列属性.事件.方法等等. 表格参数 表格的参数定义在 jQuery.fn.bootstrapTable.defaults. 名称   标签   类型   默认   描述   - d ...

  3. 九章面试题：Find first K frequency numbers 解题报告

    Find first K frequency numbers /* * Input: int[] A = {1, 1, 2, 3, 4, 5, 2}; k = 3 * return the highe ...

  4. Android开发（二）——自定义圆形控件的使用CircleImageView

    CircleImageView,a fast circular ImageView perfect for profile images. 主要的类CircleImageView: package d ...

  5. 1. CNN卷积网络-初识

    1. CNN卷积网络-初识 2. CNN卷积网络-前向传播算法 3. CNN卷积网络-反向更新 1. 前言 卷积神经网络是一种特殊的深层的神经网络模型,它的特殊性体现在两个方面, 它的神经元间的连接是 ...

  6. Android 面试知识集2

    继续上一篇文章整理有关Android的基础知识,为面试做准备的可以看看哪些知识是遗漏了.资料都是网上整理来,纠正了一些错误,有部分解析加入个人理解!感谢分享相关知识的开发者.这些知识平常开发的过程中都 ...

  7. highcharts图表组件通过设置tooltip属性自定义数据提示信息

    我们先来看看这样一个例子,全局配置好tooltip,数据点的提示信息能够自己根据数据点自身数据情况加以显示,代码如下所示: 01.$(function () { 02.$('#container'). ...

  8. WinDbg F9时“code not found breakpoint not set”

    当使用Windbg 6.2.9200.16384 进行源码调试时,无法在代码文件中F9设置断点,会出现“code not found breakpoint not set”,我们只有启动下我们自己的驱 ...

  9. 数据採集之Web端上传文件到Hadoop HDFS

    前言 近期在公司接到一个任务.是关于数据採集方面的. 需求主要有3个: 通过web端上传文件到HDFS; 通过日志採集的方式导入到HDFS; 将数据库DB的表数据导入到HDFS. 正好近期都有在这方面 ...

  10. android开发(37) android使用android_serialport_api 操作串口，解决权限问题

    最近有个项目,要使用android设备操作串口的 斑马GK888T打印机,使用打印机打印二维码. 硬件设备连接方式: 安卓设备 通过 串口RS232 连接 斑马打印机的串口 那么就要解决:使用安卓设备 ...