转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277
今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下。
效果图:
效果是不是还是很不错的,最主要的是没有使用一行js,这才是亮点。
先看html文件:
<body>
<div id="gallery">
<h1>纯CSS3相册效果</h1>
<ul>
<li>
<span class="touch"><img src="images/pic1.jpg"/></span>
<div style="display: block;">
<img src="images/pic1.jpg"/>
</div>
</li>
<li>
<span><img src="images/pic2.jpg"/></span>
<div>
<img src="images/pic2.jpg"/>
</div>
</li>
<li>
<span><img src="images/pic3.jpg"/></span>
<div>
<img src="images/pic3.jpg"/>
</div>
</li>
<li>
<span><img src="images/pic4.jpg"/></span>
<div>
<img src="images/pic4.jpg"/>
</div>
</li>
<li>
<span><img src="images/pic5.jpg"/></span>
<div>
<img src="images/pic5.jpg"/>
</div>
</li>
</ul>
<div class="clearfix"></div>
</div>
</body>
简单描述一下:
1、ul 中 li决定了照片的个数
2、ul使用样式float:right,width:140px;使得显示在相册的右侧区域
3、li的float:left,使得li可以左浮动;li中存放大图的div,position为absolute会根据div#gallary进行定位,默认只有第一个显示
4、当鼠标移动到li上时,改变li span img的透明度和li div的display将大图显示
接下来就是css文件:
<style type="text/css">
body
{
font-family: "微软雅黑";
}
#gallery
{
width: 700px;
position: relative;
margin: 20px auto 0;
background-color: #000;
min-height: 400px;
padding: 20px;
}
/*标题*/
#gallery h1
{
color: #fff;
font-size: 2em;
font-weight: bold;
}
#gallery ul
{
width: 140px;
float: right;
margin: 10px 0 20px;
}
#gallery ul li
{
float: left;
margin: 20px 8px 0 0;
}
#gallery ul li span
{
display: block;
position: relative;
width: 60px;
height: 80px;
border: 1px solid #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
overflow: hidden;
}
#gallery ul li span img
{
position: relative;
top: -200px;
left: -100px;
filter: alpha(opacity=30);
opacity: 0.3;
}
#gallery ul li span.touch img, #gallery ul li:hover span img
{
opacity: 1;
filter: alpha(opacity=100);
}
#gallery ul li:hover div
{
display: block;
}
#gallery ul li div img
{
width: 460px;
height: 288px;
}
#gallery ul li div
{
display: none;
position: absolute;
top: 100px;
left: 30px;
border: 5px solid #fff;
}
.clearfix
{
clear: both;
}
</style>
css中没有什么复杂的样式,就不做描述了。此外html中我引入了一个重置样式的css , reset.css ,大家也可以使用自己习惯的重置样式:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend{
margin: 0;
padding: 0;
font-size: 100%;
border: 0;
outline: 0;
background: transparent;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
源码点击下载
分享到:
相关推荐
纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整...
纯CSS3相册效果网页特效是一种利用现代浏览器对CSS3特性的支持,实现无需JavaScript插件的动态相册展示方式。CSS3,全称为层叠样式表第三版,是CSS技术的最新发展,它带来了许多增强功能,如选择器、过渡、动画、多...
在本实例中,我们将深入探讨一个基于HTML5和CSS3的3D旋转木马效果相册,这是一个充满吸引力的图片展示方式,能够为用户带来独特的浏览体验。 3D旋转木马效果相册利用了CSS3的transform属性,尤其是rotateY()和...
总之,纯CSS实现的3D相册是一个展示CSS3强大能力的优秀案例。它结合了3D变换、交互设计和响应式布局,是Web前端开发中一个有趣的挑战。通过学习和实践,你可以提高自己的CSS技能,并创造出更多富有创意的3D视觉效果...
高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3...
这是一个使用纯CSS实现的旋转相册,通过CSS3的transform属性实现3D旋转和悬停效果。页面中包含一个div容器,其中包含多个img标签,每个img标签代表一个相册图片。通过设置容器的transform-style属性为preserve-3d,...
总结来说,这个3D旋转相册项目是HTML与CSS3结合的绝佳实践,通过理解并应用3D转换、过渡、动画和滤镜等CSS3特性,我们可以创造出互动性丰富的网页元素。对于初学者来说,这是一个很好的起点,不仅能提升CSS技能,还...
【标题】"5种动画过渡效果的纯CSS3幻灯片特效"介绍了一种利用CSS3技术实现的幻灯片组件,它具有五种不同的动画过渡效果,为网站的动态展示提供了丰富的选择。这种特效完全基于CSS3,不依赖JavaScript库,因此在性能...
总之,“html5 css3 3D立体式图片相册切换”是一个结合了HTML5动态图形和CSS3高级特性的项目,它展示了如何利用现代Web技术来打造引人入胜的3D用户体验。这个项目的核心在于理解并熟练运用HTML5 `<canvas>`、CSS3的...
本项目"HTML5+CSS3实现图片可倾斜摆放的动画相册效果源码"就是利用这两者的优势,创造了一种创新的图片展示方式。 首先,HTML5是超文本标记语言的第五个版本,它引入了许多新的元素和API,旨在提高网页的语义性和可...
在这个"HTML5+CSS3+jQuery相册"项目中,我们主要关注的是如何利用这些技术来创建一个3D效果的相册。 HTML5是超文本标记语言的最新版本,它引入了许多新的元素和API,旨在使网页结构更加语义化,提高可访问性和性能...
实现了会翻动的3D立体图书效果,就目前示例排版来说,非常适合官方网站使用,因为看起来比较松散,占用面积比较大,当然,改一下就可以适应于所有网页使用了...建议使用支持HTML5与css3效果较好的火狐或谷歌等浏览器。
html+css+js_3D动态表白相册,纯前端的web部分,资源中没有设计后台代码及其数据库部分。资源的包含了该动态相册的源码+参考文章地址,对于初学者来说,该动态相册直接用浏览器即可打开查看相应效果(如果不是预期的...
基于css,jquery,html的3D旋转相册,炫酷实用,有效。
总的来说,这个“html5+css3源码”压缩包为程序员提供了一个展示技术魅力和表达情感的平台,通过巧妙结合HTML5的新特性与CSS3的样式效果,可以打造出独一无二的表白网页。无论是动态的画面还是创新的设计,都充分...
在"HTML5 CSS3 专题:3D展示商品信息项目完整实例源码"这个项目中,我们将深入探讨如何利用这两者来创建一个引人入胜的商品3D展示效果。 首先,HTML5引入了许多新的元素,如`<article>`、`<section>`、`<nav>`等,...
1. CSS3 Transitions和Transforms:CSS3引入了过渡(Transitions)和变换(Transforms)属性,可以实现平滑的动画效果。在翻页特效中,这些属性可以用来改变相册页面的角度、大小、位置等,创造出翻页的视觉效果。 ...
接下来是CSS部分,我们需要利用CSS3的3D转换属性来实现相册的旋转效果。这些属性包括`transform`、`perspective`、`rotateX`和`rotateY`等。通过改变这些属性值,我们可以模拟出相册的翻页和旋转。例如: ```css #...