澳门新浦京电子游戏10款基于jquery实现的超酷动画源码

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划澳门新浦京电子游戏 ,!

今天我们要来分享一些很酷的HTML5动画演示,HTML5的强大之处在于它可以利用canvas的特性来绘制很多普通网页无法完成的图形和动画,canvas就像一块超级画板,在上面不仅可以实现平面图形,而且一些3D动画也非常简单。很多HTML5动画也都基于canvas,一起来看看吧。

1.jQuery二级下拉菜单 下拉箭头翻转动画

之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽。但今天要介绍的这款jQuery二级下拉菜单外观很简洁,使用非常简单,它唯一的特点就是下拉菜单项的下拉箭头有翻转的动画特效。

澳门新浦京电子游戏 1

在线演示

源码下载

HTML5目前已经逐渐成熟,越来越多的Web项目都已经用到了HTML5技术,包括CSS3。本文主要分享了一些最新的HTML5动画应用,大部分都比较炫酷,也有一些比较实用的,并且每一个动画都提供源代码下载。

HTML5/CSS3实现大风车旋转动画

作为今天首款HTML5动画,这款大风车旋转效果的确非常棒,它是用纯CSS3实现。

核心CSS代码:

澳门新浦京电子游戏 2澳门新浦京电子游戏 3

.wmd1{
   -webkit-transform: scale(.6);
  position:absolute;
  top:180px;
  left:200px;
  perspective: 1000px;
}

.base{ }

.blades{
  width: 350px;
  height: 350px;
  left: 10%;
  top: 10%;
  z-index:2;
  border-radius: 50%;
  position: absolute;
  margin-top: -30px;
  margin-left: 50px;

  animation: spin 6s linear infinite;
}

.blade1 {
          background: white;
  position:absolute;
      width:41px;
      height:139px;
  top:-10px;
  left:150.5px;
  transform:rotate(0deg);
  display:inline-block;
  background:
    linear-gradient(135deg, transparent 20px, white 0),
    linear-gradient(225deg, transparent 20px, white 0),
    linear-gradient(315deg, transparent 20px, white 0),
    linear-gradient(45deg, transparent  20px,  white 0);
  background-position: top left, top right, bottom right, bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.blade2 {
          background:white;
  position:absolute;
      width:41px;
      height:139px;
  top:105.5px;
  left:41px;
  transform:rotate(-90deg);
  display:inline-block;
  background:
    linear-gradient(135deg, transparent 20px, white 0),
    linear-gradient(225deg, transparent 20px, white 0),
    linear-gradient(315deg, transparent 20px, white 0),
    linear-gradient(45deg, transparent  20px,  white 0);
  background-position: top left, top right, bottom right, bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.blade3 {
          background:white;
  position:absolute;
      width:41px;
      height:139px;
  top:105.5px;
  right:41px;
  transform:rotate(-270deg);
  display:inline-block;
  background:
    linear-gradient(135deg, transparent 20px, white 0),
    linear-gradient(225deg, transparent 20px, white 0),
    linear-gradient(315deg, transparent 20px, white 0),
    linear-gradient(45deg, transparent  20px,  white 0);
  background-position: top left, top right, bottom right, bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.blade4 {
          background:white;
  position:absolute;
      width:41px;
      height:139px;
  bottom:-10px;
  left:150.5px;
  transform:rotate(180deg);
  display:inline-block;
  background:
    linear-gradient(135deg, transparent 20px, white 0),
    linear-gradient(225deg, transparent 20px, white 0),
    linear-gradient(315deg, transparent 20px, white 0),
    linear-gradient(45deg, transparent  20px,  white 0);
  background-position: top left, top right, bottom right, bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.vane1{
  width:1px;
  height:350px;
  left:175px;
  background:white;
  position:absolute;
  transform:rotate(90deg);
}

.vane2{
  width:1px;
  height:350px;
  left:171.5px;
  background:white;
  position:absolute;
  transform:rotate(180deg);
}

.base .bottom_base{
  position:absolute;
  width:90px;
  height:100px;
  left:162px;
  border-right: 16px solid transparent;
  border-left: 16px solid transparent;
  border-bottom: 380px solid white;
  opacity:.8;
  z-index:-1;
  top:42.5px;
}

ul{
  position:absolute;
  top:180px;
  left:-30px;
}
li{
  width:10px;
  height:10px;
  background:white;
  padding:2px;
  display:block;
  margin: 30px;
  box-shadow: inset 0px -2px 0px lightgray; 
}

li:nth-child(2){
  position:absolute;
  top:-45px;
  left:20px;
}

li:nth-child(1){
  position:absolute;
  top:35px;
  left:50px;
}

li:nth-child(3){
  position:absolute;
  top:75px;
  left:50px;
}

@keyframes spin {
0% {
       transform:rotate(0deg);
 }
 100% {
       transform:rotate(-360deg);
 }
}

View Code

澳门新浦京电子游戏 4

在线演示 
      源码下载

2.jQuery层叠式翻页焦点图插件 可自动播放

今天我们要来分享一款很有特色的jQuery焦点图插件,它的图片切换方式是层叠的,很有立体感。这种层叠的动画效果我们在之前也分享过一点,比如这款CSS3图片层叠展开特效
可展开扇形效果。另外这款jQuery焦点图还支持自动播放模式。

澳门新浦京电子游戏 5

在线演示

源码下载

1、HTML5 Canvas实现画板涂鸦动画应用

这是一款HTML5网络画板,拥有基础的图形绘制功能,相对比较简单,基于canvas,因此非常灵活。

澳门新浦京电子游戏 6

在线演示源码下载

纯CSS3 3D图片翻转展示

这是一款基于CSS3的3D图片展示,在图片切换时将会有翻转的动画效果。

核心CSS代码:

澳门新浦京电子游戏 7澳门新浦京电子游戏 8

.coverflow-list {
  width: 100%;
}
.coverflow-list .coverflow-item {
  display: inline-block;
  background: #414141;
  margin: 0 -50px;
  position: relative;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
.coverflow-list .coverflow-item .album-cover {
  display: block;
  height: 150px;
  margin: 0;
}
.coverflow-list .coverflow-item .album-cover img {
  height: 150px;
  width: 150px;
  opacity: 0.5;
}
.coverflow-list .coverflow-item .album-name {
  text-align: center;
  display: block;
  color: #444;
}
.coverflow-list .coverflow-item label {
  padding: 0;
  border: none;
  display: block;
  text-shadow: none;
}
/* Now apply 3D transforms (never done this before!) */
.coverflow-list {
  -webkit-transform: perspective(900px);
  -webkit-transform-style: preserve-3d;
  -webkit-perspective-origin: 100% 30%;
}
.coverflow-list .coverflow-item {
  -webkit-transition: all 0.4s ease;
  background: #212121;
  -webkit-transform: rotateY(45deg);
}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + .coverflow-item {
  -webkit-transform: rotateY(0deg);
  margin: 0 auto;
  background: #313131;
  transition: all 0.4s ease;
}
input[type="radio"]:checked + .coverflow-item img {
  opacity: 1;
}
input[type="radio"]:checked + .coverflow-item figcaption {
  color: #FFFFFF;
}
input[type="radio"]:checked + .coverflow-item ~ .coverflow-item {
  -webkit-transform: rotateY(-45deg);
  background: #515151;
}

View Code

澳门新浦京电子游戏 9

在线演示 
   
  源码下载

3.jQuery双向滑动杆 设置数值百分比

今天我们要给大家分享的是一款简单的jQuery双向滑动杆插件,利用这个jQuery滑杆插件,我们可以很便捷地设置数值百分比,类似的插件我们在之前也有分享过,比如:jQuery滑动杆打分插件
可左右滑动和jQuery/CSS3带Tooltip的滑杆动画。如果你有更好的jQuery滑杆插件,欢迎与我们分享。

澳门新浦京电子游戏 10

在线演示

源码下载

2、HTML5堆木头游戏

这款游戏的玩法是将木头堆积起来,多出的部分将被切除,直到下一根木头无法堆放为止。这款HTML5游戏的难点在于待堆放的木头是移动的,因此需要你很好的控制木头下落的位置。

澳门新浦京电子游戏 11

在线演示源码下载

漂亮的CSS3动画进度条

这是一款闪闪发光的CSS3进度条,进度条在初始化的时候还有滑动的动画特效。

核心jQuery代码:

澳门新浦京电子游戏 12澳门新浦京电子游戏 13

(function() {
  $(document).ready(function() {
    return $(".bar").each(function(i, elem) {
      return $(elem).addClass('active');
    });
  });

}).call(this);

View Code

澳门新浦京电子游戏 14

在线演示 
   
  源码下载

4.jQuery实用图片滑块焦点图 支持移动端滑动

关于jQuery焦点图插件我们以前已经分享过很多了,尤其是支持移动端滑动的jQuery焦点图,比如适应手机端的jQuery图片滑块动画。今天我们要再来介绍一款jQuery实用图片滑块焦点图,它也支持移动端的触屏滑动,这款插件并没有特别的动画效果,但方便实用。

澳门新浦京电子游戏 15

在线演示

源码下载

3、HTML5 3D立方体图片切换动画

这款HTML5动画可以将图片切分成几个立方体,带有3D的立体效果。

澳门新浦京电子游戏 16

在线演示源码下载

CSS3垂直图标菜单

这是一款简单而清爽的CSS3垂直菜单,鼠标滑过菜单项还有Tooltip的动画效果。

核心CSS代码:

澳门新浦京电子游戏 17澳门新浦京电子游戏 18

#nav-bar {
  margin: 50px 50px 50px 400px;
  max-width: 50px;
  border: 1px solid #bed1df;
  border-radius: 4%;
  background-color: white;
  -webkit-box-shadow: -2px 3px 2px 0px rgba(5, 0, 0, 0.11);
  -moz-box-shadow:    -2px 3px 2px 0px rgba(5, 0, 0, 0.11);
  box-shadow:         -2px 3px 2px 0px rgba(5, 0, 0, 0.11);
}

li {
   color: #bed1df;
   margin: 0;
   font-family: 'Open Sans', sans-serif;
   font-size: 0.75em;
   list-style: none;
}

li.level-one {
  font-size: 1.5em;
  text-align: center;
  border-top: 1px solid #bed1df;
  cursor: pointer;
}

li.level-one:first-child {
  border-top: none;
}

li.level-one:hover {
  background: rgba(255,255,255,1);
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(233,238,242,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9eef2', GradientType=0 );
}

#selected {
  background: #3f8eb9;
  -webkit-box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.45);
  -moz-box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.45);
  box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.45);
}

i {
  color: #bed1df;
  margin: 25%;
}

p {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8em; 
  color: #bed1df;
  margin: 50px;
}

a {
  color: #3f8eb9;
  text-decoration: none;
}

.level-one {
  position: relative;
}

.level-two {
  display: none;
  position: absolute;
  height: 50px;
  width: 100px;
  background: #FFFFFF;
  border-radius: 4px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.65em; 
  text-align: center;
}

.level-two:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 9px 9px 9px 0;
  border-color: transparent  #fff;
  display: block;
  width: 0;
  z-index: 1;
  left: -9px;
  top: 15px;
}

.level-two li {
  margin: 15px;
}

.level-one:hover > .level-two {
  display: block;
}

.level-two {
  left: 130%;
  top: 0;
}

View Code

澳门新浦京电子游戏 19

在线演示 
      源码下载

5.jQuery图片垂直滚动焦点图 导航带图标

今天我们要再来分享一款很实用的jQuery焦点图插件,这款jQuery焦点图的图片是垂直分组滚动的,你可以自定义图片组,也可以定义图片组中图片的数量,鼠标滑过指定的导航上时,相应的图片组即可上下切换,另外,焦点图的切换导航上有小图标,显得更加美观。

澳门新浦京电子游戏 20

在线演示

源码下载

4、100多个纯CSS3动画图标

这里总共有100多个纯CSS3实现的动画图标,找找看,总有一个适合你。

澳门新浦京电子游戏 21

在线演示源码下载

纯CSS3背景渐变按钮 按钮图标淡入淡出动画

这是一组带有动画效果的HTML5按钮,鼠标滑过按钮时将出现背景渐变的动画特效。

核心CSS代码:

澳门新浦京电子游戏 22澳门新浦京电子游戏 23

.test{
    width:320px;
    height:90px;
    margin:30px auto;
    background:-webkit-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
    background:-moz-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
    background:-ms-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
    background:-o-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
    background:#A9DB80;
    box-shadow:0 0 3px #999;
    border-radius:3px;
    transition:1s all ease;
    -webkit-transition:0.5s all ease;
    -moz-transition:0.5s all ease;
    -ms-transition:0.5s all ease;
    -o-transition:0.5s all ease;
    overflow:hidden;
}
.test .aLink{
    display:block;
    width:318px;
    height:88px;
    background:-webkit-linear-gradient(center top , #FFF 2%);
    background:-moz-linear-gradient(center top , #FFF 2%);
    background:-ms-linear-gradient(center top , #FFF 2%);
    background:-o-linear-gradient(center top , #FFF 2%);
    box-shadow:0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
    border-radius:3px;
    -webkit-border-radius:3px;
    -ms-border-radius:3px;
    position:relative;
    text-decoration:none;
    border:#484848 solid 1px;
    overflow:hidden;

}
.test .aLink .txt{
    position:absolute;
    font-size:28px;
    color:#6D954E;
    left:18px;
    top:26px;
    opacity:0;
    -webkit-transition:0.2s all ease;
    -moz-transition:0.2s all ease;
    -ms-transition:0.2s all ease;
    -o-transition:0.2s all ease;
    transition:0.2s all ease;
}
.test .aLink .img{
    position:absolute;
    width:70px;
    height:70px;
    display:block;
    z-index:2;
    top:12px;
    left:10px;
    -webkit-transition:0.2s all ease;
    -moz-transition:0.2s all ease;
    -ms-transition:0.2s all ease;
    -o-transition:0.2s all ease;
    transition:0.2s all ease;
}
.test .aLink .txt2{
    font-size:32px;
    color:#FFF;
    width:140px;
    overflow:hidden;
    display:block;
    text-shadow:0 0 2px #999999;
    position:absolute;
    left:80px;
    text-align:center;
    top:10px;
    font-family:"Comic Sans MS", cursive;
}
.test .aLink .txt2 span{
    font-size:14px;
    color:#FFF;
    display:block;
}
.test .aLink .btn{
    width:80px;
    display:block;
    height:88px;
    position:absolute;
    right:0;
    top:0;
    border-left:#484848 solid 1px;
    box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
    -webkit-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
    -ms-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
    -moz-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
    -o-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
}
.test .aLink .btn span{
    display:block;
    width:40px;
    height:40px;
    background:url(img/arrow_down.png) center center no-repeat #333;
    margin:24px auto;
    border-radius:50%;
    -webkit-transition:0.3s all ease;
    -moz-transition:0.3s all ease;
    -ms-transition:0.3s all ease;
    -o-transition:0.3s all ease;
}

/*动画*/
.test:hover{
    box-shadow:0 0 10px #666;
    box-shadow:0 0 10px #666;
}
.test:hover .img{
    width:150px;
    height:150px;
    left:-26px;
    top:-30px;
    opacity:0;
}
.test:hover .txt{
    opacity:1;
}

.test:active{
    box-shadow:0 0 0px #999;
    background:-webkit-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
    background:-moz-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
    background:-ms-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
    background:-o-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
}
.test:active .aLink{
    box-shadow:inset 2px 2px 3px #666666;
}
.test:active .btn{
    box-shadow:inset 1px 1px 1px #666666;
    box-shadow:inset 1px 1px 1px #666666);
}
.test:active .txt{
    color:#A9DB80;
}
.test:active .btn span{
    width:60px;
    height:60px;
    margin-top:15px;
    background-size:60%;
}

View Code

澳门新浦京电子游戏 24

在线演示     
  源码下载

6.jQuery垂直手风琴菜单 菜单项带小图标

关于手风琴菜单,我们在之前的文章中也已经分享过很多了,比如jQuery 3D
垂直多级菜单、jQuery多层级垂直手风琴菜单以及CSS3垂直手风琴折叠菜单。今天要介绍的这款jQuery垂直手风琴菜单的菜单项带有漂亮的小图标,让我们可以更直观的指导菜单项的功能。

澳门新浦京电子游戏 25

在线演示

源码下载

5、HTML5/CSS3动画相册

这款HTML5相册的特点是我们可以将照片随意放置在桌面上,图片可以任意倾斜,看上去很自然。

澳门新浦京电子游戏 26

在线演示源码下载

动感的CSS3 Loading文字特效

澳门新浦京电子游戏 27

在线演示 
   
  源码下载

7.HTML5翻牌消除小游戏

这是一款基于HTML5的翻牌游戏,当翻出的2张牌相同的话,就可以将牌消除。如果你对HTML5熟悉的话,可以自己扩大游戏的矩阵,让游戏难度稍稍加大。另外,这款HTML5游戏可能对你来说并没有太多用处,但是你可以学习里面的HTML5代码。

澳门新浦京电子游戏 28

在线演示

源码下载

6、HTML5 Canvas模拟衣服撕扯动画

该HTML5动画会捕获到鼠标拖拽的用力程度,从而来判断并实现衣服应该破损的程度,越用力,衣服被撕破的速度越快,赶紧来体验一下这个HTML5动画吧。

澳门新浦京电子游戏 29

在线演示源码下载

纯CSS3实现滑杆开关切换按钮动画

很不错的自定义radiobox效果,非常有创意

澳门新浦京电子游戏 30澳门新浦京电子游戏 31

.switch {
    display: inline-block;
    margin: 10em 2em;
    position: relative;
    border-radius: 3.5em;
    -webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
    -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
    box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
}

.switch label {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.switch input {
    display: none;
}

.switch span {
    display: block;
    -webkit-transition: top 0.2s;
    -moz-transition: top 0.2s;
    -ms-transition: top 0.2s;
    -o-transition: top 0.2s;
    transition: top 0.2s;
}

.switch-border1 {
    border: 0.1em solid #000;
    border-radius: 3.5em;
    -webkit-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
    -moz-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
    box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
}

.switch-border2 {
    width: 6.6em;
    height: 12.6em;
    position: relative;
    border: 0.1em solid #323232;
    background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
    background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
    border-radius: 3.4em;
}

.switch-border2:before,
.switch-border2:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: .3;
    border-radius: 3.4em;
}

.switch-border2:before {
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0)));
    background: -webkit-linear-gradient(#000, rgba(0,0,0,0));
    background: -moz-linear-gradient(#000, rgba(0,0,0,0));
    background: -ms-linear-gradient(#000, rgba(0,0,0,0));
    background: -o-linear-gradient(#000, rgba(0,0,0,0));
    background: linear-gradient(#000, rgba(0,0,0,0));
}

.switch-border2:after {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000));
    background: -webkit-linear-gradient(rgba(0,0,0,0), #000);
    background: -moz-linear-gradient(rgba(0,0,0,0), #000);
    background: -ms-linear-gradient(rgba(0,0,0,0), #000);
    background: -o-linear-gradient(rgba(0,0,0,0), #000);
    background: linear-gradient(rgba(0,0,0,0), #000);
}

.switch-top {
    width: 100%;
    height: 84%;
    position: absolute;
    top: 8%;
    left: 0;
    z-index: 1;
    background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
    background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
    background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
    border-radius: 3.4em;
}

.switch-shadow {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    border-radius: 3.4em;
    -webkit-box-shadow: 0 0 2em black inset;
    -moz-box-shadow: 0 0 2em black inset;
    box-shadow: 0 0 2em black inset;
}

.switch-handle-left,
.switch-handle-right {
    content: '';
    display: block;
    width: 3.6em;
    height: 0;
    position: absolute;
    top: 6.6em;
    z-index: 2;
    border-bottom: 4.5em solid #111;
    border-left: 0.7em solid transparent;
    border-right: 0.7em solid transparent;
    border-radius: 0;
}

.switch-handle-left {
    left: 0.8em;
}

.switch-handle-right {
    right: 0.8em;
}

.switch-handle {
    width: 3.6em;
    height: 4.5em;
    position: absolute;
    top: 6.6em;
    left: 1.5em;
    z-index: 3;
    background: #333;
    background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));
    background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);
    border-radius: 0;
}

.switch-handle-top {
    width: 5em;
    height: 5em;
    position: absolute;
    top: 8.5em;
    left: 0.8em;
    z-index: 4;
    background-color: #555;
    background-image: -webkit-gradient(linear, left top, right top, from(#5F5F5F), to(#878787));
    background-image: -webkit-linear-gradient(left, #5F5F5F, #878787);
    background-image: -moz-linear-gradient(left, #5F5F5F, #878787);
    background-image: -ms-linear-gradient(left, #5F5F5F, #878787);
    background-image: -o-linear-gradient(left, #5F5F5F, #878787);
    background-image: linear-gradient(to right, #5F5F5F, #878787);
    border-top: 0.2em solid #AEB2B3;
    border-radius: 2.5em;
}

.switch-handle-bottom {
    width: 3.6em;
    height: 3.6em;
    position: absolute;
    top: 4.7em;
    left: 1.5em;
    z-index: 3;
    background: #333;
    background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));
    background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
    background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);
    border-top: 0.2em solid #141414;
    border-radius: 1.8em;
}

.switch-handle-base {
    width: 4.2em;
    height: 4.2em;
    position: absolute;
    top: 3.8em;
    left: 1.2em;
    z-index: 2;
    border-top: 0.2em solid rgba(255,255,255,0.35);
    border-radius: 2.1em;
    -webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
    -moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
    box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
}

.switch-led {
    position: absolute;
    left: 2em;
    border-radius: 1.4em;
}

.switch-led-border {
    border: 0.2em solid black;
    border-radius: 1.3em;
}

.switch-led-light {
    border-radius: 1.1em;
    -webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
    -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
    box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
}

.switch-led-glow {
    width: 2em;
    height: 2em;
    position: relative;
    border-radius: 1em;
}

.switch-led-glow:before {
    content: '';
    display: block;
    width: 0.6em;
    height: 0.6em;
    position: absolute;
    top: 0.3em;
    left: 0.7em;
    background: rgba(255,255,255,0.2);
    border-radius: 0.3em;
    -webkit-box-shadow: 0 0 1em rgba(255,255,255,0.75);
    -moz-box-shadow: 0 0 1em rgba(255,255,255,0.75);
    box-shadow: 0 0 1em rgba(255,255,255,0.75);
}

.switch-led-glow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.2;
    filter: alpha(opacity=20);
    border: 1em solid #fff;
    border-color: transparent #fff transparent #fff;
    border-radius: 1em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.switch-led:after {
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    color: #666;
    font-family: arial, verdana, sans-serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0.1em rgba(0,0,0,0.7);
}

.switch-led-green:after {
    content: 'ON';
    top: -1.8em;
}

.switch-led-red:after {
    content: 'OFF';
    bottom: -1.8em;
}

.switch-led-green {
    top: -5em;
    border-top: 0.1em solid rgba(0,161,75,0.5);
    border-bottom: 0.1em solid rgba(255,255,255,0.25);
}

.switch-led-green .switch-led-light {
    background: rgb(0,161,75);
    border: 0.1em solid rgb(0,104,56);
}

.switch-led-red {
    bottom: -5em;
    border-top: 0.1em solid rgba(237,28,36,0.2);
    border-bottom: 0.1em solid rgba(255,255,255,0.25);
    -webkit-box-shadow: 0 0 3em rgb(237,28,36);
    -moz-box-shadow: 0 0 3em rgb(237,28,36);
    box-shadow: 0 0 3em rgb(237,28,36);
}

.switch-led-red .switch-led-light {
    background: rgb(237,28,36);
    border: 0.1em solid rgb(161,30,45);
}

.switch-led-red .switch-led-glow {
    background: #fff;
    background: rgba(255, 255, 255, 0.3);
    filter: alpha(opacity=30);
}

/* Switch on */

.switch input:checked~.switch-handle-left, .switch input:checked~.switch-handle-right {
    top: 1.5em;
    border-bottom: 0;
    border-top: 4.5em solid #111;
}

.switch input:checked~.switch-handle {
    top: 1.5em;
}

.switch input:checked~.switch-handle-top  {
    top: -1em;
    border-top: 0;
    border-bottom: 0.2em solid #AEB2B3;
}

.switch input:checked~.switch-handle-bottom {
    top: 4.2em;
    border-top: 0;
    border-bottom: 0.2em solid #141414;
}

.switch input:checked~.switch-handle-base {
    top: 4.5em;
    border-top: 0;
    border-bottom: 0.2em solid rgba(255,255,255,0.35);
}

.switch input:checked~.switch-led-green {
    -webkit-box-shadow: 0 0 3em rgb(0,161,75);
    -moz-box-shadow: 0 0 3em rgb(0,161,75);
    box-shadow: 0 0 3em rgb(0,161,75);
}

.switch input:checked~.switch-led-green .switch-led-glow {
    background: #fff;
    background: rgba(255, 255, 255, 0.4);
    filter: alpha(opacity=40);
}

.switch input:checked~.switch-led-red {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.switch input:checked~.switch-led-red .switch-led-glow {
    background: rgba(255, 255, 255, 0);
    filter: alpha(opacity=0);
}

View Code

澳门新浦京电子游戏 32

在线演示 
      源码下载

8.jQuery交互式分享按钮 可横向展开

之前我们为大家分享过很多炫酷的分享按钮了,比如纯CSS3实现分享按钮
包含常用社交网站按钮和HTML5/CSS3社会化分享按钮,都不仅很漂亮,而且都非常实用。这次要给大家介绍一款基于jQuery的交互式分享按钮,它的特点是点击分享即可横向展开全部社交网站相应的分享按钮。

澳门新浦京电子游戏 33

在线演示

源码下载

7、jQuery/CSS3带Tooltip的滑杆动画

这是一个带有Tooltip提示框的滑杆,基于jQuery和CSS3,外观样式非常不错。

澳门新浦京电子游戏 34

在线演示源码下载

HTML5/CSS3多颜色柱状图表 带基准数据线

这款是基于HTML5的水平柱形图,带有基准线。

核心jQuery代码:

澳门新浦京电子游戏 35澳门新浦京电子游戏 36

$(document).ready(function(){
  $('.bar').each(function(i, elem){
    drawBar(elem);
  });

  $('.measure').each(function(i, elem){
    drawMeasure(elem);
  });

  $('a.redraw').click(function(e){
    e.preventDefault();
    $('.bar').each(function(i, elem){
      randomiseBar(elem);
    });
    $('.measure').each(function(i, elem){
      randomiseMeasure(elem);
    });

  });

  function drawBar(bar) {
    var percentage = $(bar).data('percentage');
    if(percentage > 100){
      percentage = 100;
    }
    $(bar).animate({'width': percentage + '%'}, 'slow');
  }

  function randomiseBar(bar) {
    var width =  Math.floor(Math.random() * (100 - 20 + 1)) + 20;
    $(bar).animate({'width': width + '%'}, 'slow');
    $(bar).attr('data-percentage', width);
  }

  function drawMeasure(measure) {
    var percentage = $(measure).data('percentage');
    if(percentage > 100){
      percentage = 100;
    }
    $(measure).animate({'width': percentage + '%'}, 'slow');
  }

  function randomiseMeasure(measure) {
    var width =  Math.floor(Math.random() * (100 - 20 + 1)) + 20;
    $(measure).animate({'width': width + '%'}, 'slow');
    $(measure).attr('data-percentage', width);
  }


});

View Code

澳门新浦京电子游戏 37

在线演示 
   
  源码下载

9.jQuery打字机文字特效 可自定义打字参数

今天要向大家分享一款jQuery打字机文字特效插件,类似这样的jQuery插件我们以前没有分享过,因此这次隆重向大家推荐这款jQuery打字机插件,因为它不仅代码很小,而且可以进行灵活的参数配置,让我们开发者使用起来非常方便。

澳门新浦京电子游戏 38

在线演示

源码下载

8、5个可爱的CSS3 Loading加载动画

这是一款可爱的CSS3
Loading动画,一共有5种动画类型,每组Loading动画都非常有创意。

澳门新浦京电子游戏 39

在线演示源码下载

以上8款不错的HTML5动画应用希望你会喜欢,也可以下载源码来研究。

10.HTML5 Canvas气温折线图表 带Tooltip提示框

今天要给大家带来一款基于HTML5 Canvas的折线图表应用,它主要用来显示指定日期的气温变化趋势,当我们将鼠标滑过折线图上时,图表上即可显示一个Tooltip提示框,提示框中显示当前的天气状况及气温情况。当然这款HTML5图表也可以在其他地方使用。

澳门新浦京电子游戏 40

在线演示

源码下载

本文固定链接: 

发表评论

电子邮件地址不会被公开。 必填项已用*标注