【亚洲必赢官网】jQuery制作视频播放器完全指南,惊艳的HTML5动画特效及源码

HTML5+CSS3+jQuery制作视频播放器完全指南

2012/05/12 · HTML5 · 2
评论 ·
CSS3,
HTML5

英文原稿:designmodo.com,编译:王然@CSDN

导读:自然HTML5已经是迟早,盛名视频网站YouTube在两年前就开端加大HTML5播放器来代替Flash。就算国内还尚无完全普及HTML5浏览器,但在各大本土浏览器厂商的竭力下,援救HTML5的浏览器在中原浏览器市场的占有率也在不停压实中。本学科将会手把手地教你制作一个基于HTML5&
CSS3& JavaScript 技术的视频播放器。

1.下载MediaElement.js

第一下载MediaElement.js本子文件,那是一个开源的HTML5音、视频插件,解压后您会获取3个文本——
“flashmediaelement.swf”、 “mediaelement-and-player.min.js”和
“silverlightmediaelement.xap” ,分别是采用Flash、 JavaScript和
SilverLight完结摄像播放,并且新建一个”js”文件夹并把它们放进去(当然本例中并不须求“flashmediaelement.swf” 和 “silverlightmediaelement.xap”
五个文件,可以去除。)。

2.HTML标记

第一需求链接(link)一个jQuery库,那里运用的是谷歌(Google)托管的jQuery库。然后大家在链接”mediaelement-and-player.min.js”文件和CSS文件。

XHTML

<head> <title>Video Player</title> <script
src=”;
<script src=”js/mediaelement-and-player.min.js”></script>
<link rel=”stylesheet” href=”css/style.css” media=”screen”>
</head>

1
2
3
4
5
6
<head>
    <title>Video Player</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="js/mediaelement-and-player.min.js"></script>
    <link rel="stylesheet" href="css/style.css" media="screen">
</head>

当然大家还索要添加一个HTML5
video标记来创建一个摄像播放器,再添加一些属性将它开首化。(注:poster是指视频的预览图)

XHTML

<video width=”640″ height=”267″ poster=”media/cars.png”>
<source src=”media/cars.mp4″ type=”video/mp4″> </video>

1
2
3
<video width="640" height="267" poster="media/cars.png">
    <source src="media/cars.mp4" type="video/mp4">
</video>

接下去大家再进入上边的代码来创建控制面板,需求添加的控制器或效益有:

● alwaysShowControls –
“true”则设置video控制面板永远显示,”false”则在鼠标移走后逃匿。

● videoVolume – “horizontal”设置音量滑动控制器为水平

● 其余效用:暂停播放、前进播放、声音和全屏

JavaScript

<script type=”text/javascript”>// <![CDATA[
$(document).ready(function() { $(‘video’).mediaelementplayer({
alwaysShowControls: true, videoVolume: ‘horizontal’, features:
[‘playpause’,’progress’,’volume’,’fullscreen’] }); }); //
]]></script>

1
2
3
4
5
6
7
8
9
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
    $(‘video’).mediaelementplayer({
        alwaysShowControls: true,
        videoVolume: ‘horizontal’,
        features: [‘playpause’,’progress’,’volume’,’fullscreen’]
    });
});
// ]]></script>

更多安装请查阅MediaElement.js的安装文档。

3.播放器基本样式设计

先修改一下样式设置:

CSS

.mejs-inner, .mejs-inner div, .mejs-inner a, .mejs-inner span,
.mejs-inner button, .mejs-inner img { margin: 0; padding: 0; border:
none; outline: none; }

1
2
3
4
5
6
7
8
9
10
11
.mejs-inner,
.mejs-inner div,
.mejs-inner a,
.mejs-inner span,
.mejs-inner button,
.mejs-inner img {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

再给video
container添加样式,下边的代码全部都是用来决定布局的,没有对播放器样式做任何修改。

CSS

.mejs-container { position: relative; background: #000000; }
.mejs-inner { position: relative; width: inherit; height: inherit; }
.me-plugin { position: absolute; } .mejs-container-fullscreen
.mejs-mediaelement, .mejs-container-fullscreen video, .mejs-embed,
.mejs-embed body, .mejs-mediaelement { width: 100%; height: 100%; }
.mejs-embed, .mejs-embed body { margin: 0; padding: 0; overflow: hidden;
} .mejs-container-fullscreen { position: fixed; left: 0; top: 0; right:
0; bottom: 0; overflow: hidden; z-index: 1000; } .mejs-background,
.mejs-mediaelement, .mejs-poster, .mejs-overlay { position: absolute;
top: 0; left: 0; } .mejs-poster img { display: block; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.mejs-container {
    position: relative;
    background: #000000;
}
 
.mejs-inner {
    position: relative;
    width: inherit;
    height: inherit;
}
 
.me-plugin { position: absolute; }
 
.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video,
.mejs-embed,
.mejs-embed body,
.mejs-mediaelement {
    width: 100%;
    height: 100%;
}
 
.mejs-embed,
.mejs-embed body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
 
.mejs-container-fullscreen {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1000;
}
 
.mejs-background,
.mejs-mediaelement,
.mejs-poster,
.mejs-overlay {
    position: absolute;
    top: 0;
    left: 0;
}
 
.mejs-poster img { display: block; }

 

亚洲必赢官网 1

4.控制面板样式设置

让我们先从增加“播放按钮”开端:

CSS

.mejs-overlay-play { cursor: pointer; } .mejs-inner .mejs-overlay-button
{ position: absolute; top: 50%; left: 50%; width: 50px; height: 50px;
margin: -25px 0 0 -25px; background: url(../img/play.png) no-repeat; }

1
2
3
4
5
6
7
8
9
10
11
.mejs-overlay-play { cursor: pointer; }
 
.mejs-inner .mejs-overlay-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    background: url(../img/play.png) no-repeat;
}

接下去再添加摄像控制器布局:将它座落视频尾部,中度为34px,再添加一个背景颜色,合营RGBA来安装透明度。最终给按钮添加基本样式和图元。

CSS

.mejs-container .mejs-controls { position: absolute; width: 100%;
height: 34px; left: 0; bottom: 0; background: rgb(0,0,0); background:
rgba(0,0,0, .7); } .mejs-controls .mejs-button button { display: block;
cursor: pointer; width: 16px; height: 16px; background: transparent
url(../img/controls.png); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.mejs-container .mejs-controls {
    position: absolute;
    width: 100%;
    height: 34px;
    left: 0;
    bottom: 0;
    background: rgb(0,0,0);
    background: rgba(0,0,0, .7);
}
 
.mejs-controls .mejs-button button {
    display: block;
    cursor: pointer;
    width: 16px;
    height: 16px;
    background: transparent url(../img/controls.png);
}

 

亚洲必赢官网 2

5.视频控制器

这一步大家要做的只是将控制器居右放置。所以率先我们将具备的按钮放到控制面板上,之后再对它们的幅度、地方和背景图片做详细的调整。

CSS

.mejs-controls div.mejs-playpause-button { position: absolute; top:
12px; left: 15px; } .mejs-controls .mejs-play button, .mejs-controls
.mejs-pause button { width: 12px; height: 12px; background-position: 0
0; } .mejs-controls .mejs-pause button { background-position: 0 -12px; }
.mejs-controls div.mejs-volume-button { position: absolute; top: 12px;
left: 45px; } .mejs-controls .mejs-mute button, .mejs-controls
.mejs-unmute button { width: 14px; height: 12px; background-position:
-12px 0; } .mejs-controls .mejs-unmute button { background-position:
-12px -12px; } .mejs-controls div.mejs-fullscreen-button { position:
absolute; top: 7px; right: 7px; } .mejs-controls .mejs-fullscreen-button
button, .mejs-controls .mejs-unfullscreen button { width: 27px; height:
22px; background-position: -26px 0; } .mejs-controls .mejs-unfullscreen
button { background-position: -26px -22px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.mejs-controls div.mejs-playpause-button {
    position: absolute;
    top: 12px;
    left: 15px;
}
 
.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
    width: 12px;
    height: 12px;
    background-position: 0 0;
}
 
.mejs-controls .mejs-pause button { background-position: 0 -12px; }
 
.mejs-controls div.mejs-volume-button {
    position: absolute;
    top: 12px;
    left: 45px;
}
 
.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
    width: 14px;
    height: 12px;
    background-position: -12px 0;
}
 
.mejs-controls .mejs-unmute button { background-position: -12px -12px; }
 
.mejs-controls div.mejs-fullscreen-button {
    position: absolute;
    top: 7px;
    right: 7px;
}
 
.mejs-controls .mejs-fullscreen-button button,
.mejs-controls .mejs-unfullscreen button {
    width: 27px;
    height: 22px;
    background-position: -26px 0;
}
 
.mejs-controls .mejs-unfullscreen button { background-position: -26px -22px; }

 

亚洲必赢官网 3

6.音量滑行控制器

高低滑动控制器的设置也一样,设置好职位和分寸,再添加一个圆角效果就可以了。

CSS

.mejs-controls div.mejs-horizontal-volume-slider { position: absolute;
cursor: pointer; top: 15px; left: 65px; } .mejs-controls
.mejs-horizontal-volume-slider .mejs-horizontal-volume-total { width:
60px; background: #d6d6d6; } .mejs-controls
.mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
position: absolute; width: 0; top: 0; left: 0; } .mejs-controls
.mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-controls .mejs-horizontal-volume-slider
.mejs-horizontal-volume-current { height: 4px; -webkit-border-radius:
2px; -moz-border-radius: 2px; border-radius: 2px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.mejs-controls div.mejs-horizontal-volume-slider {
    position: absolute;
    cursor: pointer;
    top: 15px;
    left: 65px;
}
 
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    width: 60px;
    background: #d6d6d6;
}
 
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    position: absolute;
    width: 0;
    top: 0;
    left: 0;
}
 
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    height: 4px;
 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

 

亚洲必赢官网 4

7.进度条

进程条的设置也同样简单,将它紧贴在控制面板上方就足以了,之后就是设置差别意况(all和loaded状态)的背景颜色。现在将它起初化为零就足以在电影播放时自动改变了。(不过你看不出来。)

CSS

.mejs-controls div.mejs-time-rail { position: absolute; width: 100%;
left: 0; top: -10px; } .mejs-controls .mejs-time-rail span { position:
absolute; display: block; cursor: pointer; width: 100%; height: 10px;
top: 0; left: 0; } .mejs-controls .mejs-time-rail .mejs-time-total {
background: rgb(152,152,152); background: rgba(152,152,152, .5); }
.mejs-controls .mejs-time-rail .mejs-time-loaded { background:
rgb(0,0,0); background: rgba(0,0,0, .3); } .mejs-controls
.mejs-time-rail .mejs-time-current { width: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.mejs-controls div.mejs-time-rail {
    position: absolute;
    width: 100%;
    left: 0;
    top: -10px;
}
 
.mejs-controls .mejs-time-rail span {
    position: absolute;
    display: block;
    cursor: pointer;
    width: 100%;
    height: 10px;
    top: 0;
    left: 0;
}
 
.mejs-controls .mejs-time-rail .mejs-time-total {
    background: rgb(152,152,152);
    background: rgba(152,152,152, .5);
}
 
.mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: rgb(0,0,0);
    background: rgba(0,0,0, .3);
}
 
.mejs-controls .mejs-time-rail .mejs-time-current { width: 0; }

 

亚洲必赢官网 5

8.进程条控制器和岁月提示框

这一步就该给进程条添加一个进程条控制器和一个岁月提示框,同样我们如故调整职分,设置宽度、中度和背景图片,再添加一些排版样式。

CSS

.mejs-controls .mejs-time-rail .mejs-time-handle { position: absolute;
cursor: pointer; width: 16px; height: 18px; top: -3px; background:
url(../img/handle.png); } .mejs-controls .mejs-time-rail
.mejs-time-float { position: absolute; display: none; width: 33px;
height: 23px; top: -26px; margin-left: -17px; background:
url(../img/tooltip.png); } .mejs-controls .mejs-time-rail
.mejs-time-float-current { position: absolute; display: block; left: 0;
top: 4px; font-family: Helvetica, Arial, sans-serif; font-size: 10px;
font-weight: bold; color: #666666; text-align: center; } .mejs-controls
.mejs-time-rail .mejs-time-float-corner { display: none; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.mejs-controls .mejs-time-rail .mejs-time-handle {
    position: absolute;
    cursor: pointer;
    width: 16px;
    height: 18px;
    top: -3px;
    background: url(../img/handle.png);
}
 
.mejs-controls .mejs-time-rail .mejs-time-float {
    position: absolute;
    display: none;
    width: 33px;
    height: 23px;
    top: -26px;
    margin-left: -17px;
    background: url(../img/tooltip.png);
}
 
.mejs-controls .mejs-time-rail .mejs-time-float-current {
    position: absolute;
    display: block;
    left: 0;
    top: 4px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #666666;
    text-align: center;
}
 
.mejs-controls .mejs-time-rail .mejs-time-float-corner { display: none; }

 

亚洲必赢官网 6

9.紫色的已播放进度条

本学科的末尾一步就是在进度条和音量滑动条上添加灰色的已播放进度条和音量显示,那一个也很粗略。

CSS

.mejs-controls .mejs-time-rail .mejs-time-current, .mejs-controls
.mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
background: #82d344; background: -webkit-linear-gradient(top, #82d344
0%, #51af34 100%); background: -moz-linear-gradient(top, #82d344 0%,
#51af34 100%); background: -o-linear-gradient(top, #82d344 0%,
#51af34 100%); background: -ms-linear-gradient(top, #82d344 0%,
#51af34 100%); background: linear-gradient(top, #82d344 0%, #51af34
100%); }

1
2
3
4
5
6
7
8
9
.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background: #82d344;
    background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%);
    background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%);
    background: -o-linear-gradient(top, #82d344 0%, #51af34 100%);
    background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%);
    background: linear-gradient(top, #82d344 0%, #51af34 100%);
}

 

亚洲必赢官网 7

总结:虽说很简短,但那确实是一个很科学的开源(CC许可证3.0)视频播放器!经过设置还足以支撑种种视频格式,所以它不只好被用来做网络视频播放器,如若你还乐于给它增添一些功力,甚至可以把它可以做成跨平台的地面视频播放器。

Demo下载地址:

● 本地下载

● designmodo.com

 

赞 3 收藏 2
评论

亚洲必赢官网 8

惊艳的HTML5动画特效及源码,

明日我们要来分享部分很酷的HTML5动画片演示,HTML5的精锐之处在于它可以利用canvas的特性来绘制很多司空见惯网页不可以做到的图形和动画片,canvas就如一块一级画板,在上头不仅可以落成平面图形,而且有的3D动画片也卓殊不难。很多HTML5动画片也都根据canvas,一起来探望啊。

@charset “utf-8”;

点评:昨天大家将介绍,怎么样使用css3形成google涂鸦动画。当您点击demo页面的【开始】按钮之后,页面中的骑手和马匹将会移动起来,须求的对象可以了然下

HTML5/CSS3完成疾风车旋转动画

用作前些天首款HTML5动画,这款大风车旋转效果的确卓殊棒,它是用纯CSS3兑现。

核心CSS代码:

亚洲必赢官网 9.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

亚洲必赢官网 10

在线演示        源码下载

/* reset */
body,h1,h2,h3,h4,h5,p,dl,dd,ul,ol,form,input,textarea,th,td,select {
margin:0; padding:0; }
em { font-style:normal; }
li { list-style:none; }
a { text-decoration:none; }
img { border:none; vertical-align:top; }
table { border-collapse:collapse; }
input,textarea { outline:none; }
textarea { resize:none; overflow:auto; }
body { font-size:12px; font-family:”微软雅黑”; }
/* end reset */

今天大家将介绍,怎样使用css3达成google涂鸦动画。当您点击demo页面的【先河】按钮之后,页面中的骑手和马匹将会移动兴起,
  这里要求强调的少数是,ie不协助css3的卡通属性,再一次抱怨下万恶的ie。可是大家不可以以此为理由不去拥抱css3。
  大家先来看html代码。

纯CSS3 3D图片翻转呈现

那是一款基于CSS3的3D图片突显,在图纸切换时将会有扭动的卡通片效果。

核心CSS代码:

亚洲必赢官网 11.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: #【亚洲必赢官网】jQuery制作视频播放器完全指南,惊艳的HTML5动画特效及源码。515151; } View Code

亚洲必赢官网 12

在线演示        源码下载

/* public */
.clear { zoom:1; }
.clear:after { content:”; display:block; clear:both; }
.fl { float:left; }
.fr { float:right; }
.gradient {
background:-moz-linear-gradient(top, #FFFFFF, #f8f8f8);
background:-webkit-linear-gradient(top, #FFFFFF, #f8f8f8);
background:-ms-linear-gradient(top, #FFFFFF, #f8f8f8);
background:linear-gradient(top, #FFFFFF, #f8f8f8);
-ms-filter:”progid:DXImageTransform.Microsoft.gradient (GradientType=0,
startColorstr=#FFFFFF, endColorstr=#f8f8f8)”;
+background:#f9f9f9;
}
.triangle_up, .triangle_down_red, .triangle_down_gray {
position:absolute; width:0; height:0; overflow:hidden; border-left:4px
solid transparent; border-right:4px solid transparent; }
.triangle_up { border-bottom:4px solid #ca0309; }
.triangle_down_red { border-top:4px solid #ca0309; }
.triangle_down_gray { border-top:4px solid #c4bdbd; }
/* end public */

代码如下:

精美的CSS3动画进度条

那是一款闪闪发光的CSS3进程条,进程条在初阶化的时候还有滑动的动画片特效。

核心jQuery代码:

亚洲必赢官网 13(function()
{ $(document).ready(function() { return $(“.bar”).each(function(i, elem)
{ return $(elem).addClass(‘active’); }); }); }).call(this); View Code

亚洲必赢官网 14

在线演示        源码下载

/* layout */
#header, #nav, .content { width:960px; margin:0 auto; }
#search, .section, .login, .side_section, .ad_border, #footer,
.activity, .recommend { border-radius:6px; border:1px solid #dbdbdb;
}
.main_ad, .side_section, .side_ad, .ad_border { margin-bottom:10px;
}

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel=”stylesheet” type=”text/css”
href=”css/google-doodle-animation-in-css3-without-javascript.css”/>
</head>
<body>
<div id=”logo”>
<div class=”frame”>
<img src=”img/muybridge12-hp-v.png”/>
</div>
<label for=”play_button” id=”play_label”></label>
<input type=”checkbox” id=”play_button” name=”play_button”/>
<span id=”play_image”>
<img src=”img/muybridge12-hp-p.jpg”/>
</span>
<div class=”horse”></div>
<div class=”horse”></div>
<div class=”horse”></div>
</div>
</body>
</html>

CSS3垂直图标菜单

那是一款不难而舒适的CSS3垂直菜单,鼠标滑过菜单项还有Tooltip的动画片效果。

核心CSS代码:

亚洲必赢官网 15#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

亚洲必赢官网 16

在线演示        源码下载

body { margin-bottom:30px; }
#header { height:30px; border-radius:0 0 6px 6px; }
#nav { height:100px; position:relative; }
#search { width:958px; height:114px; margin:0 auto 10px;
position:relative; }
.main { width:710px; }
.main_wrap { padding-bottom:10px; }
.section { width:318px; padding:0 15px; }
.options { width:350px; position:relative; }
.main_ad { border-radius:6px; overflow:hidden; }
.side { width:240px; }
.side_section { padding:0 12px; }
.side_ad { border-radius:6px; overflow:hidden; }
.ad_border { width:238px; height:88px; overflow:hidden; }
#footer { width:958px; height:64px; padding-top:14px; line-height:25px;
margin:0 auto; background:#f9f9f9; color:#767676; text-align:center;
}
#footer a { color:#454545; margin:0 6px; }
#footer a:hover { text-decoration:underline; }
#footer span { margin-left:10px; }
/* end layout */

上边是有的css。

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

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

核心CSS代码:

亚洲必赢官网 17.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

亚洲必赢官网 18

在线演示        源码下载

.options .nav { height:34px; position:relative; z-index:2; }
.options .nav li { width:172px; height:33px; line-height:33px;
text-align:center; position:relative; border:1px solid #dbdbdb;
border-bottom:none; cursor:pointer; border-radius:6px 6px 0 0; }
.options .nav .active { height:34px; line-height:34px; background:#fff;
}
.options .con { width:318px; padding:0 15px; border:1px solid #dbdbdb;
border-radius:0 0 6px 6px; position:absolute; top:34px; left:0;
z-index:1; }

代码如下:

饱满的CSS3 Loading文字特效

亚洲必赢官网 19

在线演示        源码下载

#header .city { float:left; padding:5px 0 0 20px; color:#666; }
#header .city a { display:inline-block; padding:0 7px; height:18px;
line-height:18px; color:#999; background:#fff; border:1px solid
#e5e5e5; border-radius:4px; box-shadow:1px 1px 0 #ededed; }
#header .city .active,#header .city .active:hover { color:#d60d03;
background:#fff; }
#header .city a:hover { background:#f1f1f1; }
#header .link { float:right; padding-right:20px; line-height:30px;
color:#d5d5d5; word-spacing:4px; }
#header .link a { color:#666;
background:url(../img/header_link_bg.gif) no-repeat 0 3px;
padding-left:20px; }
#header .link a:hover { text-decoration:underline; }
#header .link .ico1 { background-position:0 3px; }
#header .link .ico2 { background-position:0 -27px; }

*{margin:0px;padding:0px;}
#logo{position: relative;}
.horse{
width:469px;
height:54px;
background: url(‘../img/muybridge12-hp-f.jpg’);
}
.frame{position:absolute;left:0;top:0;z-index: 1;}
#play_button{display: none;}
#play_label{
width:67px;
height:54px;
display:block;
position: absolute;
left:201px;
top:54px;
z-index: 2;
}
#play_image{
position: absolute;
left:201px;
top:54px;
z-index: 0;
overflow: hidden;
width: 68px;
height: 55px;
}
#play_image img{
position: absolute;
left: 0;
top: 0;
}

纯CSS3落到实处滑杆开关注换按钮动画

很不错的自定义radiobox效果,卓殊有新意

亚洲必赢官网 20.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

亚洲必赢官网 21

在线演示        源码下载

#nav ul { position:absolute; top:10px; }
#nav li { float:left; }
#nav li a { display:block; width:66px; padding-top:50px;
text-align:center; background:url(../img/nav_bg.png) no-repeat;
color:#333; }
#nav li a:hover { color:#a70c01; font-weight:bold; }
#nav .bg1 { background-position:0 0; }
#nav .bg2 { background-position:-66px 0; }
#nav .bg3 { background-position:-132px 0; }
#nav .bg4 { background-position:-198px 0; }
#nav .bg5 { background-position:-264px 0; }
#nav .bg6 { background-position:-330px 0; }
#nav .bg7 { background-position:-396px 0; }
#nav .bg8 { background-position:-462px 0; }
#nav .bg9 { background-position:-528px 0; }
#nav .bg10 { background-position:-594px 0; }

这一部分代码没太大难度,我就不做详细讲解了。css基础不是很扎实的读者,也许会纳闷【开始】按钮是怎么促成稳定的。能够自行阅读position属性,精通absolute具体作用。
  下面是上述html和css代码完结的页面效果。
pic
上边大家来介绍怎样暴发动画效果。我们先是须求定义关键帧,他确定动画在不一样等级的职能。大家可以经过
通晓越来越多音讯。
  我们创立了一个名为horse-ride的关键帧,针对chrome和firefox须求在头里添加-webkit-或者是-moz-前缀。0%和100%分级代码起始和得了,可以按照须要增添新的case,比如50%时的动画效果。

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

那款是依照HTML5的水平柱形图,带有基准线。

核心jQuery代码:

亚洲必赢官网 22$(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

亚洲必赢官网 23

在线演示        源码下载

#nav .bg1:hover { background-position:0 -70px; }
#nav .bg2:hover { background-position:-66px -70px; }
#nav .bg3:hover { background-position:-132px -70px; }
#nav .bg4:hover { background-position:-198px -70px; }
#nav .bg5:hover { background-position:-264px -70px; }
#nav .bg6:hover { background-position:-330px -70px; }
#nav .bg7:hover { background-position:-396px -70px; }
#nav .bg8:hover { background-position:-462px -70px; }
#nav .bg9:hover { background-position:-528px -70px; }
#nav .bg10:hover { background-position:-594px -70px; }

代码如下:

#nav .nav_1 { left:11px; }
#nav .nav_2 { right:11px; }
#nav h1 { width:223px; height:62px; margin:0 auto; position:relative;
top:10px; }

@-webkit-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}

今日大家要来分享部分很酷的HTML5卡通演示,HTML5的雄强之处在于它可以运用canvas的特征来绘制很多惯常网页无…

#search .bar { width:958px; height:64px; border:1px solid #c40d0e;
position:absolute; top:16px; left:-1px; background:#e21c01;
border-radius:5px; box-shadow:1px 2px 2px rgba(0,0,0,0.15); }
#search .menu { position:absolute; left:226px; top:-27px; }
#search .menu li { float:left; width:78px; height:25px;
margin-right:1px; display:inline-block; border:1px solid #f8d0bf;
border-bottom:none; text-align:center; line-height:25px; font-size:14px;
cursor:pointer; border-radius:5px 5px 0 0; box-shadow:1px 0px 2px
rgba(176,176,176,0.3); }
#search .menu .active { border:1px solid #e21c01; position:relative;
top:-1px; height:27px; background:#e21c01; color:#fff;
font-weight:bold; text-shadow:2px 2px 3px rgba(0,0,0,0.25); }

上面,我们来为horse添加css3的动画片效果。

#search .img { width:163px; height:122px;
background:url(../img/search_img.png) no-repeat; position:absolute;
left:32px; top:-3px; z-index:2; }

代码如下:

#search .form { position:absolute; left:226px; top:36px; z-index:3; }
#search .form .text { width:380px; height:22px; line-height:22px;
padding:0 12px; border:none; background:#fff1ef; border-radius:3px;
float:left; margin-right:10px; font-size:12px; font-family:’微软雅黑’;
color:#ea7a7a; box-shadow:inset 2px 2px 3px rgba(0,0,0,0.25); }
#search .form .btn { width:63px; height:26px; border:none;
background:url(../img/search_img.png) no-repeat -163px 0; float:left; }

#play_button:checked ~.horse{
-webkit-animation:horse-ride 0.5s steps(12,end) infinite;
-webkit-animation-delay:2.5s;
-moz-animation:horse-ride 0.5s steps(12,end) infinite;
-moz-animation-delay:2.5s;
background-position: -2412px 0;
-webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
-moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

#search .key_text { width:206px; color:#fff; line-height:18px;
position:absolute; top:30px; right:36px; }
#search .key_text a { color:#fff; }
#search .key_text a:hover { text-decoration:underline; }

此处首先介绍:checked和~,:checked是伪类,指当#play_button选中时的css效果,~指的是#play_button的哥们节点。
  接下去介绍.horse相关的css属性。animation中大家运用了4个值,依次代表:关键帧(大家地点定义的horse-ride),动画间隔时间,动画效果和进行次数。之后我们又经过animation-delay设置动画延迟时间。通过transition和background-position集合起来,设置背景的衔接动画。
  最终大家为【开首】按钮添加动画效用。

#search .update { width:405px; height:30px; position:absolute;
left:226px; bottom:0; background:url(../img/search_img.png) no-repeat
-226px 8px; }
#search .wrap { width:336px; height:30px; overflow:hidden;
position:relative; left:60px; }
#search .update ul { width:336px; position:absolute; top:0px; left:0;
}
#search .update li { height:30px; line-height:30px; }
#search .update a { color:#000; }
#search .update a:hover { text-decoration:underline; }
#search .update strong { color:#d30703; font-weight:normal; }
#search .update span { color:#999; }
#search .triangle_up { top:8px; right:0; }
#search .triangle_down_red { top:17px; right:0; }

代码如下:

.video_title { height:42px; line-height:42px;
background:url(../img/video_bg.gif) no-repeat 105px 10px;
font-size:18px; font-family:arial; color:#d90000; font-weight:normal;
position:relative; }
.video_title sup { position:absolute; top:-10px; font-family:’宋体’;
}
.video { margin-bottom:13px; }
.video_list { padding-left:75px; height:78px;
background:url(../img/video_bg.gif) no-repeat 3px -47px; }
.video_list li { line-height:20px; text-indent:14px;
background:url(../img/dot.gif) no-repeat 5px center; }
.video_list a { color:#4d4d4d; }
.video_list a:hover { text-decoration:underline; }

#play_button:checked ~#play_image img{
left:-68px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}

.nav li strong, .main_title strong, .login h2 em { color:#cc0d13;
font-family:arial; font-size:12px; }
.nav li span, .main_title span { color:#000; }
.nav .triangle_down_red, .nav .triangle_down_gray { top:14px;
right:12px; }

我们可以协调动手尝试开发了。
  demo下载地址:google-doodle-animation-in-css3-without-javascript.zip明日我们将介绍,怎么样拔取css3达成google涂鸦动画。当您点击demo页面的【发轫】按钮之后,页面中的骑手和马匹将会活动起来,
  那里要求强调的某些是,ie不接济css3的动画片属性,再次抱怨下万恶的ie。可是大家无法以此为理由不去拥抱css3。
  大家先来看html代码。

.main_title { height:40px; line-height:40px; position:relative; }
.main_title sup { position:absolute; top:-2px; left:18px; }
.main_title a { position:absolute; top:15px; right:0; }

代码如下:

.hot_list { height:374px; padding-top:10px; position:relative; }
.hot_list li { width:318px; height:98px; padding-top:10px;
margin-bottom:6px; background:url(../img/hot_list_li_bg.gif);
vertical-align:middle; }
.hot_list .img { float:left; width:106px; height:86px; }
.hot_list .img a { display:block; width:104px; height:84px; border:1px
solid #e6e6e6; }
.hot_list .img a:hover { border:1px solid #929292; }
.hot_list .text { float:right; width:190px; }
.hot_list h3 { line-height:24px; font-size:12px; padding-bottom:6px;
}
.hot_list h3 a { font-weight:normal; color:#bb0d0d; }
.hot_list h3 a:hover { text-decoration:underline; }
.hot_list p { line-height:16px; color:#6e6e6e; }
.hot_list .more { position:absolute; bottom:6px; right:0; }

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel=”stylesheet” type=”text/css”
href=”css/google-doodle-animation-in-css3-without-javascript.css”/>
</head>
<body>
<div id=”logo”>
<div class=”frame”>
<img src=”img/muybridge12-hp-v.png”/>
</div>
<label for=”play_button” id=”play_label”></label>
<input type=”checkbox” id=”play_button” name=”play_button”/>
<span id=”play_image”>
<img src=”img/muybridge12-hp-p.jpg”/>
</span>
<div class=”horse”></div>
<div class=”horse”></div>
<div class=”horse”></div>
</div>
</body>
</html>

.login { height:138px; overflow:hidden; margin-bottom:10px; }
.login h2 { text-indent:12px; color:#000; font-size:12px;
line-height:34px; border-bottom:1px solid #dbdbdb; }
.login .form { width:214px; padding:15px 0 2px; border-bottom:1px solid
#f2f2f2; margin:0 auto; position:relative; }
.login li { height:26px; vertical-align:middle; }
.login li span, .login li input, .login li strong { float:left; }
.login span { float:left; width:58px; color:#595959; word-spacing:7px;
}
.login .text { float:left; width:87px; height:17px; margin-right:3px;
overflow:hidden; border:1px solid #dbdbdb; background:#f7f7f7; }
.login strong { font-weight:normal; padding-left:3px; }
.login .btn { width:54px; height:22px; border:none; background:#cb0000;
color:#fff; font-family:’宋体’; font-size:12px; font-weight:bold;
border-radius:10px; }
.login p { line-height:32px; text-align:center; word-spacing:20px; }
.login p a { padding-left:14px; background:url(../img/dot.gif) no-repeat
4px center; color:#666; }
.login p a:hover { text-decoration:underline; }

上面是一些css。

.help { height:208px; }
.help p { text-indent:2em; }
.help ul { height:44px; line-height:44px; border-bottom:1px solid
#dbdbdb; }
.help li { width:154px; text-indent:30px;
background:url(../img/help.gif) no-repeat; font-family:arial; }
.help .phone { font-size:16px; font-weight:bold; color:#b80000;
background-position:7px 11px; }
.help .msn { background-position:7px -31px; }
.help dl { width:144px; padding:15px 0 0 10px; line-height:18px; }
.help dt { font-weight:bold; padding-bottom:8px; }
.help dd { background:url(../img/dot.gif) no-repeat 4px center;
text-indent:12px; }
.help dd a { color:#333; }
.help dd a:hover { text-decoration:underline; }

代码如下:

.media { height:205px; padding-top:3px; }
.media li { width:318px; height:50px; vertical-align:middle; }
.media a { float:left; width:100px; }
.media p { float:right; width:208px; color:#333; }

*{margin:0px;padding:0px;}
#logo{position: relative;}
.horse{
width:469px;
height:54px;
background: url(‘../img/muybridge12-hp-f.jpg’);
}
.frame{position:absolute;left:0;top:0;z-index: 1;}
#play_button{display: none;}
#play_label{
width:67px;
height:54px;
display:block;
position: absolute;
left:201px;
top:54px;
z-index: 2;
}
#play_image{
position: absolute;
left:201px;
top:54px;
z-index: 0;
overflow: hidden;
width: 68px;
height: 55px;
}
#play_image img{
position: absolute;
left: 0;
top: 0;
}

.tab { height:25px; border-bottom:1px solid #dadada; }
.tab ul { height:26px; margin-bottom:-1px; position:relative; }
.tab li { float:left; height:24px; text-align:center; line-height:24px;
color:#666; border:1px solid #dadada; position:relative;
cursor:pointer; border-radius:4px 4px 0 0; margin-right:-1px; }
.tab .active { border-bottom:1px solid #fff; background:#fff;
font-weight:bold; color:#454545; }
.tab li a { top:10px; right:12px; }

那部分代码没太大难度,我就不做详细讲解了。css基础不是很朴实的读者,也许会可疑【起始】按钮是何许贯彻稳定的。可以活动阅读position属性,理解absolute具体功能。
  上边是上述html和css代码完结的页面效果。
pic
上边我们来介绍如何暴发动画效果。大家先是要求定义关键帧,他确定动画在分裂阶段的功能。我们能够经过
精晓更加多音信。
  大家创设了一个名为horse-ride的关键帧,针对chrome和firefox要求在眼前添加-webkit-或者是-moz-前缀。0%和100%分别代码开头和了结,可以按照须求增添新的case,比如50%时的动画片效果。

.section .tab { padding:0 10px; }
.section .tab li { width:98px; }
.side_section .tab { padding:0 6px; }
.side_section .tab li { width:66px; }

代码如下:

.list_section li { height:27px; line-height:27px; border-top:1px dotted
#dadada; background:url(../img/dot.gif) no-repeat 5px center;
vertical-align:middle; }
.list_section li a { float:left; color:#333; text-indent:14px; }
.list_section li a:hover { color:#d80000; }
.list_section li a em { color:#c3c3c3; }
.list_section li a span { color:#c75d61; }
.list_section .col1, .list_section .col2, .list_section .col3 {
float:left; }
.list_section .col2, .list_section .col3 { text-align:center; }

@-webkit-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}

.list_section .title { background:none; color:#999; border-top:none;
}
.list_section .title .col1 { text-align:center; }
.list_section .color { color:#d80000; }

下边,我们来为horse添加css3的动画片效果。

.side_section .col1 { width:137px; }
.side_section .col2 { width:35px; }
.side_section .col3 { width:36px; }
.section .col1 { width:273px; }
.section .col2 { width:35px; }
.section .col2 img { position:relative; top:7px; }

代码如下:

.pic_list li { overflow:hidden; }
.pic_list .img { width:96px; height:73px; position:relative; }
.pic_list .img a { display:block; width:90px; height:67px; padding:2px;
border:1px solid #dadada; }
.pic_list .img a:hover { border:1px solid #b80000; }
.pic_list .text { width:108px; }
.pic_list .text h3 { padding-bottom:4px; }
.pic_list .text h3 a { color:#b80000; font-weight:normal;
font-size:12px; }
.pic_list .text h3 a:hover { text-decoration:underline; }
.pic_list .text p { color:#999; }
.pic_list .text p a { color:#666; }
.pic_list .text p a:hover { color:#b80000; text-decoration:underline;
}

#play_button:checked ~.horse{
-webkit-animation:horse-ride 0.5s steps(12,end) infinite;
-webkit-animation-delay:2.5s;
-moz-animation:horse-ride 0.5s steps(12,end) infinite;
-moz-animation-delay:2.5s;
background-position: -2412px 0;
-webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
-moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

.wrap_section1 { padding-bottom:5px; }
.wrap_section2 { padding-bottom:2px; }
.wrap_section2 li { width:214px; border-bottom:1px dotted #dadada;
padding-bottom:10px; margin-bottom:10px; vertical-align:middle; }
.wrap_section3 { padding-bottom:1px; background:#fff; }
.wrap_section3 .pic_list { padding-bottom:10px; }
.wrap_section3 .pic_list li { width:214px; vertical-align:middle; }
.wrap_section4 { padding-bottom:10px; background:#fff; }
.wrap_亚洲必赢官网 ,section4 .pic_list { overflow:hidden; }
.wrap_section4 .pic_list li { float:left; width:107px; height:150px;
}
.wrap_section4 .pic_list h3 { padding-top:5px; }

那边首先介绍:checked和~,:checked是伪类,指当#play_button选中时的css效果,~指的是#play_button的哥们儿节点。
  接下去介绍.horse相关的css属性。animation中大家利用了4个值,依次代表:关键帧(我们地方定义的horse-ride),动画间隔时间,动画效果和实践次数。之后我们又经过animation-delay设置动画延迟时间。通过transition和background-position集合起来,设置背景的接入动画。
  最终我们为【开始】按钮添加动画作用。

.soso { height:47px; border-top:1px dotted #dadada; padding:17px 0 0
10px; }
.soso strong, .soso .text, .soso .btn { float:left; }
.soso strong { color:#595959; padding-top:3px; }
.soso .text { width:172px; height:20px; padding:0 4px; border:1px solid
#9c9c9c; line-height:20px; color:#9c9c9c; }
.soso .btn { width:24px; height:25px; background:url(../img/btn.gif);
border:none; margin-left:10px; }

代码如下:

.panoramic { height:138px; }
.panoramic img,.panoramic span { display:block; }
.panoramic a { color:#333; }
.panoramic a:hover { color:#b80000; text-decoration:underline; }
.panoramic span { line-height:26px; }

#play_button:checked ~#play_image img{
left:-68px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}

.new_title { height:70px; position:relative;
background:url(../img/new_title_bg.gif) no-repeat right 0; }
.new_title strong, .new_title span { position:absolute; left:24px; }
.new_title strong { font-size:12px; font-family:arial; color:#ea2b31;
top:19px; }
.new_title span { font-size:24px; color:#333; top:31px;
font-weight:normal; }
.new_title em { font-size:36px; font-weight:bold; color:#ec1c16;
position:absolute; left:125px; top:16px; }

我们可以自己下手尝试开发了。
  demo下载地址:

.activity { width:348px; float:left; }
.recommend { width:348px; float:right; }
.recommend .new_title { background-position:right -70px; }
.activity, .recommend { height:498px; }

.activity .con { background:url(../img/activity_bg.gif) no-repeat; }
.activity .info { padding:16px 25px 0; height:104px; }
.activity .img { float:left; width:84px; height:84px; position:relative;
}
.activity .mask { width:84px; height:84px;
background:url(../img/activity_bg.gif) no-repeat -373px 0;
position:absolute; top:0; left:0; }
.activity .img img { width:84px; height:84px; }
.activity .text { float:right; width:204px; }
.activity .text h3 { height:32px; font-size:12px; }
.activity .text em, .activity .text span { float:left; margin-right:4px;
}
.activity .text em { width:25px; height:25px;
background:url(../img/activity_bg.gif) no-repeat -348px 0;
font-family:arial; font-size:14px; color:#cf3530; text-align:center;
line-height:25px; }
.activity .text span { text-indent:2px; padding-top:4px; }
.activity .text p { line-height:18px; color:#999; }

.calendar { width:323px; padding-left:25px; position:relative; }
.calendar h3 { height:34px; line-height:34px; text-align:center;
margin-right:31px; background:url(../img/adorn.gif) repeat-x;
word-spacing:10px; }
.calendar h3 span { font-size:14px; font-family:arial; color:#666; }
.calendar ol li { width:40px; height:40px; line-height:40px; margin:0
2px 2px 0; background:#ededed; float:left; text-align:center;
position:relative; font-weight:bold; color:#666; font-family:arial; }
.calendar .normal { background:#f8f8f8; color:#ccc; }
.calendar .active, .calendar .img { position:absolute; top:0; left:0;
}
.calendar .active { width:36px; height:36px; border:2px solid #d30408;
cursor:pointer; }
.calendar .img { width:40px; height:40px; cursor:pointer; }

.today_info { width:294px; height:84px; padding:10px; border:1px solid
#c0c0c0; background:#fff; position:absolute; top:136px; left:288px;
box-shadow:4px 4px 0 rgba(0,0,0,0.2); display:none; }
.today_info img { width:80px; height:80px; border:2px solid #dbdbdb;
float:left; }
.today_info .text { width:200px; float:right; }
.today_info h4 { font-size:12px; color:#333; padding-bottom:8px; }
.today_info strong { color:#ccc; font-size:18px;
vertical-align:middle; }
.today_info p { color:#999; line-height:20px; }
.today_info span { width:8px; height:14px; overflow:hidden;
position:absolute; top:45px; left:-8px; background:url(../img/adorn.gif)
no-repeat 0 -48px; }

.recommend .pic { width:294px; height:168px; padding:12px 12px 0;
background:#f8f8f8; position:relative; margin:0 auto;
border-radius:6px; }
.recommend .pic ul { width:223px; height:133px; position:absolute;
top:12px; left:12px; }
.recommend .pic ul li { width:223px; height:133px; border:1px solid
#fff; position:absolute; top:0; left:0; }
.recommend .pic ul img { width:223px; height:133px; }
.recommend .pic ol { position:absolute; top:12px; right:12px; }
.recommend .pic ol li,.recommend .pic ol img { width:54px; height:30px;
}
.recommend .pic ol li { border:3px solid #fff; margin-bottom:13px; }
.recommend .pic ol .active { border:3px solid #d6191d; }
.recommend .pic p { line-height:32px; position:absolute; left:12px;
bottom:0px; }

.recommend .list { padding:18px 26px 0; }
.recommend .list li { height:27px; vertical-align:middle; }
.recommend .list em { float:left; color:#dfdfdf; margin-right:7px; }
.recommend .list em img { margin-right:3px; }
.recommend .list a { float:left; color:#454545; }
.recommend .list a:hover { text-decoration:underline; }
.recommend .list span { float:right; font-family:arial; font-size:12px;
color:#999; }

.bbs { height:328px; }
.bbs ol li { height:30px; line-height:30px; margin-bottom:3px;
background:#f8f8f8; border-radius: 6px; vertical-align:middle;
position:relative; }
.bbs ol strong, .bbs ol a { float:left; }
.bbs ol strong { color:#d80000; width:45px; text-indent:10px; }
.bbs ol img { display:none; }
.bbs ol a { color:#333; }
.bbs ol span { display:none; }
.bbs ol em { display:none; }
.bbs ol b { float:right; color:#666; padding-right:22px;
font-weight:normal; }
.bbs .active { height:70px; background:#d90000; }
.bbs .active img, .bbs .active a, .bbs .active span, .bbs .active em {
position:absolute; }
.bbs .active img { display:block; top:10px; left:10px; }
.bbs .active a { color:#fff; font-weight:bold; top:7px; left:70px; }
.bbs .active span { display:block; color:#fff; top:33px; left:70px; }
.bbs .active b { display:none; }
.bbs .active em { display:block; color:#fff; font-size:26px;
font-weight:bold; bottom:-5px; right:4px; }

.hot_area { height:258px; }
.hot_area li { margin:0 2px 2px 0; float:left; position:relative; }
.hot_area li, .hot_area li img { width:78px; height:78px; }
.hot_area .area1, .hot_area .area1 img { width:156px; height:78px; }
.hot_area .area2, .hot_area .area2 img { width:77px; height:78px; }
.hot_area p { width:144px; height:66px; padding:12px 0 0 12px;
line-height:18px; background:rgba(0,0,0,0.5); color:#fff;
position:absolute; top:0; left:0; }

网站地图xml地图