title: 前端实战(1)-动画Banner设计
date: 2016-07-19 19:25
tages: 前端实战
0x01 内联元素与块元素
HTML文档中的元素大概可分为inline element和block element两种。块元素可以包含其他块或内联元素。如H1-H6，div,p,ul，ol等，但是H5中将a元素划分为了块元素，但是a元素依旧不能包含支持点击的交互元素如<a></a>,<button>等。
0x02 background简写属性
CSS中有多个属性用于设置背景样式，其中background-color设计背景颜色，background-imag指定要使用的背景图像，background是否以及如何重复图像，background-attachment是否固定，background-position图像位置。
#p {background:#f8f8f8 url(./images/sign.png) no-repeat 0 4px;}
0x03 CSS定位
CSS有四种不同类型的定位，static(默认定位)，relative(相对定位)，absolute(绝对定位)，fixed(固定定位).
relative的元素不脱离文档流，而是参考自身右上角位置通过top，bottom，left，right进行定位。它原本所占用的空间位置会被保留，不会别其它元素所占用。
absolute和fixed的元素都是脱离文档流的，元素原先的空间位置会被关闭。但是absolute元素的位置相对于最近的已经定位的最先元素，若是没有已定位的祖先元素，则相对于最初的块。fixed则是选对于流浪器某个位置固定的，即使拖动浏览器的滚动条，该元素的位置也不会变。
0x04 font简写属性
字体属性的样式有字体系列(font-family),字体大小(font-size),行间距(line-height),字体风格(font-style），字体粗细(font-weight)。
不同于background简写属性，font简写属性遵循如下规则：
1.至少要指定字体大小与字体系列
font:12px "Times New Roman";
2.行间距添加到字体大小之后，使用"/"分割
font:1opx/1.5 "Times New Romam";
3.设置字体粗细，字体风格，字体变体属性时，要添加到字体大小之前
font:bold italic small-caps 12px/1.5 " Times New Roman";
0x04 伪类
CSS中与超链接有关的伪类如下:
种类|说明|
:---:|:---:|---
:link|向未被访问的链接添加样式
:visited|向已被访问的链接添加样式
:hover|鼠标悬浮时的样式
:active|向被激活的元素添加样式
:focus|获得聚焦时的样式
0x05 Transition动画
Transition动画通过transition属性值来指定,四个属性如下
| 属性 | 说明 |
|---|---|
| tansition-property | 指定html元素的哪个css属性来执行动画处理 |
| transition-duration | 渐变时间 |
| transition-timing-funciton | 动画效果，有linear，ease，ease-in，easr-out和ease-in-out等 |
| transition-delay | 延迟时间 |
同样transition属性也是支持简写的:
a.banner{
background:url(./Images/e.ico) no-repeat -100px 140px,
url(./Images/a.ico) no-repeat -20px -380px;
transition:background-position .2s ease-in .2s;
}
0x06 使用jQuery播放声音
实现效果，当鼠标悬浮或者聚焦到某个元素时，开始播放声音。
编写播放声音的js插件代码
;(function($){//javascript自运行函数
$.fn.banner_sound=function(audio_src){//使用jQuery.fn原型编号banner_sound函数
var banner_audio;
return this.each(function(){//返回this对象
$(this)
.bind('mouseover focusin',function(){
banner_audio=new Audio(audio_src);//传入音频对象的路径
banner_audio.play();
})
.bind('mouseout focusout',function(){
banner_audio.pause();
});
});
};
})(jQuery);//在内部使用$代替jQuery
在html中调用
<head>
<script src="jquery.js"></script>
<script src="banner.js"></script>
<script >
(function($){
$(function(){
$('.banner').banner_sound('./Media/2CELLOS - Clocks.mp3');
});
})(jQuery);
</script>
</head>
0x6 最后
设计网页动态横幅的所有代码。
HTML代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8"/>
<tittle>CSS3 Banner Design -动画Banner设计</tittle>
<link rel="stylesheet" href="banner.css"/>
<script src="jquery.js"></script>
<script src="banner.js"></script>
<script >
(function($){
$(function(){
$('.banner').banner_sound('./Media/2CELLOS - Clocks.mp3');
});
})(jQuery);
</script>
</head>
<body>
<a class="banner" href="http://www.baidu.com">
<img class="banner-logo" src="../Image/1.jpg" alt="baidu.com" width="167" height="134"/>
<p class="banner-desc" >
who am i?<br/>
where am i?<br/>
<strong>onejustone</strong>
</p>
</a>
</body>
</html>
CSS代码
@charset "utf-8";
body{ padding:20px; background:#333333;}
a.banner{
display:block;
width:728px;
height:176px;
border:1px solid #555;
}
a.banner{
background:url(Images/e.ico) no-repeat -100px 140px,
url(Images/child_128px_1176085_easyicon.net.png) no-repeat -40px 220px,
url(Images/a.ico) no-repeat -20px -380px,
url(Images/c.ico) no-repeat 0 0;
transition:background-position .2s ease-in .2s;
}
a.banner .banner-logo{
position:absolute;
top:20px;
left:540px;
}
a.banner{
position:relative;
display: block;
}
/*设置Banner文字的位置和颜色*/
a.banner .banner-desc{
opacity:0;
position:absolute;
top:35px;
left:170px;
font:30px/0.9 "Nanum Pen Script";
color:#4ec1cd;
}
a.banner .banner-desc strong{
font-size:23px;
}
/*当聚焦或者悬浮时显示图片*/
a.banner:hover,a.banner:focus{
background-position:20px 140px,-40px 20px,-20px -90px,0,0;
}
/*设置文本透明度为0，当聚焦或者鼠标悬浮时显示*/
a.banner:hover .banner-desc,
a.banner:focus{
opacity:1;
}
/*设置logo图片居中*/
a.banner .banner-logo{
position:absolute;
top:20px;
left: 50%;
}
JS代码:
;(function($){//javascript自运行函数
$.fn.banner_sound=function(audio_src){//使用jQuery.fn原型编号banner_sound函数
var banner_audio;
return this.each(function(){//返回this对象
$(this)
.bind('mouseover focusin',function(){
banner_audio=new Audio(audio_src);//传入音频对象的路径
banner_audio.play();
})
.bind('mouseout focusout',function(){
banner_audio.pause();
});
});
};
})(jQuery);//在内部使用$代替jQuery
网友评论