栏目导航
热点推荐
- 3个简单却重要的CSS技巧
- css基础:熟悉了解盒子模型(box m
- CSS Hack兼容各浏览器是否正常
- 最常用的12种CSS BUG解决方法与
- [分享]我的css hack观点
- CSS实例教程:分号引起页面混乱
- CSS教程:认真学习haslayout
- CSS教程:编写CSS代码时样式命名
- 如何在CSS中设定文本的尺寸
- CSS教程:CSS定位属性
- 新窗口打开超链接的正确方法
- 轻松搞定IE的CSS制作网页技巧3则
阅览排行
css3和js网页制作实例:网页头像展示效果
www.jz123.cn 2013-10-21 来源: 站长家园 责任编辑(袁袁) 我要投递新闻
今天就为大家分享一个非常有创意的CSS3头像展示效果,交互性强,是一个基于css3和js来实现的,代码量不多,但是最终的效果却很让人赞叹,所以特别推荐给大家。其中关于本示例的一些css样式呈现,个人认为还有很大的发挥空间,例如鼠标经过的时候而不是切换成一个背景色和文字,而是替换成其他的相关图片(例如改为人物的其他表情),这将会是非常的有意思的。
下载附件:http://www.webjx.com/files/soft/1_130711103319.rar
好了,接下来我们一起看看其效果的制作方法。
HTML代码结构
<ul class="grid"> <li> <a href="http://www.jiawin.com/creative-css3-avatar-display"> <img src="images/1.jpg" alt="" /> <div class="info"> <p>1</p> </div> </a> </li> </ul>
看了上面代码是极其简单的,就一个列表元素,你需要放多少张图片就写多少<li>。<li>里面的结构如上。
CSS样式表
接下来就是我们的css样式表了,在这里只是一个示例,大家在这部分可以自由发挥,定义出你们的个性来。
body { font-family: Helvetica, Arial, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: antialiased; margin:0; padding:0; background-color: #E6E6E6; } .grid { margin: 100px auto 80px auto; padding: 0px; width: 100%; height: auto; overflow: hidden; max-width: 1000px; -webkit-box-shadow:0px 40px 50px rgba(0, 0, 0, 0.3); -moz-box-shadow:0px 40px 50px rgba(0, 0, 0, 0.3); box-shadow:0px 40px 50px rgba(0, 0, 0, 0.3); } .grid li { width: 10%; background: #000000; float: left; position: relative; overflow: hidden; } .grid img { float: left; width: 100%; height: auto; position: relative; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform-style: preserve-3d; -moz-backface-visibility: hidden; -moz-transform: translate3d(0, 0, 0); transform-style: preserve-3d; backface-visibility: hidden; transform: translate3d(0, 0, 0); } .grid .info { position: absolute; width: 100%; height: 100%; padding: 15px; background: #DC584C; display: none; z-index: 2; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform-style: preserve-3d; -moz-backface-visibility: hidden; -moz-transform: translate3d(0, 0, 0); transform-style: preserve-3d; backface-visibility: hidden; transform: translate3d(0, 0, 0); } .grid p { font-size: 22px; font-weight: bolder; color: #FFF; }
JavaScript代码
最后,我们需要借助JavaScript来完成一些特殊的互动(动画效果)。
(function() {
$(function() {
var columns, current, easing, grid, hideItem, showItem, time,
_this = this;
grid = $(".grid");
current = {
index: -1,
column: 0,
line: 0
};
columns = 10;
easing = "cubic-bezier(0.165, 0.840, 0.440, 1.000)";
time = 400;
grid.on("mouseenter", "a", function(e) {
var column, el, image, index, info, item, line;
el = $(e.currentTarget);
info = el.find(".info");
image = el.find("img");
index = el.parent().index();
column = index % columns;
line = Math.floor(index / columns);
console.log(index, column, line);
item = {
el: el,
index: index,
column: column,
line: line,
info: info,
image: image
};
if (current.el && current.index === index) return;
if (line === current.line && column > current.column) {
showItem(item, "-100%", 0, "25%", 0);
hideItem(current, "100%", 0, "-25%", 0);
} else if (line === current.line && column < current.column) { showItem(item, "100%", 0, "-25%", 0); hideItem(current, "-100%", 0, "25%", 0); } else if (line > current.line && column === current.column) {
showItem(item, 0, "-100%", 0, "25%");
hideItem(current, 0, "100%", 0, "-25%");
} else {
showItem(item, 0, "100%", 0, "-25%");
hideItem(current, 0, "-100%", 0, "25%");
}
return current = item;
});
showItem = function(item, infoX, infoY, imageX, imageY) {
item.info.stop().css({
x: infoX,
y: infoY,
display: "block"
}).transition({
x: 0,
y: 0,
duration: time,
easing: easing
});
return item.image.stop().transition({
x: imageX,
y: imageY,
opacity: .5,
duration: time,
easing: easing
});
};
return hideItem = function(item, infoX, infoY, imageX, imageY) {
if (!item.el) return;
item.info.stop().transition({
x: infoX,
y: infoY,
duration: time,
easing: easing
});
return item.image.stop().css({
x: imageX,
y: imageY,
opacity: .5
}).transition({
x: 0,
y: 0,
opacity: 1,
duration: time,
easing: easing
});
};
});
}).call(this);
到这里,我们的示例基本上就完成了,但是按照上面几步来,最终是没效果的,那是因为我们还没引入jQuery库和一个jQuery插件(jQuery Transit)。
<script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js"></script>
jQuery Transit是一个利用了CSS3的过渡和转换特性来实现动画特效的 jQuery插件,与jQuery的animate方法有着同样的语法。此插件支持这个特性所提供的大部分方法,同时增加了 jQuery 独有的技术:回调(callbacks)、自动增加浏览器CSS前缀、链盒(chaining)等。由于此插件使用了真正的CSS3规则,所以它不能兼容旧版本的浏览器。
下载附件:http://www.webjx.com/files/soft/1_130711103319.rar
今天的示例就到这里了,希望大家喜欢,如果有问题可以在下方留言,一起探讨研究。
上一篇:sass安装教程:ruby安装步骤和sass安装步骤 下一篇:CSS网页制作教程:CSS文字单位PX、EM、PT