本篇文章给大家谈谈图片特效教程css，以及html5图片特效对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
用，怎么用纯div+css做图片切换效果
图片旅败切换特效实现很简单图片特效教程css，而且兼容性很好。
html页面如下
复制代码 代码如下:
div class=”wrapper”
div id=”focus”
ul
lia href=”” target=”_blank”img src=”img/01.jpg” alt=”QQ商城焦点图效果下载” //a/li
lia href=”” target=”_blank”岁扰img src=”img/02.jpg” alt=”QQ商城焦点图效果教程” //a/li
lia href=”” target=”_blank”乎镇旦img src=”img/03.jpg” alt=”jquery商城焦点图效果” //a/li
lia href=”” target=”_blank”img src=”img/04.jpg” alt=”jquery商城焦点图代码” //a/li
lia href=”” target=”_blank”img src=”img/05.jpg” alt=”jquery商城焦点图源码” //a/li
/ul
/div
/div!– wrapper end —
/body
css样式
复制代码 代码如下:
style type=”text/css”
* {margin:0; padding:0;}
body {font-size:12px; color:#222; font-family:Verdana,Arial,Helvetica,sans-serif; background:#f0f0f0;}
.clearfix:after {content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {zoom:1;}
ul,li {list-style:none;}
img {border:0;}
.wrapper {width:800px; margin:0 auto; padding-bottom:50px;}
/* qqshop focus */
#focus {width:800px; height:280px; overflow:hidden; position:relative;}
#focus ul {height:380px; position:absolute;}
#focus ul li {float:left; width:800px; height:280px; overflow:hidden; position:relative; background:#000;}
#focus ul li div {position:absolute; overflow:hidden;}
#focus .btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000;}
#focus .btn {position:absolute; width:780px; height:10px; padding:5px 10px; right:0; bottom:0; text-align:right;}
#focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;}
#focus .btn span.on {background:#fff;}
#focus .preNext {width:45px; height:100px; position:absolute; top:90px; background:url(img/sprite.png) no-repeat 0 0; cursor:pointer;}
#focus .pre {left:0;}
#focus .next {right:0; background-position:right top;}
/style
js脚本
复制代码 代码如下:
$(function() {
var sWidth = $(“#focus”).width(); //获取焦点图图片特效教程css的宽度（显示面积）
var len = $(“#focus ul li”).length; //获取焦点图个数
var index = 0;
var picTimer;
//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
var btn = “div class=’btnBg’/divdiv class=’btn'”;
for(var i=0; i len; i++) {
btn += “span/span”;
}
btn += “/divdiv class=’preNext pre’/divdiv class=’preNext next’/div”;
$(“#focus”).append(btn);
$(“#focus .btnBg”).css(“opacity”,0.5);
//为小按钮添加鼠标滑入事件，以显示相应的内容
$(“#focus .btn span”).css(“opacity”,0.4).mouseenter(function() {
index = $(“#focus .btn span”).index(this);
showPics(index);
}).eq(0).trigger(“mouseenter”);
//上一页、下一页按钮透明度处理
$(“#focus .preNext”).css(“opacity”,0.2).hover(function() {
$(this).stop(true,false).animate({“opacity”:”0.5″},300);
},function() {
$(this).stop(true,false).animate({“opacity”:”0.2″},300);
});
//上一页按钮
$(“#focus .pre”).click(function() {
index -= 1;
if(index == -1) {index = len – 1;}
showPics(index);
});
//下一页按钮
$(“#focus .next”).click(function() {
index += 1;
if(index == len) {index = 0;}
showPics(index);
});
//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
$(“#focus ul”).css(“width”,sWidth * (len));
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$(“#focus”).hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
},4000); //此4000代表自动播放的间隔，单位图片特效教程css：毫秒
}).trigger(“mouseleave”);
//显示图片函数，根据接收的index值显示相应的内容
function showPics(index) { //普通切换
var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
$(“#focus ul”).stop(true,false).animate({“left”:nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
//$(“#focus .btn span”).removeClass(“on”).eq(index).addClass(“on”); //为当前的按钮切换到选中的效果
$(“#focus .btn span”).stop(true,false).animate({“opacity”:”0.4″},300).eq(index).stop(true,false).animate({“opacity”:”1″},300); //为当前的按钮切换到选中的效果
}
});
用到的左右切换图片
如何用css3制作相册翻页效果
用css3制作纸张效果
一、中规中矩的效果
所谓“中规中矩的效果”就是加个投影，贴个胶带什么的。效果如下：
CSS3的box-shadow投影效果，相关代码如下：
代码如下:
-moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
反而是上面的胶带纸效果有点说头，这些微微倾斜的胶带是CSS写出来的，大部分效果源自CSS3，主要有RGBA显示半透明背景色，box-shadow显示淡淡的投影，transform做旋转效果；元素使用after伪类生成，完整代码如下：
代码如下:
.page:after { width: 180px; height: 30px; content: ” “; margin-left: -90px; border: 1px solid rgba(200, 200, 200, .8); background: rgba(254, 254, 254, .6); -moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); position: absolute; left: 50%; top: -15px; }
老外似乎很喜欢使用before和after伪类，国外最近的些教程，技术点等经常见到此玩意。我个人感觉有跟风之嫌，就像是狂热的经济泡沫，不需 要太久，举笑大家会冷静下来重新审视这些曾经上手简单，自我感觉不错的方法。由于目前IE6/7不支持before/after类，所以，某种意义上来说，伪 类的使用少了些兼顾IE下显示的烦恼。
二、外翻卷角纸张效果
纸张一般都是有卷角的，所以，我们可以更近一步，模拟卷角效果来使得纸张的感觉更逼真，这里就要借助于投影了，且租答伍是曲线投影。
我们还可以给纸张增加渐变(gradient)效果，以模拟纸张的曲弊或度。
同时，可以给文字增加投影，可以让文字有书写的凹陷感，可以进一步让纸张效果更逼真。
于是，在“中规中矩”纸张基础上，我们做点小手术，结果得到下面的效果：
您可以狠狠地点击这里：渐变卷边纸张效果demo
目前貌似opera浏览器还不支持CSS3渐变，同时webkit核心下浏览器下的gradient渐变的写法已经开始向FireFox浏览器靠拢了。确实，都是CSS3，有必要搞得五花八门吗？
相关渐变CSS代码如下：
代码如下:
background:-moz-linear-gradient(top, #f4f39e, #f5da41 60%, #fe6); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f39e), to(#fe6), color-stop(.6, #f5da41));
在60%的位置有个颜色拐点。
关于弧形的投影，也是使用:before/:after伪类实现的，相关代码如下：
代码如下:
.page:before { -webkit-transform: skew(-15deg) rotate(-5deg); -moz-transform: skew(-15deg) rotate(-5deg); -o-transform: skew(-15deg) rotate(-5deg); transform: skew(-15deg) rotate(-5deg); left: 15px; } .page:after { -webkit-transform: skew(15deg) rotate(5deg); -moz-transform: skew(15deg) rotate(5deg); -o-transform: skew(15deg) rotate(5deg); transform: skew(15deg) rotate(5deg); right: 15px; } .page:before, .page:after { width: 90%; height: 20%; content: ‘ ‘; -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); position: absolute; bottom: 22px; z-index: -1; }
要想查看效果的完整代码，demo页面查看源文件即可，脱光光，一览无遗。
这里的曲线投影卷角效果支持Opera浏览器，如下截图：
三、带分隔线的卷纸纸张效果
上面的纸张卷角效果是通过曲线投影效果来模拟的，而这里，纸张的卷边效果是纸张真的“曲线化”了，而且，还是带隔线的纸张效果哦，您可以参见下面的效果截图(Chrome 9)：
这里，Firefox浏览器下的纸张隔线使用的是重复渐变(Repeating Gradients)实现的，对于webkit浏览器，使用的是background-size实现的。实际上，Firefox3.6+已经支持background-size属性了(-moz-background-size)， 所以，对于Firefox浏览器，这里使用重复渐变与渐变+background-size是等效的。在FireFox4以及IE9浏览器中 background-size属性已经没有私有属性了，Opera浏览器在9.5版本时候就已经支持background-size属性了，但是存在一 些bug。
这里分隔线实现的相关CSS如下：
代码如下:
background: -moz-repeating-linear-gradient( top, #fcf59b, #fcf59b 29px, #81cbbc 30px ); background: -webkit-gradient( linear, left top, left bottom, from(#81cbbc), color-stop(2%, #fcf59b) ); background: repeating-linear-gradient( top, #fcf59b, #fcf59b 29px, #81cbbc 30px ); -webkit-background-size: 100% 30px;
而对于曲边的实现，使用的是border-radius圆角，这里展示下示意的代码：
代码如下:
border-bottom-left-radius: 20px 500px; border-bottom-right-radius: 500px 30px; border-top-right-radius: 5px 100px;
当然，FireFox浏览器下的写法不是如此，其bottom, left是连起来的，而不是”-”分隔，这里仅仅是示意，这里的微曲线是如何实现的。相信看到上面的代码就知道意思了，这里就不啰嗦了。
还有其他些细节，如如何控制行高让文字与隔线一一对应，这些您要是有兴趣可以去demo页面，通过查看元素等方法一看究竟。
四、最后点老生常谈
难免的，本文的重点在于CSS3，所以就本文而言，IE6/IE7/IE8浏览器就是过来打酱油的，且三个纸张效果从一而终，都是下面这副模样：
虽然没有透明胶效果，没有投影，没有卷边，更没有分隔线，但是，就功能上来讲，一点都不影响使用。所以，无论你是渐进增强还是退求其次，纸张投影效果在实际项目中的应该也不是不可以的，这就要看个人和团队的抉择了
如何用htHTML+CSS+JS实现如下图效果，即图片循环滚动播放
!DOCTYPE html
html
meta charset=”utf-8″ /
title/title
t
script type=”text/javascript” src=”js/slider.js”/script
script type=”text/javascript” src=”js/jquery-1.9.1.min.js”/script
body
div id=”banner_tabs” class=”flexslider”
ul class=”slides”
li
a
img width=”1920″ height=”600″ style=”background: url(images/banner_1.jpg) no-repeat center;” src=”images/alpha.png”
/a
/li
则闷辩li
a
img width=”1920″ height=”600″ style=”background: url(images/banner_2.jpg) no-repeat center;” src=”images/alpha.png”
/a
/li
li
a
img width=”1920″ height=”600″ style=”background: url(images/banner_3.jpg) no-repeat center;” src=”images/alpha.png”
/a
/li
/ul
ul class=”flex-direction-nav”
lia class=”flex-prev” href=”javascript:;”Previous/a/li
lia class=”flex-next” href=”javascript:;”Next/a/li
/ul
ol id=”bannerCtrl” class=”flex-control-nav flex-control-paging”
li class=”active”a1/a/li
li class=””a2/a/li
li class=””a3/a/li
/ol
/div
script src=”js/jquery.js”/script
script type=”text/javascript”
$(function() {
var bannerSlider = new Slider($(‘#banner_tabs’), {
time: 5000,
delay: 400,
event: ‘hover’,
auto:true,
mode: ‘fade’,
controller: $(‘#bannerCtrl’),
孙缺 activeControllerCls: ‘active’
});
$(‘#banner_tabs .flex-prev’).click(function() {
bannerSlider.prev()
});
$(‘#banner_tabs .flex-next’).click(function() {
bannerSlider.next()
});
})
/script
/body
/html
==========================================
slider，jq自己下载，相信不用我教罩举。
顺便可以看看教程，对这些有点了解。
百度空间CSS完整教程
过来坐坐吧，里面的东东那是相当得多
壹 .CSS语法有关：
一 53个CSS-不可或缺的技巧
二 CSS的十八般技巧(提高版)
三 玩转隐茄罩CSS CSS精彩实例教程
四 CSS代码图解(转)
五 CSS语法手册
六 基本颜色代码+
七 CSS基本语法总整理
八 百度空间模块css代码
九 百度空间 CSS更全面解释 以及 参数属性
十 CSS在线编辑器
贰，CSS技巧
一 Iframe 用法的详细讲解- –
二 无缝调用不同模板CSS的办法：
下载百度默认模板
三 如何让百度空间上出现日历和时钟
四 QQ空间跳转百度空间
五 “自定义模块”代码详解
六 让空间拥有精美flash背景！
七 让自己的空间下雨
八 宣传百度空间的6种方法,你知道吗?(
九纳并 空间个人档案的有关设置 ：
个人档案添加图片
十 隐藏你不想显示的模块
十一 给自己的主页加上漂亮的计数器
十二 添加小图标，以及小图片：
1文章日期旁加小图案，
2标题栏主体加小图案，
3如何在文章标题前加图片
十三 如何增加一个象spaces一样的弹出窗口
十四 超链接的有关设置：
1 给超链接添加按钮效果，
2禁止选择/*鼠标触碰 按钮下陷，
3给链接添加背景色效果代码
十五 友情连接的应用：
1连接邮箱；
2链接QQ；
3添加“加为好友”的链接：灶闹
十六 空间文章板块的有关设置：
1 定义阅读文章时 文章块宽度 距左长度，
2文章列表板块文章区边框的设置，
3日志背景，
4空间个性图片效果，
5图片添加灰色边框效，
6文章区的文字与边框之间的距离调整，
7去掉文章题目下划线
8文章中插入多媒体（视频）
十七 空间 模板 以及 图片 的有关设置：
1/*背景设置*/
2/半透明设置*/
3/*常用插入时间图片位置的代码*/
4/*留言板添加图片*/
5/*前景图片透明设置*/
6各部分背景设置
7评论下增加背景图
8如何固定空间背景
9.如何在所有页面底部加入图片
10/*最顶部加字方法!*/
11/*空间整体宽度*/
12/*版块长度及间距*/
13/*去除模块背景即完全背景透明*/
14/*改变你的按钮和输入栏的颜色及字体*/
15/*更多文章居右*/
16*添加天气预报*/
17/*隐藏“查看该用户在百度的”分类*/
18/*添加LOGO*/
19背景色的半透明设置
20设置透明背景图
21主页的个人档案,档册,其它显示透明
22：自定义背景
23让你的百度空间里每一个连接都新窗口中打开
24：屏蔽屏蔽空间任何一个版块
25头部时间显示特效”：
26改变百度空间的模块宽度
27如何改变空间名称的效果
28如何在百度空间上显示天气预报、系统信息、日历、问候、签名。
29专栏分割线的CSS代码修改方法
十八 空间TAB菜单的有关设置：
1如何为TAB菜单加上花边
2如何改变TAB菜单栏的位置及颜色
3/*调整TAB距离*/
4如何在个人控制条中间加时钟
5竖状菜单
十九 空间其他版块的有关设置：
1给其它的中间部分加图片
2/*其他模块标题添加图片*/
3教你加显示IP地址代码
4自定义显示IP的项目的颜色
5/*百度空间显示排名*/
6/*其他模块已有XXXX人次访问本空间数字字体设置 */
7在百度空间里面添加自己的特效
二十 空间字体的有关设置：
1百度空间文字发光的方法
2/*阴影效果字体阴影*/
3/*投影的代码*/
4自制闪字空间名称
二十一 空间 背景音乐 播放器 的有关设置：
1如何隐藏播放器而不影响音乐播放
2背景音乐支持多首歌曲
3/*播放器*/
4播放器大小调整
5特色播放器
6玩转百度空间的”背景音乐”板块
7如何在百度空间里添加多首背景音乐（图解）
二十二 背景色的半透明设置
二十三 打造一个自己的百度空间”其他板块”
二十四 做分割线的方法
二十五 在空间里加入滚动条：
1想添加滚动条,只需下面的代码即可
2如何让你的浏览器滚动条变色
3透明个性化滚动条
二十六 教你如何制作个性化的标题栏(转自玩转百度空间)
二十七 跟我一起玩百度空间+CSS教程+
二十八 空间评论区的有关设置
二十九 给空间加点可爱的符号
三十 关于空间制作的链接：
1.让你看懂css各个参数
2.百度空间CSS使用说明
3.怎样编写CSS的!
4.CSS代码解密
5.一个CSS的漏洞
6.增加自定义模块功能
7.更换主体及文章的背景
8.透明flash代码
9.百度空间十大宝藏
10.制作个性化的标题栏
11.看到更多的百度空间
12.百度空间的8个优缺点
13.专栏分割线的代码修改
14.添加自己的LOGO图片
15.宣传百度空间的方法
16.添加多首背景音乐
17.设置透明背景图
18.更改空间的鼠标样式
19.在空间里加入滚动条
20.透明的背景音乐的播放器
21.透明个性化滚动条
22.给链接添加背景色效果代码
23.显示”点击给你发消息”怎么在空间做!
24.去掉文章题目下划线
25.常用插入图片位置的代码
26.如何隐藏播放器而不影响音乐播放
27.如何有字体阴影
28.自制闪字空间名称
29.解决回车换两行的问题
30.调整一下行距
31.让空间拥有精美flash背景
32.让空间自动弹出对话框！
33.修改blog显示的文字颜色大小
34.如何让你的浏览器滚动条变色
35.为评论和链接加上图片
36.如何在”其它”下面加上图片
37.百度空间的名称如何用艺术字？
38.百度空间文字发光的方法
39.文字快速插链接
40.空间模块巧移动
41.个性化你的IP显示，自定义颜色
42.全透明
43.空间背景半透明
44.如何在百度空间的文章标题周围加花边图案？
45.关于百度空间照片大小限制的问题!!!
46.如何在百度空间发表文章时插入FLESH动画？
47.怎样换百度空间的背景
48.做分割线的方法
49.在百度空间里面添加自己的特效
50.在文章中快速插入图片
51.添加计数器的两种方法
52.如何在空间顶部加入图片
53.发表评论框的图片
54.改变空间主页名称和简介的字体大小
55.给超链接添加按钮效果
56.如何给评论框添加背景
57.Iframe 用法的详细讲解
58.背景图片素材01
59.图片素材20060929
60.我的自定义设计
61.CSS鼠标样式大全
62.跟我一起玩百度空间的音乐和视频+
63.为好友列表增加一个滚动条
64.空间模块巧移动 + 文字快速插链接
65.怎么去掉百度空间里模块的框框！
66.基本颜色代码+
67.在你的空间中加入幽默元素..
68.百度空间吧[精品]贴+
三十一 边框风格属性(border-style)
百度空间CSS详细教程？
我直接给你贴出来吧,毕竟点入了别人的地址不一定能找到你想要的,好就是好,不好就是不好,请看本人写的教程首先声明本人不是CSS高手，所以有些错误是难免的，本攻略以本人现在使用的CSS代码讲解，全方面的涉及到背景图片，播放器，模块透明，设定页面宽度等问题．大家需要明白的，要装扮好自己的空间除了需要熟知百度空间的CSS外，还要有一定的美工基础，毕竟图片是漂亮的关键．还有，对于新手来讲，最好先看一下百度官方的CSS帮助，不知道地址的请点此进入，这样可以让你了解CSS代码所对应的模块．我对自己的代码作了详细注释，很多下问题可以在我的注释里找到，如不懂的请留言给我．一：背景图片一般人设计空间一般是把百度空间分成上下两部分，上指的是空间名称，空间简介那部分，下指的是导航栏以下部分，就是文章内容以及其他小模块．对于新手来讲，这是最好的拆分方法．空间名称这一部分一般是装扮空间的前提，如果有精美的图片，只要改下这里的背景就可以让空间焕然一新．修改核卜这里的背景很简单，打开CSS编辑页面，找到#header，在后面插入BACKGROUND: url(图片地址) no-repeat 0px 0px 在这里讲解下背景图片的几个属性：repeat是指定图片是否平铺和以何种方式平铺.有四个属性： repeat : 默认值。背景图像在纵向和横向上平铺 no-repeat : 背景图像不平铺 repeat-x : 背景图像仅在横向上平铺 repeat-y : 背景图像仅在纵向上平铺 后面的两个PX是指定图片左边距和上边距，这是比较重要的，可以调整图片到你喜欢的位置．这里注意下，在空间名称这部分添加背景图片的时候请同时调整这里的高度和TAB里的距顶部距离．高度代码：height,把高度调整为你图片的高度．示宽袜例：现在我要在空间名称部分放一张高度为160的图片，我们就需要修改两个地方：1：#header{ HEIGHT: 160px BACKGROUND: url(图片地址) no-repeat 8px 0px;｝2：#tab{top:160px;left:0px;}对于上部分的背景图片就讲到这里．下部分和上部分的方法一样，不过插入代码的地方是.stage找代码可以按CTRL+F搜索．我们还可以设定下总体背景，把背景图片代码插在BODY里就可以了．还有很重要的一点，百度的模块都是有背景色的，这样的话，我们就算放入背景图片，基本上也被遮住了，这就需要用到背景透明代码：background:transparent;在你想改巧穗设置透明的模块里放入此代码就可以了．具体代码对应模块请参考百度官方CSS帮助，上面已经有连接了．二：播放器设置不多说废话，提供代码一个：#phx{FILTER:Alpha(Opacity=66,FinishOpacity=26,Style=2,StartX=20,StartY=40,FinishX=0,FinishY=0)gray();WIDTH: 209px;HEIGHT:45px;margin-top:12px}这个代码可以任意插在CSS任何位置，只要知道width和height是分别改变播放器宽度和高度的就可以任意改变播放器大小了．三：指定页面宽度有些人觉得百度空间的页面看起来太宽，想设计的小一点，这其实不难．甚至简单的只需要知道一个宽度代码：width 当然，为了更方便的设置，我们最好再加入一些自己的代码．#layout td.c2t3{padding-right:0px;padding-top:0px;width:250}#layout td.c2t1{padding-left:170px;padding- top:0px;width:600px;border-right:#930000 0px solid;}#layout td.c2t2{width:60px}可以把这段代码放在.stage后面C2T3是指定页面右边属性，c2t1指定左边属性，c2t2是左和右的间距．（注意：此代码只针对把空间分成两列的）padding：检索或设置对象四边的内补丁，有上下左右padding-right：在这里不讲专业术语了，为了大家便于了解，可以当作是指定对象距离右边的位置padding-top：（同上，指定顶部）padding-left：（同上，指定左边）PADDING-BOTTOM：（同上，指底部）如果你有很好的美工基础，也可以在这里插入相应的背景图片美化空间．下面我以我的CSS代码作注释．如要使用，请去掉注释内容．注意：不小心有些文字搞成黑色了，居然修改不回来，如果看不清楚，请用鼠标选取后再看/* 浪儿制作 ◎浪儿出手，必是精品◎ All Rights reserved. css by jsqk. *//* green style VER 3.1 */#phx{FILTER:Alpha(Opacity=66,FinishOpacity=26,Style=2,StartX=20,StartY=40,FinishX=0,FinishY=0)gray();WIDTH: 209px;HEIGHT:45px;margin-top:12px} （播放器代码）.f14 {color:#668214}BODY {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;color:#668214;background:url(
) （指定页面总体属性，注意，在这里可以添加鼠标效果．最简单的鼠标效果代码：CURSOR: url(”); ） overflow-y:auto; overflow-x:hidden; margin:0; padding:0;} （这四个代码对于要移动空间导航栏的一定要记得使用，如要把导航栏移动到中间，不使用此代码将使页面变宽，出现横向拉条，影响美观．简单的说下overflow：overflow : visible | auto | hidden | scroll 取值： visible : 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效 auto : 在必需时对象内容才会被裁切或显示滚动条 hidden : 不显示超过对象尺寸的内容 scroll : 总是显示滚动条 ）#main {BACKGROUND: url(
) no-repeat 8px 0px;} （这个是指定空间名称那部分属性的，如添加背景图片之类的．百度默认CSS里没有这个代码，可以自己加入，方便设计空间）#header{ HEIGHT: 380px;margin-left:10px } （这个是很重要的，如果用#main加空间名称那里的背景图片，千万记得这里的高度要和背景图片的高度一样．margin-left检索或设置对象左边的外补丁．）#header div.tit a.titlink{font-size:0px;color:#ffffff;text-decoration:none} #header div.tit a.titlink:visited{font-size:0px;color:#ffffff;text-decoration:none} #header div.desc{top:217px;left:300px;color:#ffffff;font-size:12px} #header div.tit{top:197px;left:300px}#tab{top:14px;left:-35px;background:transparent;} （这个代码是空间导航栏位置的，你可以修改TOP和left来移动导航拦位置．） #tab a.on,#tab a.on:link,#tab a.on:visited{margin-top:3px;line-height:19px;background-color:transparent;color:#ffffff;font-size:14px} （导航栏文字的背景） #tab span{color:#ffffff;font-size:14px} （导航栏字体颜色和大小） #tab a:link{color:#ffffff;text-decoration:none;font-size:14px} （导航栏被点击后的属性） #tab a:visited{color:#ffffff;text-decoration:none;font-size:14px} #tab2{background:transparent;} #tab2 span{color:#000000;font-size:12px;font-weight:bold} #tab2 a{font-size:12px} #tab2 a:link{color:#0000CC} #tab2 a:visited{color:#0000CC} 对于这段代码本人没有研究.stagepad {width:600px;margin-left:55px;}.stagepad a:link{text-decoration:none;font-weight:bold} .stagepad a:visited{text-decoration:none;font-weight:bold}#layout {width:974px;margin-left:0px;background:url(
) no-repeat bottom -18px;padding-bottom:50px} （这个是页面下方的背景图片，大家可以看我的空间下方有个页面制作：午夜浪儿的字样，靠的就是这个代码．）.stage {background:url(
) no-repeat 0px 10px } （这个代码上面已经有讲解，就是设置导航栏下部分的背景图片的）#layout td.c2t3{padding-right:0px;padding-top:0px;width:250} #layout td.c2t1{padding-left:170px;padding-top:0px;width:600px;border-right:#930000 0px solid;} #layout td.c2t2{width:60px}（此段代码上面已经有详细讲解）#comm_info{color:#ffffff;font-family:Arial;text-align:center;padding-top:19px;TEXT-INDENT:px;} #comm_info div.line{margin-top:0px;border-top:0px solid #5C85BB;} #comm_info a{color:#ffffff;text-decoration:none;} #comm_info a:visited{color:#ffffff;text-decoration:none}#page{height:30px;font-size:12px;font-family:Arial;text-align:center} #page span{padding:3px;color:#1a4a8a;font-size:14px;font-weight:bold} #page a.pc{color:#ffffff;font-size:14px;font-weight:bold} #page a.pc:visited{color:#ffffff} #page a.pi{padding:3px;color:#ffffff;font-size:14px} #page a.pi:visited{color:#ffffff}.mod{margin-bottom:20px} .modhandle{cursor:move} .modth{height:0px} .modhead{padding:0px 4px 0 4px;padding-top:px;padding-bottom:3px; LINE-HEIGHT:17px;border-bottom:#ffffff1px solid;text-align:center} .modopt{padding:4px 4px 0 0} .modtit{color:#ffffff;font-size:14px;font-weight:bold}a.modtit{color:#ffffff}a.modtit:visited{color:#ffffff} .modtitlink{color:#ffffff;font-size:12px;font-weight:bold}a.modtitlink{color:#ffffff;text-decoration:none}a.modtitlink:visited{color:#ffffff;text-decoration:none}a.modtitlink:hover{color:#FF5100;text-decoration:none} .modact{color:#ffffff;font-size:12px;text-align:center}a.modact:link{color:#ffffff}a.modact:visited{color:#ffffff} .modbox{padding:0px 0px 0 0px} .modtl{background:url(
) 0px -1px} .modtc{background:url(
)} .modtr{background:url(
) -2px -1px} .modbl{line-height:1px} .modbc{line-height:1px} .modbr{line-height:1px} （本段代码请参考百度空间官方CSS帮助）#mod_bloglist{padding-top:0px} #m_blog {padding-top:0px} （指定文章内容距离#header部分的距离．） （下面的代码请大家参考百度官方CSS帮助）#m_blog div.cnt a {text-decoration:none;color:#344500} #m_blog div.cnt a:visited {text-decoration:none;color:#344500} #m_blog div.cnt a:hover {border-bottom:1px #344500 dashed;color:#344500} #m_blog {padding-left:15px;padding-right:15px;margin-top:20px} #m_blog div.tit{padding-top:0px;padding-bottom:0px;color:#4E7304;font-size:13px;font-weight:bold;text-decoration:none;border-bottom:1px solid #4E7304;border-top:0px solid #ffffff;TEXT-INDENT: 119px;line-height:17px} #m_blog div.tit a{color:#4E7304;font-size:13px;font-weight:bold;text-decoration:none} #m_blog div.tit a:visited{color:#4E7304;text-decoration:none}#m_blog div.date{font-size:13px;margin:-20px 0 8px 0;color:#4E7304;TEXT-INDENT: 7px;font-weight:bold} #m_blog div.cnt{color:##005533;line-height:20px;font-size:15px;font-weight:700;PADDING-RIGHT: 10px; PADDING-LEFT: 10px;PADDING-TOP: 10px;PADDING-bottom: 10px;}#m_blog div.more{margin:14px 0 16px 0;text-decoration:none;font-weight:bold} #m_blog div.more a{color:#ffffff;font-size:14px;text-decoration:none;font-weight:bold} #m_blog div.more a:visited{color:#ffffff;text-decoration:none;font-weight:bold}#m_blog div.opt{color:#689411;font-size:12px} #m_blog div.opt a{color:#689411;font-size:12px;text-decoration:none} #m_blog div.opt a:visited{color:#689411;text-decoration:none} #m_blog div.line{margin-top:17px;line-height:17px} #m_blog div.none{padding:100px 0 100px 0;color:#1a4a8a;font-size:14px}#m_pro {text-align:left;padding-left:18px;padding-right:10px;} #m_pro a{color:#995C00;font-weight:bold;text-decoration:none;text-align:center} #m_pro a:visited{color:#995C00;font-weight:bold;text-decoration:none} #m_pro div.image{text-align:center;;border-bottom:#ffffff 1px solid;padding-top:5px;padding-bottom:5px} #m_pro div.act{margin-top:10px} #m_pro div.user{color:#995C00;font-size:12px;font-weight:bold} #m_pro div.desc{color:#995C00;font-size:12px} #m_pro div.line{margin-top:17px;line-height:17px;border-top:1px solid #1A4A8A} #m_pro td{color:#995C00;line-height:24px;font-size:14px}#m_album div.image{text-align:center;padding-top:30px} #m_album div.page{color:#995C00;font-size:12px;text-align:center} #m_album div.page a{color:#995C00;font-size:12px} #m_album div.page a:visited{color:#330000}#m_links {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift} #m_links div.item{color:# 6E981A;font-size:12px; LINE-HEIGHT: 21px} #m_links div.item a{color:#995C00;font-size:12px;text-decoration:none} #m_links div.item a:visited{color:#995C00}#m_links div.linediv.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}#m_artclg {border-top:0px solid #5C85BB;padding-top:5px} #m_artclg {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift} #m_artclg div.item{color:#995C00;font-size:12px;text-align:left;padding-left:0px} #m_artclg div.item a{color:#995C00;font-size:12px;text-decoration:none} #m_artclg div.item a:visited{color:#995C00;text-decoration:none} #m_artclg div.linediv.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}#m_comment {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift} #m_comment div.item{color:#D2E9F4;font-size:12px;} #m_comment div.item a{color:#995C00;font-size:12px;} #m_comment div.item a:visited{color:#995c00;text-decoration:none;} #m_comment div.item a.cnt{color:#995C00;font-size:12px;} #m_comment div.item a.cnt:visited{color:#995c00;text-decoration:none;font-weight:normal;text-align:center} #m_comment div.item a.cnt:hover{color:#D2E9F4;text-decoration:underline;text-align:left} #m_comment div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}#m_albumlist div.note{color:#995C00;font-size:14px} #m_albumlist div.desc{margin-bottom:12px;padding:3px 10px 3px 10px;line-height:22px;background-color:#F2F2F2;font-size:14px} #m_albumlist div.none{padding:100px 0 100px 0;color:#995C00;font-size:14px} #m_albumlist div.line{margin-top:10px;line-height:16px;border-top:1px solid #ffffff} #m_albumlist div.tit{margin:6px 0 7px 0;color:#995C00;font-size:14px} #m_albumlist div.tit a{color:#995C00;font-size:14px} #m_albumlist div.tit a:visited{color:#995C00} #m_albumlist span.count{color:#995C00;font-size:12px;font-weight:bold} #m_albumlist span.size{color:#999999;font-size:12px;font-family:Arial} #m_albumlist a.act{color:#995C00;font-size:12px} #m_albumlist a.act:visited{color:#995C00} #m_albumlist a.page{color:#330000;font-size:14px} #m_albumlist a.page:visited{color:#330000} #m_albumlist td.image{padding:5px;border:1px solid #999999;background:#995C00}#m_friend div.filter{margin-bottom:10px;padding-left:10px;padding-top:10px;height:27px;line-height:27px} #m_friend div.catalog{margin-bottom:10px;padding-left:10px;height:27px;line-height:27px;background-color:#F2F2F2;font-size:14px} #m_friend div.user{margin-top:4px;color:#995C00;font-size:12px} #m_friend div.user a{color:#995C00;font-size:12px} #m_friend div.user a:visited{color:#995C00}#m_friend div.line{margin-top:10px;line-height:16px;border-top:1px solid #995C00}#m_mylink1 {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift} #m_mylink1 div.item{color:#995C00;font-size:12px} #m_mylink1 div.item a{color:#995C00;font-size:12px;text-decoration:none} #m_mylink1 div.item a:visited{color:#995C00} #m_mylink1 div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}#m_mylink2 {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift} #m_mylink2 div.item{color:#995C00;font-size:12px} #m_mylink2 div.item a{color:#995C00;font-size:12px;text-decoration:none} #m_mylink2 div.item a:visited{color:#995C00} #m_mylink2 div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}#m_mylink3 {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift} #m_mylink3 div.item{color:#995C00;font-size:12px} #m_mylink3 div.item a{color:#995C00;font-size:12px;text-decoration:none} #m_mylink3 div.item a:visited{color:#995C00} #m_mylink3 div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}#m_mylink4 {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift} #m_mylink4 div.item{color:#995C00;font-size:12px} #m_mylink4 div.item a{color:#995C00;font-size:12px;text-decoration:none} #m_mylink4 div.item a:visited{color:#995C00} #m_mylink4 div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}#m_filed {padding-left:18px;padding-right:18px;text-align:left;border-top:0px solid #995C00;text-align:lift} #m_filed div.item{color:#995C00;font-size:12px} #m_filed div.item a{color:#995C00;font-size:12px} #m_filed div.item a:visited{color:#995C00} #m_filed div.line{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}#m_setting a{color:#995C00} #m_setting a:visited{color:#995C00} #m_setting{line-height:22px;color:#995C00;font-size:14px} #m_setting img.sel{border:4px solid #FFDB7B} #m_setting img.unsel{border:1px solid #D2D2D2} #m_setting span.tit{font-size:14px} #m_setting span.usr{color:#995C00} #m_setting div.sel{padding-top:6px;font-size:14px;font-weight:bold} #m_setting div.line{margin-top:20px;line-height:16px;border-top:1px solid #ffffff}#m_sysinfo a{color:#995C00} #m_sysinfo a:visited{color:#995C00} #m_sysinfo{line-height:22px;color:#995C00;font-size:14px} #m_sysinfo span.new{color:#FF0000;font-size:10px;font-family:Arial} #m_sysinfo span.date{color:#995C00;font-size:14px}#m_setbase{color:#995C00;font-size:14px} #m_setbase td{color:#995C00;font-size:14px} #m_setbase div.line{margin-top:5px;line-height:8px;border-top:1px solid #ffffff}{all rights reserved,} #in_comment div.tit{margin-bottom:12px;color:#995C00;font-size:14px;font-weight:bold} #in_comment div.user{margin-bottom:6px;color:#995C00;font-size:12px} #in_comment div.user a{color:#995C00;font-size:12px} #in_comment div.user a:visited{color:#995C00} #in_comment div.user span.date{color:#995C00;font-size:12px} #in_comment div.desc{color:#995C00;font-size:12px} #in_comment div.line{margin-top:17px;line-height:17px;border-top:1px solid #995C00}#in_send div.tit{margin:10px 0 10px 0;color:#995C00;font-size:14px;font-weight:bold} /* 请不要随意修改版权，尊重别人的劳动成果.如有需要，请和浪儿本人联系 */
css能不能实现这种特效，就是鼠标放上去就往上移动了一点。挪走就回复原来的效果。怎么做啊！
方帆搜法有很多种图片特效教程css，下面图片特效教程css我介绍一种纯CSS图片特效教程css的实现图片特效教程css的方式图片特效教程css：
!DOCTYPE html
html lang=”zh-cn”
head
meta charset=”utf-8″ /
title/title
style
html,
body {
margin: 0;
padding: 0;
}
.main {
width: 460px;/*每个box的宽度为150px,间隔为5*2*/
margin: 0 auto;
}
.demo {
float: left;
display: inline-block;
}
.box {
height: 150px;
width: 150px;
background: #3695d5;
position: relative;
overflow: hidden;
}
.inbox {
height: 50px;
line-height: 50px;
text-align: center;
color: #FFF;
width: 100%;
position: absolute;
bottom: -50px;
background: rgba(0, 0, 0, 0.3);
transition: 1s;/*过渡效果*/
}
.box:hover.inbox {
bottom: 0;
}
/style
/head
body
div class=”main”
div class=”demo”
div class=”box”
图片
div class=”inbox”
文字
/div
/div
/div
div class=”demo” style=”margin: 0 5px 0 5px;”
div class=”box”并轿芦
图片
div class=”inbox”
文字
/div
/div
绝带/div
div class=”demo”
div class=”box”
图片
div class=”inbox”
文字
/div
/div
/div
/div
/body
/script
/html
关于图片特效教程css和html5图片特效的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。